CODEWITHSUNDEEP
javascripthtmlcross-browserdom-events
Mindful
Mindful

Reputation: 23

Handling HTML5 video-tag events cross browser

The following code should play a video then redirect to another page. It works in Safari and the latest version of Chrome (http://www.brigadapictures.com/Home_test.html).

I could use some help in getting it to execute on other browsers. At the very least, I need it to immediately redirect if it encounters a problem (instead of displaying a blank black screen).

<video src="http://brigadapictures.com/images/image1.mov"; id="myVideo" autoplay height="434" width="770">
</video>

<script type='text/javascript'>
document.getElementById('myVideo').addEventListener('ended', myHandler, false); 
function myHandler(e) { 
    if (!e) {
        e = window.event;
    } 
    top.location.href = "http://www.brigadapictures.com/Home.html"; 
}
</script>

Upvotes: 1

Views: 6436

Answers (2)

mplungjan
mplungjan

Reputation: 177692

Currently there is only support for the HTML5 video object in Google Chrome, Safari (i.e. webkit) and Fx 3.5+ MSDN does have an article on HTML5 and video so IE10 may have joined the ranks

For all other browsers I would redirect using script before even trying to show the video tag

Here is some info from Adobe about codecs and how to control the movie with JS

Here is a very good HTML5 tutorial I found

They suggest video for everybody or this code which I modified for IE8:

function supports_video() {
  return !!document.createElement('video').canPlayType;
}

I created this page from your page, but I am getting 206 Partial content in Firefox. Chrome works perfectly. Perhaps a byte serving process is needed or Firefox just need another file as specified here with the example page here

<!DOCTYPE html>
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>HTML5 video page</title>

<script type="text/javascript">
function supports_video() { // test the availability of video support
  var v = document.createElement('video');
  return v && v.canPlayType;
}
function goHome() {
  top.location.replace("http://www.brigadapictures.com/Home.html"); // do not want to break the back button
}
window.onload=function() {
  if (supports_video) {
    var video = document.getElementById('myVideo'); // not sure how IE8 gets to this line, but it does
    if (video && video.addEventListener) video.addEventListener('ended', goHome, false);
    else goHome(); // IE8 peculiarity.
  }
}
</script>


</head>
<body>
<script type="text/javascript">
if (supports_video) {
  document.write('Here <a href="image1.mov" target="_blank">this video</a> is supposed to appear:<br /><video src="image1.mov" id="myVideo" autoplay="true" height="434" width="770">Video not supported anyway</video>');
}
else {
  alert('Sorry, this browser does not support HTML5 video, redirecting...')
  goHome();
}
</script>
</body>
</html>

Upvotes: 3

Mindful
Mindful

Reputation: 23

Script to Autoplay a Video then Redirect to Another Page

This script is tested on Safari, Firefox, Chrome, Opera, and Internet Explorer. It also works (and autoloads) on iPhone.

<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title></title>
<script type="text/javascript" src="http://brigadapictures.com/images/flowplayer-3.2.6.min.js">
</script>
</head>

<body>
<video width="488" height="488" autoplay id="myVideo">
<source src='http://brigadapictures.com/images/image2.mp4' type='video/mp4' />
<source src='http://brigadapictures.com/images/image1.mp4' type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
<source src='http://brigadapictures.com/images/image1.ogg' type='video/ogg; codecs="theora, vorbis"' />
<source src='http://brigadapictures.com/images/image1.webm' type='video/webm; codecs="vp8, vorbis"' />

<!-- Flowplayer as fallback for html5 video tag into the following container -->
<div id="flashfallback" style="width:488px;height:488px;display:block"></div>
</video>


<script type="text/javascript">
//<![CDATA[
var videotag = document.getElementById("myVideo"),
videosupport = !!videotag.canPlayType;

 function myHandler(e) {
   if(!e) { e = window.event; }
   top.location.replace("http://www.brigadapictures.com/Home.html");
 }
 if (videotag.addEventListener) {
   videotag.addEventListener('ended', myHandler, false);
 }

 if (videosupport) {
   videotag.load();
   videotag.play();
 } else {
   $f("flashfallback", "http://brigadapictures.com/images/flowplayer-3.2.6.swf", {
     clip: {
       url: "http://brigadapictures.com/images/image4.m4v",
       onStart: function () {
         this.setVolume(100);
       },
       onFinish: function () {
        top.location.replace("http://www.brigadapictures.com/Home.html");
       }
    },
     canvas: {backgroundGradient: "none"},
    play: null,
     plugins: {controls: null}
  });
}
//]]>
</script>
</body>
</html>

Upvotes: 0

Related Questions