HTML5 视频播放结束后跳转到帧答案

【问题标题】：Go to frame after HTML5 video playback endHTML5 视频播放结束后跳转到帧
【发布时间】：2017-07-17 16:40:44
【问题描述】：

我有一个简单的 HTML 页面，我使用 Vide plugin 在其上设置了全屏背景视频（无循环）。

现在效果很好，但是我希望视频在其最后一帧“冻结”以显示我在视频末尾包含的徽标。它自然适用于除 Safari 之外的所有浏览器。如果在视频结束后，我碰巧转到另一个选项卡并返回，Safari 会无缘无故地切换到在视频中显示一个随机帧作为“海报”。

为了避免这种情况，我想我可以添加一个脚本，让视频在结束后转到最后一帧的某个位置，我发现了以下提示：

v.addEventListener("ended", function(){
this.currentTime = 0;
});

我尝试将其合并到我的页面中，但它不起作用，我希望有人能够指出我正确的方向？

Vide 是这样说的：

// Get instance of the plugin
var instance = $('#yourElement').data('vide');

// Get video element of the background. Do what you want.
instance.getVideoObject();

我想出了这个：

HTML

<div id="video" data-vide-bg="video/video" data-vide-options="loop: false, muted: true, position: 50% 50%">
</div>

脚本

<script type="text/javascript">
    var video = $('#video').data('vide');

    video.getVideoObject().addEventListener("ended", function() { 
       this.currentTime = 1; 
    });
</script>

提前感谢您的所有帮助！

【问题讨论】：

标签： javascript jquery html video safari

【解决方案1】：

在ended 事件中获取视频的.duration
接下来将.currentTime 设置为.duration
然后.pause()

为了从 Vide 插件中获取真正的视频标签，请替换：

var vid1 = document.getElementById('vid1')

与：

var vid1 = document.querySelector('video');

在演示中。这样做应该可以直接控制视频除非插件使用<iframe> 或根本不使用<video> 标签。要在播放视频时进行验证，请执行以下操作：

Chrome、Firefox、IE 和 Edge F12 或 Safari ⌘ 命令+⌥ 选项+c
选择“元素”（或等效的，即第一个选项卡）选项卡
ctrl+F或⌘命令+F
通过查找插件 id 挂钩来搜索 <video> 标签。（即使用插件的元素的 id。）
插件挂钩的元素中应该有一个<video>标签、一个<iframe>或者<object>。
如果是<video>，那么其他 2 个标签不太可能（尤其是 <iframe>，因为这是背景视频。）

演示

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <style>

  </style>
</head>

<body>
  <video id="vid1" class="vid" src="http://html5demos.com/assets/dizzy.mp4" controls></video>
  <script>
    var vid1 = document.getElementById('vid1');
    vid1.addEventListener('ended', captureFrame);

    function captureFrame(e) {
      var lastFrame = this.duration;
      this.currentTime = lastFrame;
      this.pause();
    }
  </script>
</body>

</html>

【讨论】：

嗨@zer00ne，感谢您抽出宝贵时间帮助我！我检查了一下，插件确实使用了
这是一条奇怪的错误消息...<video> 标记在<iframe> 中吗？如果您不习惯使用控制台进行调试，很容易看不到它。在<iframe（逐字）上进行搜索，如果有的话，打开它们看看是否有任何一个指向<video> 标签。如果您确实找到了<video> 标记，则需要考虑一些额外的代码和某些事项。先生，我会等待您的回复。
@Meditor 我需要知道的另一件事是您将代码放在页面的什么位置。它应该在</body>结束标记之前，也应该是JS的最后一行。