How To Dynamically Set VideoPlayer Path

[iRadiate]

I have a simple UX with 2 Panel Cards:

Panel card 1 has a static dropdown list with the directory path of a corresponding mp4 video file
When the video is selected from the dropdown list, I populate a control called VideoPath with the directory path and go to panel card 2 where the videoplayer resides

Problem is I don't seem to be able to use a placeholder {VideoPath} as the location for the video file, the player doesn't recognize this.

Videos.jpg

Does the VideoPlayer not work with placeholders or is the VideoPath control data not getting passed into the second panel card?
How can I dynamically set the video path?

[Davidk]

Re: How To Dynamically Set VideoPlayer Path

The VideoPlayer you're working with is not a data bound control. It is just a video tag, however, so you can get a pointer to that control and set it's source. From a DropDownBox Control... onChange event...

var vp = {dialog.Object}.getPointer('VideoPlayer');
vp.src = this.value;

[iRadiate]

Re: How To Dynamically Set VideoPlayer Path

Thanks David!

I've now changed the dropbox to a list so I can eventually have the data bound to a SQL table. So now it uses the list click event to 'read an html5 url from a list' using the Video Player Control Actions.

VideoPlayerActions.jpg

Works great in Live Preview and Internet Explorer but does not work in Chrome or Firefox. This is what Chrome & Firefox show.

Not Supported.jpg

