Embedding .mp4 videos to a storyline slide

Nov 04, 2013

Hello eLearning Heroes!

I'm currently building a course and one of the requirements is to take videos from our Amazon S3 server and embed them directly into an Articulate slide.

The videos are currently in a .mp4 format and have been uploaded to the S3 server.

I have attempted to embed the video by using the following code:

When the users click the play button windows media player comes up and I can play the video. I want to embed the video directly into the slide without having to open another application.

I did some searches on the forums and it looks like I'll have to do the following:

- Use an open source embed player
- Create an html file with the player code and link to the storyline video.
- Embed an html file to the storyline slide instead of embedding the video directly

Some questions:

- Do I upload the open source player in the same directory as the published files then upload them directly to my LMS? or do I upload the open source player to the S3 server and do I have to put the player individually in each project directory?
- Does the open source player generate the html coding or will I have to manually copy and paste the code and create my own html page?

Thanks,

Roger

4 Replies

Roger Ho
Author

over 10 years ago11/05/13 at 8:21 am (UTC)

Update:

I was able to succesfully create an html page with a streaming .mp4 file. There was no need to upload the open source player in the S3 server.

I tried a few different options:

1. Using the VideoJS (http://www.videojs.com/) service I was able to generate some basic java and html coding to paste to my page. I used the .mp4 file I uploaded on the S3 account and was able to get the video to stream. The company I'm currently working uses an IE8 without html 5 support. The video would play but the controls would be missing. Every other browser (Chrome, Firefox, and Safari) showed the video and player controls.

2. Using Videos For Everybody (http://sandbox.thewikies.com/vfe-generator/) I was able to generate the coding that works with IE8 and all the other browsers (Player controls work too!).

3. In Articulate I selected the insert video from website and used this as the embed code:

"<iframe width ="768" height="432" src="http://s3.amazonaws.com/anonymous/Media/Videos/fakedir/video.html" frameborder ="0" allowfullscreen></iframe>"

4. Next to tackle is sizing! So in HTML5 test cases I noticed that the browser accurately displays the desired resolutions but in IE8 falls back to the flash version of the video and displays a different resolution. (Frustrating!) To start off I get rid of all borders and scroll bars by using the code I found on the support pages:

<html>
<head>
<style>
html, body {
margin: 0 0 0 0;
overflow:hidden;
}
</style>
</head>
<body>
</body>
</html>

5. After playing with different 16:9 aspect resolutions I think I found one that works with IE8 to fill the screen without borders. The issue I'm running into now is that the video loks smaller on other browsers and devices.

The next focus is to find a solution for web objects / embedded videos to scale with the player. This will reduce the need to mess with all these different types of resolutions. If anyone has any suggestions it would greatly be appreciated.

P.S this is fun