Redirect html5 video after play

Question

У меня есть видео html 5, в котором я удаляю кнопки управления и добавлен код js, чтобы пользователь мог воспроизводить видео при щелчке видео. Мне нужно связать дополнительный скрипт, который будет перенаправлять страницу после воспроизведения видео без перезагрузки страницы. Ниже приведен код js.

function play(){ 
var video = document.getElementById('video'); 
video.addEventListener('click',function(){ 
video.play(); 
},false); 
} 

И вот мой HTML5 видео Код

<video id="video" width="770" height="882" onclick="play();"> 
<source src="video/Motion.mp4" type="video/mp4" /> 
</video> 

Answer 1

<script src="text/javascript"> 
// Do not name the function "play()" 
function playVideo(){ 
    var video = document.getElementById('video'); 
    video.play(); 
    video.addEventListener('ended',function(){ 
     window.location = 'http://www.google.com'; 
    }); 
} 
</script> 
<video controls id="video" width="770" height="882" onclick="playVideo()"> 
    <source src="video/Motion.mp4" type="video/mp4" /> 
</video> 

Вот список медиа-событий, к которым вы можете связать: http://dev.w3.org/html5/spec/Overview.html#mediaevents

Answer 2

Есть ли способ изменить это так он работает с видеороликами, которые автоматически запускаются? Я думал, что src = "text/javascript" вместо type = "text/javascript" был тем, что меня убило, тогда я понял, что получаю несогласованные результаты в нескольких браузерах. Насколько я могу это отслеживать, те, кто правильно интерпретируют автовоспроизведение, не выполняют этот код правильно, потому что технически нет «onclick»; видео просто идет своим весельем самостоятельно, никогда не запуская функцию.

Answer 3

Я нашел это на другом сайте. Это, кажется, работает хорошо ...

<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"> 
    </script> 
    <script type="text/javascript"> 
     $(document).ready(function(){ 
     $("#myVideo").bind('ended', function(){ 
      location.href="http://www.localhost.com"; 
     }); 
     }); 
    </script> 

    <video id="myVideo" width="320" height="240" controls="controls"> 
     <source src="movie.mp4" type="video/mp4" /> 
     <source src="movie.ogg" type="video/ogg" /> 
     Your browser does not support the video tag. 
    </video> 

Answer 4

фрагмент кода Эшли работал для меня, хотя я должен был убедиться, что не следует использовать параметр «петли» в видео-тега, в противном случае это не сработало.

Кроме того, я был в состоянии иметь это автовоспроизведении как вы можете видеть в этом примере:

<video id="thevideo" width="1280" preload="auto" autoplay="autoplay"> 
    <source src="your-video.mp4" type="video/mp4" /> 
    <source src="your-video.ogv" type="video/ogg" /> 
    Your browser does not support the video tag. 
</video> 

Answer 5

Если вы хотите избежать жесткого кодирования URL-адресов в вашем приложении, и вы просто хотите сбросить видео и не обязательно перейти на другую страницу, я нашел это довольно аккуратным.

<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js" /> 
<script type="text/javascript"> 
      $(document).ready(function(){ 
       $("#yourVideoID").bind('ended', function(){ 
        location.reload(false);      
       }); 
      }); 
</script> 

Вам не нужно указать URL-адрес, текущая страница, содержащая видео перезагружается из кэша (если это возможно), так что вы не имеете накладные снова говорить с сервером только Перерисовать видео.

Answer 6

<script> 
     var vid = document.getElementById("myvideo"); 
     vid.onended = function() { 
      window.open("index.html", "_self"); 
     }; 
</script> 
<video controls id="myvideo" width="770" height="882"> 
    <source src="video/Motion.mp4" type="video/mp4"/> 
</video>