Skip to main content
helpful_face98A7
helpful_face98A7
New Participant
April 25, 2016
Question

Control HTML5 video output in captivate 9?

  • April 25, 2016
  • 1 reply
  • 3172 views

Hello,

I have a project that has a size limit and it's mostly live video. It also will be HTML5 only. The problem we're having is how captivate and adobe media encoder are handling the video encoding.

When you insert a video into the course, it converts it to FLV if it is not already an FLV.

When you publish to HTML5, it converts it back to MP4 using Adobe Media Encoder.

The conversion back is almost tripling the file size into MP$4 because it's defaulting to a HQ conversion.

Is there a way to influence this FLV to MP4 conversion? Or is there a way to make Captivate keep my .mp4 file and not try a conversion?

Thanks in advance for any help.

    This topic has been closed for replies.

    1 reply

    TLCMediaDesign
    TLCMediaDesign
    Inspiring
    April 25, 2016

    I always put my video in an html file and insert as an html5 animation. It's very easy using the video tag. Full screen always works also. We even have coded it so that the CC runs through Captivates CC.

    warmstrong
    warmstrong
    Inspiring
    June 7, 2016

    Do you have a tutorial showing this process. I am intrigued at how you would do this?

    warmstrong
    warmstrong
    Inspiring
    June 7, 2016

    Do you mean the CC interjection? I guess I could write a blog about it. This is the file that I use. You name the file exactly the same name as the video. The html file reads it's own name and loads the video of the same name. Zip them together and insert as an HTML5 animation.

    For example:

    myVideo.html

    myVideo.mp4

    There are event listener for custom Pause/Play button so that the video pause and plays when these button are used in Captivate. It also shows the Next Button 2 seconds before the end of the video.

    The closed caption is put into an array and the end times of each segment are stored in another array.

    <!doctype html>
    <html>
    <head>
    <meta charset= "utf-8">
    <title>Video</title>
    <script>
    var wp = window.parent;
    var myCC = [ ], endTimes = [ ], promptArray = [ ];
    var myVid, myCCDiv;

    /////////////////////////////////////// Add CC text to this array definition /////////////////////////////////////

    myCC[ 0 ] = 'This is the CC text Caption 1.';
    myCC[ 1 ] = 'This is the CC text Caption 2.';
    myCC[ 2 ] = 'This is the CC text Caption 2.';

    //////////////////////////////////////// Add end times to the endTimes array /////////////////////////////////////

    endTimes = [ 20, 30, 40 ];

    /*!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! DO NOT EDIT CODE BELOW !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/

    myCCDiv = wp.document.getElementById( 'ccText' ).getElementsByTagName( 'p' )[ 0 ];

    wp.document.getElementById( 'play_btn' ).addEventListener( 'click', function () { myVid.play(); });
    wp.document.getElementById( 'pause_btn' ).addEventListener( 'click', function () { myVid.pause(); });

    function startVideo()
    {
        var url = decodeURIComponent( window.location.pathname );
    var filename = url.substring( url.lastIndexOf( '/' ) + 1 );
    var n = filename.lastIndexOf( '.' );   
    var vid = filename.substr( 0, n ) + '.mp4';
     
    myVid = document.getElementById( 'myVideo' );
    myVid.src = '';
    myVid.src = vid;
    myVid.addEventListener( 'ended', videoEnd, false);
    myVid.addEventListener( 'timeupdate', function ()
    {  
      if ( myVid.currentTime.toFixed( 0 ) > myVid.duration.toFixed( 0 ) - 2 && wp.window.videoOnly == false )
      {
       wp.cp.show( 'next_btn' );
      }
     
      showCC( );
     
    });

        function showCC( )
    {
      if ( endTimes == 'undefined' || endTimes == null )
      {
       return false
      }
      else
      {  
       for ( var i = 0; i < endTimes.length; i++ )
       {  
        if ( myVid.currentTime.toFixed( 1 ) <= endTimes[ i ] )
        {
         myCCDiv.innerHTML = myCC[ i ];
         break;
        }  
       }
      }
        }
    }

    function videoEnd(e)
    {
    myCCDiv.innerHTML = myCC[ 0 ];
    wp.cpCmndCC = 0;
    myVid.removeEventListener( 'ended', videoEnd, false );
    }

    function clearAll()
    {
    myCCDiv.innerHTML = '';
    wp.cpCmndCC = 0;
    myVid.removeEventListener( 'ended', videoEnd, false );

    wp.document.getElementById( 'play_btn' ).removeEventListener( 'click', function () { myVid.play(); });
    wp.document.getElementById( 'pause_btn' ).removeEventListener( 'click', function () { myVid.pause(); });

    myVid.src = ''; 
    wp = null, myCC = null, endTimes = null, promptArray = null, myCCDiv = null;
    }

    </script>
    </head>

    <body style='margin:0 0 0 0' onload='startVideo();' onUnload='clearAll();'>
    <video id='myVideo' src='' controls autoplay preload='none' width='854' height='480'></video>
    </body>
    </html>


    Thank you. If you do write a blog about it would you include some images of the process. I am fairly new to this so greatly appreciate your willingness to help. I would love to see how you put the video into an html file (sorry am more a visual learner) through inserting it all into the project.

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices