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

我在另一个网站上发现了这个。它似乎运作良好......

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

有没有办法修改它，以便它适用于自动播放的视频？我认为src =“text / javascript”而不是type =“text / javascript”就是杀了我的东西，然后我意识到我在几个浏览器中得到了不一致的结果。最好我可以跟踪它，正确解释自动播放的那些没有正确执行这个代码，因为从技术上来说没有'onclick';视频本身就是快乐的，永远不会触发功能。

Answer 4

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

Answer 5

Ashley的代码片段对我有用，但我必须确保不要在视频标签中使用“loop”参数，否则它不起作用。

此外，我能够自动播放，正如您在此示例中所见：

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

如果你想避免在你的应用程序中硬编码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>

您不需要指定网址，包含视频的当前网页会从缓存中重新加载（如果可能），因此您不必再次与服务器通信以重新显示视频。

播放后重定向html5视频

6 个答案: