Here is a simple implementation. Save this html file as the exact same name as your video (mp4), do not use spaces in either name. Zip them both together and insert as an HTML5 Animation. This is set up for 480p (854 x 480). Resize the animation in Captivate to the video size and turn off scrolling.
For example:
myVideo.html
myVideo.mp4
The line: wp.cp.show("Text_Caption_1"); designates what should happen when the video is done. In this case it shows Text_Caption_1. Showing will only work for HTML5. You could alert something also.
<!doctype html>
<html>
<head>
<meta charset= "utf-8">
<title>Video</title>
<script>
var wp = window.parent;
function loadVideo()
{
var url = decodeURIComponent( window.location.pathname );
var filename = url.substring( url.lastIndexOf( '/' ) + 1 );
var n = filename.lastIndexOf( '.' );
var vid = filename.substr( 0, n ) + '.mp4';
var setSrc = document.getElementById( "myVideo" ).src = vid;
myVid = document.getElementById( 'myVideo' );
myVid.addEventListener( 'ended', videoEnd, false);
}
function videoEnd( e )
{
wp.cp.show("Your text caption prompt");
myVid.removeEventListener( 'ended', videoEnd, false );
}
function clearAll()
{
myVid.removeEventListener( 'ended', videoEnd, false );
wp = null, myVid = null;
}
</script>
</head>
<body style="margin:0 0 0 0" onload="loadVideo();" onUnload="clearAll();">
<video id="myVideo" src="" controls autoplay preload="none" width="854" height="480"></video>
</body>
</html>
12
Replies
AdChoices