Question

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

现在它可以创造奇迹，但是我希望视频在其最后一帧“冻结”以显示我在视频结尾处包含的徽标。除了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

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

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

提前感谢您的帮助！

Answer 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
选择＆＃34;元素＆＃34; （或等效的，即第一个标签）标签
ctrl + F 或⌘命令 + F
通过查找插件ID挂钩来搜索<video>标记。（即使用插件的元素的id。）
插件挂钩的元素中应该有一个<video>标记，<iframe>或<object>。
如果您<video>开始营业，则其他2个标签极不可能（尤其是<iframe>，因为这是一个背景视频。）

演示

＆＃13;

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

＆＃13;

HTML5视频播放结束后转到框架

1 个答案:

演示