播放后重定向html5视频

Posted 2023-05-07

【中文标题】播放后重定向html5视频

【英文标题】：Redirect html5 video after play

【发布时间】：2012-05-12 09:11:50

【问题描述】：

我有一个 html 5 视频，我删除了控制按钮并添加了一个 js 代码，以便用户在单击视频时播放视频。我需要做的是绑定一个额外的脚本，该脚本将在视频播放后重定向页面而无需重新加载页面。下面是我的js代码。

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

这是我的 HTML5 视频代码

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

【参考方案1】：

<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"   onclick="playVideo()">
    <source src="video/Motion.mp4" type="video/mp4" />
</video>

这里是您可以绑定的媒体事件列表：http://dev.w3.org/html5/spec/Overview.html#mediaevents

【讨论】：

感谢 AlienWebGuy。现在就试试。也感谢您的链接

对不起 AlienWebguy，它不起作用。视频结束后页面未重定向

我知道发生了什么，您的函数名为 play，但您的 onclick="play()" 正在播放视频而不是调用该函数。刚刚重命名了函数。

嗨外星人它现在可以工作了，我所做的是我将结束事件的脚本分开。非常感谢

【参考方案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"   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>

【参考方案3】：

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

【参考方案4】：

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

【参考方案5】：

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

另外，我可以让它自动播放，正如你在这个例子中看到的那样：

<video id="thevideo"  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>

【参考方案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>

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