Обработка событий HTML5-видео-тегов через браузер - PullRequest
Новая
       0

Обработка событий HTML5-видео-тегов через браузер

1 голос
/ 16 февраля 2011

Следующий код должен воспроизвести видео, а затем перенаправить на другую страницу.Он работает в Safari и в последней версии Chrome (http://www.brigadapictures.com/Home_test.html).

. Я мог бы использовать некоторую помощь, чтобы запустить его в других браузерах. По крайней мере, мне нужно, чтобы он сразу же перенаправлял, если возникнет проблема(вместо отображения пустого черного экрана). 

<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>

Ответы [ 2 ]

3 голосов
/ 16 февраля 2011

В настоящее время поддерживается только видеообъект HTML5 в Google Chrome, Safari (т.е. webkit) и Fx 3.5+ MSDN имеет статью о HTML5 и видео, поэтому IE10, возможно, присоединился к разряду

Для всех других браузеров я бы перенаправил с помощью скрипта, даже не пытаясь показать видео тег

Вот некоторая информация от Adobe о кодеках и о том, как управлять фильмом с помощью JS

Вот очень хороший HTML5 учебник, который я нашел

Они предлагают видео для всех или этот код, который я модифицировал для IE8: 

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

Я создал эту страницу с вашей страницы, но я получаю 206 Частичное содержимое в Firefox.Хром работает отлично.Возможно, процесс обслуживания байтов необходим, или Firefox просто нужен другой файл, как указано здесь с примером страницы здесь 

<!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>
0 голосов
/ 23 февраля 2011

Скрипт для автозапуска видео и перенаправления на другую страницу

Этот скрипт протестирован в Safari, Firefox, Chrome, Opera и Internet Explorer. Он также работает (и автозагрузка) на 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>
...