HTML5视频播放结束后转到帧

Question

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

现在它可以运作了，但是我希望视频在最后一帧“冻结”以显示我在视频末尾添加的徽标。 它自然适用于除Safari之外的所有浏览器。 如果在视频结束后，我碰巧转到另一个选项卡，然后返回，则Safari浏览器会切换为在视频中显示随机帧作为“海报”，没有明显的原因。

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

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

我曾尝试将其合并到我的页面中，但无法正常工作，我希望有人可以为我指明正确的方向？

维德说：

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

预先感谢您的所有帮助！

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
选择“元素”（或等效项，即第一个选项卡）选项卡
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>

HTML5视频播放结束后转到帧

问题描述

1 个解决方案

解决方案1
3 2017-07-17 17:01:00

演示版

HTML5视频播放结束后转到帧

问题描述

1 个解决方案

解决方案1 3 2017-07-17 17:01:00

演示版

解决方案1
3 2017-07-17 17:01:00