2

我有一个 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>
4

6 回答 6

13 
<script type="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

于 2012-05-02T20:53:48.800 回答
8

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

    <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>
于 2013-08-06T22:53:55.317 回答
2

有没有办法修改它以使其适用于自动播放的视频？我认为 src="text/javascript" 而不是 type="text/javascript" 是什么让我很生气，然后我意识到我在多个浏览器中得到的结果不一致。尽我所能跟踪它，那些正确解释自动播放的人没有正确执行此代码，因为从技术上讲没有“点击”；视频只是自行进行，从不触发该功能。

于 2012-11-05T14:19:05.483 回答
1 
 <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>
于 2016-11-25T06:39:18.117 回答
0

如果您想避免在应用程序中对 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，包含您的视频的当前页面会从缓存中重新加载（如果可能），因此您无需再次与服务器通信以重新显示视频。

于 2014-11-19T22:53:56.913 回答
0

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

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

<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>
于 2014-11-06T19:12:30.250 回答