HTML5 playbar for in-slide video

[DarrelTenter]

In CP6 we are attempting to use in-slide video. I insert an mp4 video on the CP slide. I use one of the CP video skins. I then publish to html5 zip file for SCORM play in my LMS. The video plays on the slide but there is not playbar for pause, play, volume, etc. I've tried multiple broswers both Mac and Windows. Is this an html5 issue? Captivate? SCORM?

[Anjaneai_Srivastava]

The Skin that you use is a Flash object and hence, would not be supported on HTML5 platform.

If you like to have the playbar control, can you try insert it as Multi-Slide Synchronize Video.

Make sure you choose the radio button -- Modify the Slide duration to accomodate the complete video.

Now, using the playbar for your complete project you should be able to control Video as well for pause, forward, rewind etc.

Thanks,

Anjaneai

[DarrelTenter]

Thank you for the suggestion Anjaneai. I'll try it, but I think it will be limiting or confusing to the user. For my design the slide will have its own timeline and the video will be just a portion of the timeline. I would like the instructor's narration to give some learning content to the student, then instruction to play the video, then present the student with an assessment after the video is complete.

I wonder if it's possible to make an HTML5 video skin? It seems odd that Captivate would not have an HTML5 video skin option since we can publish to HTML5 exclusively. That would be nice.

[RodWard]

Ah...now this is where the whole HTML5 debate becomes interesting.  What you're really saying is that you want HTML5 to be just like Flash/SWF.

In the past, with tools like Flash and AS3 it was possible to create your own video player and code it to do whatever you wanted.  But...the premise behind HTML5 was that browser plugins should be abolished, which means that the controls to play a video file would be provided natively by the browser, not via plugins.  So if your particular browser of choice (Safari on the iPad for example) happens to have a really good video player app with nice controls, then you're sweet.  However, if your HTML5 browser DOES NOT happen to cater to your needs in this area, then you'll just have to wait for it to do so, or pester the browser manufacturer...instead of Adobe.

This is the dark side of HTML5 that nobody wanted to hear when "Flash is dead" was the in-vogue catch-cry. Since JavaScript as a programming language doesn't currently have anywhere near the same power as ActionScript3 when it comes to multimedia, the move to HTML5 will inevitably have lots of tradeoffs.

Moral of the story:  Be careful what you wish for.

[DarrelTenter]

Thanks for the information. I didn't realize that HTML5 relied on the browser that way.

Here's the confusing part though. I have a sample .mp4 that I found online. H.264 encoded. It plays great in my different browsers on both Mac and Windows. The playbar is different for each browswer, supporting what you say, but it does have a playbar. I take that same video and put it into Captivate, publish it to a SCORM file and post to our Moodle LMS. No playbar for the video. The CP skin is there with its playbar. Perhaps because the video is part of the presentation and not actually being played by the browser, but by the SCORM player?

I think I can make this work with how the video is placed in the timeline with the other slide elements.

[Itzelm]

Has anyone figured out how to make it work. I also have a mp4 video inserted in a slide but there isn't a playbar when i publish to html.  Workarounds?

[DarrelTenter]

We haven't found a solution, yet.

[JimAnacore]

This post is outdated, but I would like to bring it back up.

With Captivate exporting to the iPad as an app, is there a way to have a single video slide with controls (only on that slide)?  For instance, I would want the user to navigate to that slide and then be able to surf through the video. Please confirm.

Thanks,
Jim

[DarrelTenter]

I've not yet received a good answer on this. From what I can figure out when exporting to HTML5, regardless of the export package, app, exe, scorm, playing of on-slide video cannot be controlled with a video playbar. The only thing we've been able to do it make it multi-slide video and span only 1 slide. The video's playtime is in sync with the slide's timeline.

Where flash video has a skin with a playbar, HTML5 relies on the browser to control the video. Our "browser" is whatever is playing the slideshow, so until that get's an HTML5 video player we won't have a controller for in-slide video.

[Itzelm]

Correct! That's the reason we switched to Articulate Storyline.

[JimAnacore]

The real question is why is there no HTML5 skin available? Can this be inserted into the code after being output? For example, is it possible to use something like this: http://videojs.com/?

[DarrelTenter]

I'm not a programmer, but from what I've read video in HTML5 relies on the browser for the playbar. Flash video wraps the video in a "skin" which has a playbar. That whole thing is then placed on the page.

videojs looks interesting. It looks like it's interjecting itself between the video and the browser to provide the player functions. I don't know how that would be inserted into the Captivate project. The code would have to be in the html output <head> and <body>.

[JimAnacore]

It sounds like this is a limitation of this version.

[sd_garrett]

Captivate 6 has an issue inserting the video control onto video elements in html5

currently the workaround is below. Please add the below javascript to the bottom of the file 'scormdriver.js'

an example location on win8 machine is:

C:\Program Files\Adobe\Adobe Captivate 6 x64\Templates\Publish\SCORM\Default\2004\scormdriver.js

//start workaround

jQuery(document).ready(function() {

window.setInterval(function(){

if (jQuery('div#cpDocument').find('video').attr('controls') !== undefined) {

} else {

   jQuery('div#cpDocument').find('video').attr('controls',true);

}

}, 4000);

});

//end workaround

Then all SCORM 2004 packages will have the right controls when exported.

[Guest]

Hi sd_garrett:

I have tried the workaround as you suggested, but it seems still not working for me.

