Handling HTML5 video-tag events cross browser

Question

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>

I tried to format your code but it seems there is something missing - also see links in http://stackoverflow.com/questions/2925851/html-5-video-onended-event-not-firing — mplungjan, Feb 16 '11 at 08:54
@mplungjan Thanks. Previous post dealt with creating a working code (left arrows are missing on the video tags in this post). I'm now asking how to get it to execute cross platform. Any suggestions? — Mindful, Feb 16 '11 at 08:57
Since it is HTML5, what other browsers would you like it to run on? FF 3.5 is the last one I believe. http://www.deepbluesky.com/blog/-/browser-support-for-css3-and-html5_72/ — mplungjan, Feb 16 '11 at 08:59
What do you think? FireFox and IE for sure. I can't have a blank screen, though, on any browswer--it needs to immediately redirect in these situations. — Mindful, Feb 16 '11 at 09:01

score 3 · Accepted Answer · edited May 23 '17 at 11:49

3

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>

edited May 23 '17 at 11:49

Community

1
1

answered Feb 16 '11 at 09:03

mplungjan

169,008
28
173
236

@mplungjan I put in the two scripts you provided. Sequence runs fine in Safari, but page still freezes in FireFox. – Mindful Feb 16 '11 at 09:22
I do not see function supports_video and I get an error in Fx to that effect. you need to add the top script too - see my update - and how about the rest of the video tag??? My code is just a snippet. You need to fill in the blanks .... – mplungjan Feb 16 '11 at 10:05
Thanks for your efforts and patience mplungjan. I replaced my code with your update. Safari works perfectly. Firefox still will neither load nor redirect. I get a blank (black) page. – Mindful Feb 16 '11 at 11:23
This code needs to go INSIDE the script tags `function supports_video() { return !!document.createElement('video').canPlayType;}` Also I do not see the script I gave you on the page at all. You need to document.write the video AND set the event handler like I posted it – mplungjan Feb 16 '11 at 12:26
Code was placed inside the script tags as outlined above. I couldn't get any browser to work at all with the exception of displaying a page link to the video file. I changed the path names to the video source and got the code to work again in Safari and Chrome with a redirect. FireFox and IE are still in a stalemate--no redirect and no video (unless I click on the video link which leaves me on a completely empty page after playing the video in an enlarged view). I realize this is a tough task, particularly after three versions of code have been developed and tried. A solution is out there. – Mindful Feb 17 '11 at 01:53
I did a view source of the link you gave and the function is STILL not in script tags. Perhaps you are talking about another page? Please read the information at the links I posted. I think FF needs byte serving of your particular file – mplungjan Feb 17 '11 at 07:26
Here is a link for the current test page: http://www.brigadapictures.com/Home_test.html Here is a copy of the code I have placed on the page as a snippet: http://www.brigadapictures.com/code.html If there is some type of range retrieval request involving byte serving, I don't know how to deal with it. My only other thought here is to supply various codecs of the video as per the "Video for Everybody" link you posted above. I don't have the means to create a Flash file, however. I can't get her code to work either. – Mindful Feb 17 '11 at 08:58
Error: supports_video is not defined Source File: http://www.brigadapictures.com//Home_test_files/widget0_markup.html Line: 8 _________________________________________________________ THIS is the part that is wrong. The file in the iframe: !!! – mplungjan Feb 17 '11 at 09:29
Essentially, Firefox, IE, and Opera can't utilize the current (single) source file. Safari and Chrome can. This has been my issue from the beginning. I just don't know how to fix it, and can't find a working solution. – Mindful Feb 17 '11 at 09:54
Ok, but it does not help that you think you change the widget0_markup.html but don't. the code I posted will now run where it runs, redirect on IE8 and fail on Fx only until you serve correct file (Ogg) – mplungjan Feb 17 '11 at 10:39
Here is what I do. The site is made in iWeb. I use a built-in widget that allows me to place your code into a frame as an html snippet. I can control the code that goes into the snippet, but I cannot directly access or change any other code for the page. I have since placed ogv, mp4, and webm files on the server. I also uploaded a code revision to access those new file types for other browsers, but IE, Firefox, and Opera are not sourcing those files for some reason (and your improvement over my initial code of having IE redirect is not working). I also removed the click-on video button. – Mindful Feb 17 '11 at 19:34
Okay, redid all. Safari works. Firefox works. Opera loads and plays--but freezes before the video plays out. Chrome plays and redirects--but the video is distorted. A frame shows up in IE--but nothing else. iPhone and iPad--nothing. In addition to getting these browsers up (we should be close!), I still need to build in the redirect if a browser can't play the video--just as a back up. Found this to be a very helpful site: http://websitehelpers.com/video/html.html Here are the new site and code links: http://www.brigadapictures.com/Home_test_3.html http://www.brigadapictures.com/code_3.html – Mindful Feb 19 '11 at 11:57
By the way, I had to change the .ogv extension to .ogg to work. Strange. – Mindful Feb 19 '11 at 12:01
Very good progress. I cannot look in IE until I am back at work on Monday. – mplungjan Feb 19 '11 at 12:18
Safari, yes. Firefox, yes--but no redirect. Chrome, yes. Opera, yes. IE, no. Can get an iPhone to load (no autoplay) and redirect, but that is using a special .mp4 file. The iPhone .mp4 file will not play on Safari. For some reason, the redirects are taking a few seconds. Here is the new link: http://www.brigadapictures.com/Home_flow.html – Mindful Feb 21 '11 at 10:33
You are not loading the flowplayer JS file - that is the reason for IE not working. PS: Seems you are asking this question on many sites. Do we continue or what? – mplungjan Feb 21 '11 at 10:45
@mplungjan Just got the Firefox to redirect. Two final steps: Get IE going (I'm tracking down your suggestions now); also, any idea on how to source code separate files for Safari and iPhone? This should wrap it up and I'll mark things up as Answered. Thanks for hanging in here. It's been extremely hard trying to piece this together. If there is anything else I can do here besides mark this post as answered, just let me know. – Mindful Feb 21 '11 at 11:25
It is defined in flowplayer.xxxxxxxx.js where xxxxxxxx is the version you are using – mplungjan Feb 21 '11 at 12:22
IE fails on the SECOND script with document.getElementById('myVideo').addEventListener('ended',myHandler,false); You need to remove that line in widget0 – mplungjan Feb 21 '11 at 12:24
I had to add the second script to make Firefox redirect. When I remove the code, IE still does not load video. – Mindful Feb 21 '11 at 12:44
But you must wrap it. IE FAILS on that code. Can't you change your settings in IE to debug on error so you can see it fails? – mplungjan Feb 21 '11 at 12:52
We're up! Thanks for all mplungjan :) I couldn't have done it without you!! – Mindful Feb 21 '11 at 13:06
By the way, is there a way to post the full code for others to use? 585 characters is not enough space. – Mindful Feb 21 '11 at 13:08
You mean in comments? Just post an answer like I did... http://meta.stackexchange.com/questions/13784/please-increase-the-maximum-allowed-length-for-answers – mplungjan Feb 21 '11 at 13:13

Mindful · Answer 2 · 2011-02-23T03:51:39.073

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>

Handling HTML5 video-tag events cross browser

2 Answers2