Rediriger la vidéo html5 après lecture

Question

J'ai une vidéo html 5 dont je supprime les boutons de contrôle et ajoute un code js pour que l'utilisateur puisse lire la vidéo lorsque la vidéo est cliquée. Ce que je dois faire est de lier un script supplémentaire qui redirigera la page après la lecture de la vidéo sans rechargement de la page. Voici mon code js.

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

Et voici mon HTML5 Video Code

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

Voici une liste des événements médiatiques auxquels vous pouvez lier: http://dev.w3.org/html5/spec/Overview.html#mediaevents

Answer 2

Est-il possible de modifier cette façon cela fonctionne avec des vidéos qui jouent automatiquement? Je pensais que le src = "texte/javascript" au lieu de type = "texte/javascript" était ce qui me tue, puis je me suis rendu compte que je recevais des résultats incohérents à travers plusieurs navigateurs. Au mieux, je peux le suivre, ceux qui interprètent correctement la lecture automatique n'exécutent pas correctement ce code, car techniquement il n'y a pas de 'onclick'; la vidéo continue tout seul, sans déclencher la fonction.

Answer 3

J'ai trouvé ceci sur un autre site. Il semble bien fonctionner ...

<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

extrait de code Ashley a travaillé pour moi, si je devais assurer de ne pas utiliser le paramètre « boucle » dans la balise vidéo, sinon il ne fonctionne pas.

Aussi, j'ai pu avoir l'exécution automatique, vous pouvez le voir dans cet exemple:

<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

Si vous voulez éviter de coder en dur URL dans votre application, et vous voulez juste pour réinitialiser votre vidéo et pas nécessairement naviguer vers une autre page, j'ai trouvé cela assez soigné.

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

Vous n'avez pas besoin de spécifier une URL à nouveau, la page en cours contenant votre vidéo est rechargé à partir du cache (si possible) si vous n'avez pas la charge de parler au serveur juste pour réafficher la vidéo.

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>