I am assuming this might be due to the codec but as I understand, html5 video is compatible with all these browsers (https://en.wikipedia.org/wiki/HTML5_video)
for H.264 encoded mp4's, which is what I am using as source video files.

Has anyone run into this issue? I wonder if it has something to do with running inside a TabbedUI? Maybe I need to open the video inside a standalone a5w page ..

[iRadiate]

Re: How To Dynamically Set VideoPlayer Path

I am getting totally frustrated tying to work with the Alpha video player!!!

Would someone be willing to try the attached component and see if it will play video at all?
It is a basic component with a static list that points to a video located in C:\Temp (the test video is also attached). Just unzip the mp4 video into C:\Temp

I managed to get this working at home (A5WS) under working preview and IE browser only, which would be acceptable.
But I try it at work (IIS Server) and it doesn't work at all!!! Wasted 2 days on this and ready to give up.

Thanks to anyone willing to take a look.

[Davidk]

Re: How To Dynamically Set VideoPlayer Path

I haven't tried under IIS, but running locally, you can NOT access a local resource. "Not allowed to access a local resource" is the console message. For a test, put the video into a relative folder.

Is there a specific reason you want to use that particular VideoPlayer control? It carries a lot of console errors.

[iRadiate]

Re: How To Dynamically Set VideoPlayer Path

I haven't tried under IIS, but running locally, you can access a local resource. "Not allowed to access a local resource" is the console message. For a test, put the video into a relative folder.

Thanks David. In my testing I have tried local and network folders without success under IIS at work. At home, I can only test A5WS and it works there for IE & Working Preview. That's the best I can do for testing and deployment.

Let me give you a bit of context here.

I want to make available some application tutorial videos (How to unlock user accounts, How to reset user passwords, etc) for my users with administrator permission .
These videos need to reside on a local network folder, not in a web resource such as YouTube or Viddler, etc. They will be accessed via a UX in a TabbedUI.

Is there a specific reason you want to use that particular VideoPlayer control? It carries a lot of console errors.

Not at all. This is the very first time I have worked with video or the video player components within Alpha. I have found the documentation around video components to be very minimal at best so I am basically fumbling my way through this not really knowing what I'm doing .. essentially trial and error (and a video I found by Bob Moore).

I started with a simple dropdown list with a static URL link just to see if I could make it work. Ultimately, the end goal would be to make the video links themselves data-bound in a SQL table so they could be managed from within the application itself (via file upload action javascript). But I'm not that far along yet. I'm currently stuck at getting the above UX with static list data to work.

If there is a better way to achieve what I want to accomplish, then I have no problem doing things differently.

[Davidk]

Re: How To Dynamically Set VideoPlayer Path

Sorry... I meant to write that you can NOT access a local resource.

There's the Data Controls Video - Data Bound control. This one is referenced by a data bound field.

Then there is the Data Controls - More - VideoPlayer control. This is pretty much just a straight forward <video> tag... but with lots of nice events. I like this one the best.

Then there is the Other Controls - VideoPlayer. This lets you select HTML5, Vimeo, YouTube, etc. If HTML5, then it's a <video> tag. Otherwise, I believe it's an <iframe> with a URL for a source.
This one is a bit of a pain for HTML5, because it wants all kinds of other stuff... WebM URL, OGG URL, Poster Images... and if you don't supply that stuff you get console errors.

So, if you want to work with a <video> tag, then use the Data Controls More VideoPlayer. Your List supplies the relative path, the <video> tag src gets set (in code off the List) and it's nice and easy.

But there's the question of where to put the videos for IIS.

[CharlesParker]

Re: How To Dynamically Set VideoPlayer Path

I just want to throw this into the mix - why not use a YouTube account? It would just be a matter of storing URLs at that point with a ton of options, storage and bandwidth that you would otherwise have to deal with in some way or another. It's a great service for a developer, not to mention the automatic marketing bump in the search engines using the title of the upload.

[iRadiate]

Re: How To Dynamically Set VideoPlayer Path

I just want to throw this into the mix - why not use a YouTube account? It would just be a matter of storing URLs at that point with a ton of options, storage and bandwidth that you would otherwise have to deal with in some way or another. It's a great service for a developer, not to mention the automatic marketing bump in the search engines using the title of the upload.

Our corporate policy won't allow it. In fact, the application does not access the internet at all.

[iRadiate]

Re: How To Dynamically Set VideoPlayer Path

Then there is the Data Controls - More - VideoPlayer control. This is pretty much just a straight forward <video> tag... but with lots of nice events. I like this one the best.
So, if you want to work with a <video> tag, then use the Data Controls More VideoPlayer. Your List supplies the relative path, the <video> tag src gets set (in code off the List) and it's nice and easy.

I will take a look at this, thanks!

But there's the question of where to put the videos for IIS.

IIS handles data files stored on network folders with no problems so I can't see why the type would matter ... but then again, maybe is does, I don't know.

[CharlesParker]

Re: How To Dynamically Set VideoPlayer Path

Makes sense Stephen - looks like you will have your hands tied and loaded down too!

[Davidk]

Re: How To Dynamically Set VideoPlayer Path

Here's something you can follow as a clue. In your UX, you've got "mySVGIcons.svg" set in the "SVG Linked files" property. Where is the "MySVGIcon.svg" file located on your server?

Wherever that is, it would be the main folder where your application resides. Add a folder there named "myVideos" and your video paths should then be, for example, "myVideos\videoname.mp4".

You're trying to include a drive letter... maybe you can't do that. Also, maybe it has something to do with backward and forward slashes... \ and /. Maybe they need to be escaped. Not sure. I'll have to test it.

Further, IE and Edge allow access to drives... but Chrome and Firefox are a bit smarter and will not allow this. Working preview displayed an "Aborted" message over the video area... and Live Preview works. I believe Live Preview and Working Preview are, by default, IE... so Live Preview working makes sense.

[iRadiate]

Re: How To Dynamically Set VideoPlayer Path

Here's something you can follow as a clue. In your UX, you've got "mySVGIcons.svg" set in the "SVG Linked files" property. Where is the "MySVGIcon.svg" file located on your server?

Wherever that is, it would be the main folder where your application resides. Add a folder there named "myVideos" and your video paths should then be, for example, "myVideos\videoname.mp4".

You're trying to include a drive letter... maybe you can't do that. Also, maybe it has something to do with backward and forward slashes... \ and /. Maybe they need to be escaped. Not sure. I'll have to test it.

Further, IE and Edge allow access to drives... but Chrome and Firefox are a bit smarter and will not allow this. Working preview displayed an "Aborted" message over the video area... and Live Preview works. I believe Live Preview and Working Preview are, by default, IE... so Live Preview working makes sense.

Finally I have this working! By default IIS publishes to C:\inetpub\wwwroot which holds the web pages and content and where mySVGIcons.svg is published. I don't think it is good practice to host files here but for the sake of testing I tried using it to hold the .mp4 video files. I couldn't make it work but in hindsight it must have been the Data Controls - More - VideoPlayer control. I reverted back to my original Other Controls - VideoPlayer and paid closer attention to the browser as you suggested above.

It works with Internet Explorer and Microsoft Edge but does not work with Chrome or Firefox. It seems that this is because Microsoft pays the licensing fees to use the codec whereas Mozilla & Google don't. Simply looking at browser support for html5 <video> element and h.264 codec with an mp4 video container is ridiculously ambiguous and straight up confusing. There are websites that host h.264 mp4 video that can be accessed and played directly in Firefox and is also supposedly natively supported by Chrome. Yet, this is definitely not a given. To see just how convoluted all of this gets, this is a quote from the Mozilla site regarding media format support.

"MP4 H.264 (AAC or MP3)
The MP4 container format with the H.264 video codec and the AAC audio codec is natively supported by desktop/mobile Internet Explorer, Safari and Chrome, but Chromium and Opera do not support the format. IE and Chrome also support the MP3 audio codec in the MP4 container, but Safari does not. Firefox/Firefox for Android/Firefox OS supports the format in some cases, but only when a third-party decoder is available, and the device hardware can handle the profile used to encode the MP4."

The videos I have been using are H.264 codec with mp4 container and AAC audio. This 'should' therefore work in IE and Chrome. It does not work in Chrome for me.

My head hurts from trying to make logical sense of this mixed bag of conflicting information.
I have attached my latest component that works ... in Internet Explorer inside a TabbedUI hosted by an IIS server (it will work with WAS also).
It uses a list control with static data to select the video. You would just need to modify the path to your own videos should you wish to use it.
The video players URL is set programmatically by the List. The list events' onclick action reads the html5 video's URL and passes it to the video player. It looks like this:

ListEvent.jpg

When modifying the static list data, IIS Server does not like mapped drives and wants to see fully qualified names like this:

Title|Path
1. Video 1|\\ServerName\ShareName\FolderName\FileName1.mp4
2. Video 2|\\ServerName\ShareName\FolderName\FileName2.mp4
3. Video 3|\\ServerName\ShareName\FolderName\FileName3.mp4

For WAS, you can use mapped drives like this:

Title|Path
1. Video 1|D:\FolderName\FileName1.mp4
2. Video 2|D:\FolderName\FileName2.mp4
3. Video 3|D:\FolderName\FileName3.mp4

Maybe this info might save someone else some aggravation. Hope it helps someone.

And Thanks David!

[CharlesParker]

Re: How To Dynamically Set VideoPlayer Path

Great post - thanks for the follow up!