Within eLearning curricula, avoidance of Flash is imperative. This short tutorial shows how to wrap an MP4 for playback in HTML from within the Adobe Connect Content Library. This wrapping technique will soon be unnecessary as every new release of Adobe Connect more finely integrates HTML5.
The Adobe Connect Content Library is a central location hosting eLearning content that may be shared in multiple eLearning venues from a single URL; it facilitates ease of editing by content authors by offering them a single shareable resource link that can be used within Events, Meetings, Virtual Classrooms and for simple on-demand playback.
Adobe Connect supports upload of files in zip format and can playback various content from within a zipped folder; while there are some exclusions to what file-types may be inside the zip file, the format itself is supported and many authors using Adobe Captivate and Adobe Presenter will publish zipped content locally prior to uploading to the Adobe Connect Content Library where it may be shared among Virtual Classrooms or within Adobe Connect Events from a single source.
Let’s take the example of my poorly recorded extemporaneous fishing video; many in my Fishing Academy for Balding Bearded Boomers class were skeptical that my catch was as big as I had gregariously reported after consuming three beers, so I decided to supply proof to the class, but when I uploaded my reycatch.mp4 video recording my alleged catch directly to the Adobe Connect Content Library, it invoked Flash in browsers during playback and some could not view it thereby raising more suspicions that I was just telling another exaggerated fish story:
Flash content remains at the mercy of the sundry browser settings and happily can be easily avoided in Adobe Connect:
The solution to this fishing mishap is to wrap the MP4 for playback in HTML:
Step 1: Create a folder and place the MP4 video (reycatch.mp4) into the folder; the name of the folder does not matter.
Step 2: Use any good text editor to create a file called index.html and paste in the code below:
<head>
<link href=”http://vjs.zencdn.net/5.10.2/video-js.css” rel=”stylesheet”>
<!– If you’d like to support IE8 –>
<script src=”http://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js”></script>
</head>
<body>
<video id=”my-video” class=”video-js” controls preload=”auto” width=”1280″ height=”720″
data-setup=”{}”>
<source src=”reycatch.mp4” type=’video/mp4′>
<p class=”vjs-no-js”>
To view this video please enable JavaScript, and consider upgrading to a web browser that
<a href=”http://videojs.com/html5-video-support/” target=”_blank”>supports HTML5 video</a>
</p>
</video>
<script src=”http://vjs.zencdn.net/5.10.2/video.js”></script>
</body>
Step 3: Edit the index.html file by replacing the reference to the MP4, reycatch.mp4, with the actual name of your video and save the index.html file in the folder containing the MP4 video you wish to publish.
Step 4: Zip the folder:
Step 5: Upload the zipped folder containing the MP4 and index.html to the Adobe Connect Content Library:
Note that you may choose a custom URL in the Adobe Connect Content Library.
Here I simply set the permissions to allow public viewing:
Now the video is ready to share as an HTML object in Adobe Connect in any Event, Virtual Classroom, Meeting, Curriculum or as on-demand content and it will not invoke Flash: http://platinum.adobeconnect.com/reycatch/
Thankfully we don’t always catch just stingrays:
Great info
Hi Lieve, thanks for your comment. Yes, we certainly encourage interactivity in our classrooms, but video has its place too. And actually you can embed Captivate content in Adobe Connect, as stand alone content that is tracked by our native training system, as non-tracked but fully interactive content in a regular meeting, and as tracked interactive content in a virtual classroom. The key is to publish from Captivate as a hybrid (HTML + SWF) package in a zip container, with the “eLearning Output” set to enable reporting for Adobe Connect. Then just follow the same instructions Frank has described above to load the content into your library. From there you can call it into your meeting or virtual classroom and let each student engage with it independently. Oh, and yes, the audio is much better in Adobe Connect now, and even more fixes coming in a few weeks. Cheers!
Attachment 
The dual publishing is not working correctly since some versions. Moreover it has no sense anymore, since it would mean that anyone on a laptop/desktop would see the SWF version, even if the Flash player is not available in their browser or disabled.
Will it work wit;h a simple zipped HTML output? I have to try that, because I believed it was still the case that you can upload and use PPT but not a Captivate presentation. Maybe I was not clear enough. I use Captivate both to present (for a webinar) and to be used by the trainees in a training session. After your confirmation, will certainly try this out. I should have asked in my recent webinar whether the audio was audible in the Captivate published files I demonstrated (will have to view the recording).
Glad about improvement of the audio.
Great info
Thanks for this, but I rarely use video for eLearning. Yesterday I presented about ‘Interactivity with Captivate’. My profound conviction after decades of training and teaching is that efficiency of eLearning assets increase with the amount of interactivity. AFAIK it is still impossible to embed them in Connect.
My approach for webinars and training online is to share my screen and run the eLearning courses in a web browser. When possible from localhost to avoid loading lags. However will the audio issues improve in Connect?
You must be logged in to post a comment.
