Video.js web object

Feb 22, 2013

Hi everyone,

I am trying to implement a solution to get around the "no full-screen" on videos limitation in SL.

Since it's not always feasible to use YouTube (for obvious reasons), I decided to use the videoJS script.


The process is fairly simple :

A) Create a single html file with HEAD and BODY tags as described in the site (check).
B) Put MP4 and OGV format videos inside the same folder as the html file (check).
C) Call the (local) webobject inside Storyline with the right dimensions (say 480x360) (check).

Once I publish this I can view the webobject in Firefox ONLY (no Chrome or IE), plus it has the following side effect. Full screen only fills the size of the webobject it self (in essence the video resizes at about 104% of the original )...

Has anybody toyed with this for any reason (or used a different script which played nice with SL)?

Thanx in advance,
Alex

Note : The actual html page plays fine in all browsers when viewed natively (i.e.outside Storyline).

13 Replies
Alexandros Anoyatis

And (as usual), after a little digging, (half) the answer is ridiculously simple...

A) Do not use the web object but Insert video from website instead.
B) Then go to : http://sandbox.thewikies.com/vfe-generator/  and play with any output/image options, dimensions etc.
C) Copy the generated code from the bottom of the screen.

D) Paste to the SL video from website textbox.

Voila. Real full screen functionality in a snap.

However, Chrome and IE still misbehave (i.e.show nothing at all). But why?

Kevin Rusnak

I promised I would post some of the results I had with regards to the two options mentioned above.

Here are the two methods that exist to stream video into Storyline:

  1. View video using embed code.
  2. View video using Web Object

Ultimately, we decided to use the Web Object option; and I wanted to discuss why, for other readers who may find our experience helpful.

OPTION 1: View Embed Code  (Great tool: http://sandbox.thewikies.com/vfe-generator/ )

  1. First, this method is insanely simple, so if you are interested, it really makes creating the embed code easy
  2. Just go to the url above, point to your own video, add some art, and then copy and past the code into Storyline. Bam! You are done.
  3. However, we decided against this deployment method because it heavily relies on the user's browser environment to render the videos. And, while you can add Flash fallback to the embed code (we need this), the HTML5 control is left completely up to the user's browser/workstation environment. So the playback in Safari on my machine could be very different from the playback on your machine. And since all browsers render HTML5 differently, the experience isn't consistent and would be very difficult to support.
  4. Finally, since playback is left up to the user's browser, we were encountering a large number of users that were opening videos in other programs such as Windows Media and Quicktime, which created as strange fragmentation of the user experience in Storyline.

OPTION 2: Web Object

  1. This option required us to do a little bit more work, but ultimately gave us the control we needed over the user's playback experience.
  2. To pull this option off, you need to find an external video player. We used JWPlayer, which used to be free, but now requires payment. The player is key because it is built with the intelligence to look at a user's environment and then deliver the proper controls every time. If you are using Safari, Chrome, IE, etc, you will get a near consistent experience across platforms.
  3. After identifying a player, you need a HTML page to combine the player with the video that you are going to playback. Usually this is as simple as copy/pasting code into a blank HTML page, pointing it to the video, and testing.
  4. The Storyline aspect is simple, just add a WebObject to your slide and paste the URL to the HTML page.
  5. What made this option less ideal than the option above is that I not only have to create this HTML page, but I also have to add it to Storyline, which creates an extra step. In the end, we decided that this was a trade-off we were willing to accept for the constant playback we gained.

We are still having issues with IE and playback, but that is a JWPlayer issue. The other issue that we are still working around is that when the video renders in IE (inside Storyline) scroll bars appear. I understand that you should be able to place some CSS style on the page so that this doesn't happen, but every attempt to fix it has not worked. We remain resolute.

Zhenyu He

Hi, Alexandros

I published your example file in Storyline. However, the flashbox doesn't show the full screen for me.  I am trying to do in a way using  http://sandbox.thewikies.com/vfe-generator/ .

We currently don't have JWPlayer licenses purchased. That's why I am trying to work the way using embeding the code generated by the link above. Could you tell me what I did wrong?

Thanks,

Zhenyu

Zhenyu He

Hi, Alex

This is very helpful, the right-click works for me!

I think I am going to try using the generator to help me get the source code. The only file I have is a MP4 video. Do I need to have a ogg and WebM version for the same video too? What kind of web space do you usually upload the movie?

We are using the videos just internally for employees. So I am not sure what kind of web space I should use to upload the training videos?

Any suggestion is appreciated.

Thanks,

Zhenyu

Chris Spurlock

Alexandros Anoyatis said:

Certainly Michael,

I am attaching a sample story file with all the player configurations so far.

With any luck, I may find some time later to make a screencast out of it, as well.

Hope this helps,
Alex


Hello Alex,

Can you tell me if you found a way to get the full screen option to work in a web object. I am using jwplayer but when I click full screen it just fills the web object not the whole screen. Is there code I can put in my html that will force the full screen option.

Thanks

Chris

Chris Spurlock

Kevin Rusnak said:

I promised I would post some of the results I had with regards to the two options mentioned above.

Here are the two methods that exist to stream video into Storyline:

  1. View video using embed code.
  2. View video using Web Object

Ultimately, we decided to use the Web Object option; and I wanted to discuss why, for other readers who may find our experience helpful.

OPTION 1: View Embed Code  (Great tool:  )http://sandbox.thewikies.com/vfe-generator/

  1. First, this method is insanely simple, so if you are interested, it really makes creating the embed code easy
  2. Just go to the url above, point to your own video, add some art, and then copy and past the code into Storyline. Bam! You are done.
  3. However, we decided against this deployment method because it heavily relies on the user's browser environment to render the videos. And, while you can add Flash fallback to the embed code (we need this), the HTML5 control is left completely up to the user's browser/workstation environment. So the playback in Safari on my machine could be very different from the playback on your machine. And since all browsers render HTML5 differently, the experience isn't consistent and would be very difficult to support.
  4. Finally, since playback is left up to the user's browser, we were encountering a large number of users that were opening videos in other programs such as Windows Media and Quicktime, which created as strange fragmentation of the user experience in Storyline.

OPTION 2: Web Object

  1. This option required us to do a little bit more work, but ultimately gave us the control we needed over the user's playback experience.
  2. To pull this option off, you need to find an external video player. We used JWPlayer, which used to be free, but now requires payment. The player is key because it is built with the intelligence to look at a user's environment and then deliver the proper controls every time. If you are using Safari, Chrome, IE, etc, you will get a near consistent experience across platforms.
  3. After identifying a player, you need a HTML page to combine the player with the video that you are going to playback. Usually this is as simple as copy/pasting code into a blank HTML page, pointing it to the video, and testing.
  4. The Storyline aspect is simple, just add a WebObject to your slide and paste the URL to the HTML page.
  5. What made this option less ideal than the option above is that I not only have to create this HTML page, but I also have to add it to Storyline, which creates an extra step. In the end, we decided that this was a trade-off we were willing to accept for the constant playback we gained.

We are still having issues with IE and playback, but that is a JWPlayer issue. The other issue that we are still working around is that when the video renders in IE (inside Storyline) scroll bars appear. I understand that you should be able to place some CSS style on the page so that this doesn't happen, but every attempt to fix it has not worked. We remain resolute.



Thanks for the post, very helpful. I am using the web Object option but as I posted just recently to Alex, the full screen button in my player does not work. Do you know of any code that will make the full screen button work as it should?

Thank you!

Chris

This discussion is closed. You can start a new discussion or contact Articulate Support.