Basically i just copied the code snippet above and pasted it into the end of "scormdriver.js" file, any steps i have missied or have done wrongly?

Also, any idea what kind of element/component Captivate is using for videos playback, is it using HTML5 <video> element for the html5 output?

I think the workaround above won't work if it is not the case.

Thanks and Regards,

Amy

[JimAnacore]

I'm having the same problem. In the simple case of a full screen video slide, how can we force an iPad to use controls?

[sd_garrett]

hi amy_amy2011

this worked for us exporting to a SCORM 2004 zip and importing into Moodle2.4+

The pubish settings we chose are below.

Testing on html5 browser on PC/mac worked as long as there wasnt a object under the video on the master slide. But worked fine on and ipad with or without the background object.

Video control in a Captivate HTML5 page is done with the <video> tag. the javascript is looking for that and telling it to put the 'controls=true' back.

The video tag is difficult to target in a SCORM package as typically you have multiple slides and a video is not always onscreen and targetable. Which is why the javascript runs every 4 seconds to see if a <video> tag exists in the SCORM iframe.

[Guest]

Hi sd_garrett,

Thanks for your reply.

I just gave another go, now i can get the controls working on iPad with your solution, regardless of publishing the project into SCORM package(either SCORM 1.2 or 2004) or just noraml HTML5 outpout with SCORM disabled. However, I still can't manage to get this work on PC with html5 supported browsers, any idea why it is not working on PC? The master slide of my test CP project actually didn't contain any object, it is literally just a white background.

Cheers,

Amy

[RodWard]

When you say you cannot get it to work "on PC" are you launching the content from a web server on your PC, or just from the hard drive?

[Guest]

Hi RodWard,

I tried launching the content from a web server as well as the local hard drive, but neither works. It seems only work for me on iPad device, but not on traditional PC platform, although my browsers on my PC are all HTML5 supported. 

Thanks,

Amy

[DarrelTenter]

Thanks for the workaround. I tried it with one of our video lessons but I'm getting odd and inconsistent behavior. In my test I have a single slide with a multi-slide video that span one slide. No other item are on the slide or the slide master. I publish to html5 with swf turned off. Check out my sample if you like at http://demo.srmi.biz/course/view.php?id=10 Username: student and Password: Password#1

On the iPad the video has a playbar with the play/pause button and a full-screen button. No video scrubber or volume. The full screen button works, but I can do the same think with pinch. The Play/Pause does not pause. If I use the Captivate playbar to pause the slideshow then I can use the video Pause button to start it again.

On Mac and Windows in all browsers I've tested, the playbar appears briefly after the show begins. If I pause the slideshow the full playbar appears with all functions (play/pause, scrubber, volume, full screen), but none of them work. Clicking any of them simply starts the slideshow again and the playbar goes away.

I've given up on IE10. We have to use compatibility mode to even view SCOs and if we do that then other functionality is lost.

If I publish wihtout the Cp skin playbar I have no controls at all.

Thanks,

Darrel

[Itzelm]

Not sure if this will help. But we abandond Captivate 6 because of the playbar issue. We publish our html 5 content using another tool which provides the playbar for the mp4 videos. HOWEVER, ONE BIG ISSUE we have found, and which sounds very similar to what you describe, is inconsistencies with the video and audio in the lessons. We've had situations where the playbar does not stop the video. We could not figure out the issue and now we suspect that the problems are perhaps due to a memory problem and limitations in the mobile browser. We concluded it is a memory issue becasue the problem would happen when we had lessons with several videos and/or audio.

[sd_garrett]

Hello DarrelTenter

had a brief look and the video has no <video> tag in the html5 frame source. so the javasript work around has nothing to target.

can you try placing the video as

General:
Progressive Download with clearSkin 260

Timing:

  Specific Time

Use the theme skin 'mobile'

see if that makes a difference?

As we were trying to get it to work on an iPad and ie6 we didnt try to debug the html5 only option

[iDoNotBelieveIt]

Very interesting. I have been testing C6 and now C7 to produce a simple presentation with one event video on each slide and a quiz. This is published as SCORM 1.2 with completion set to passing the quiz and completing the slides (using the status flag).

Video works on an iTouch; it is displayed fullscreen in its own window with the standard player controls. However on an iPad there are none, and the playback is erratic. I do not understand why it is OK on an iTouch but not iPad.

I have tried the modification to the "scormdriver.js" file (for SCORM 1.2). This worked for the first video but not others, with erratic behaviour.

I have been using another tool which plays the video with the playbar on the iPad but I am keen to use C7 on account of its greater flexibility.

The problem for me is that without this working on an iPad the HTML5 output is of little use.

[4MEDLMS]

I had success with an alternate implementation of the fix offered above. Unzip the SCORM file and find the scormdriver.js file--not the template in the Adobe files, as described above. Open the file in Notepad. Add a return and then past in this code:

jQuery(document).ready(function() {

window.setInterval(function(){

if (jQuery('div#cpDocument').find('video').attr('controls') !== undefined) {

} else {

   jQuery('div#cpDocument').find('video').attr('controls',true);

}

}, 4000);

});

Save the file. Rezip the SCORM. I have SCORMed about 10 modules this way thus far, and all work as expected on iPad.

On a final note, the unhelpfulness of Adobe on this and other matters does no credit to the company. And I found Rod's sneering response insulting. But don't worry Adobe--your users will fix your bugs.