HTML5视频播放结束后转到帧

Question

I have a simple HTML page on which I've set up a fullscreen background video (no loop) using the Vide plugin . 我有一个简单的HTML页面，使用Vide 插件在该页面上设置了全屏背景视频（无循环）。

Now it works wonders, however I want the video to "freeze" on its last frame to display a logo I've included at the end of the video. 现在它可以运作了，但是我希望视频在最后一帧“冻结”以显示我在视频末尾添加的徽标。 It naturally does in all browsers except for Safari. 它自然适用于除Safari之外的所有浏览器。 If, after the video ends, I happen to go to another tab and come back, safari switches to displaying a random frame in the video as "poster", for no apparent reason. 如果在视频结束后，我碰巧转到另一个选项卡，然后返回，则Safari浏览器会切换为在视频中显示随机帧作为“海报”，没有明显的原因。

To avoid this, I thought I could add a script to make the video go to somewhere in the last frames after it has ended, and I've found the following tip: 为避免这种情况，我想我可以添加一个脚本来使视频在结束后转到最后一帧中的某处，并且发现了以下提示：

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

I've tried incorporating into my page but it's not working and I was hoping someone might be able to point me in the right direction? 我曾尝试将其合并到我的页面中，但无法正常工作，我希望有人可以为我指明正确的方向？

Vide says the following: 维德说：

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

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

And I've come up with this: 我想出了这个：

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

Thank you in advance for all your help! 预先感谢您的所有帮助！

Answer 1

On the ended event get the .duration of the video 在ended事件中，获取视频的.duration
Next set .currentTime to .duration 接下来将.currentTime设置为.duration
Then .pause() 然后.pause()

In order to get the real video tag from the Vide plugin replace: 为了从Vide插件中获取真实的视频标签，请替换：

 var vid1 = document.getElementById('vid1')

with: 有：

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

in the demo. 在演示中。 Doing so should be able to directly control the video unless the plugin uses an <iframe> or doesn't use a <video> tag at all. 除非插件使用<iframe>或根本不使用<video>标签，否则这样做应该能够直接控制视频。 To verify do the following when you play the video: 若要进行验证，请在播放视频时执行以下操作：

Chrome, Firefox, IE, and Edge F12 or Safari ⌘ command + ⌥ option + c Chrome，Firefox，IE和Edge F12或Safari⌘命令 + ⌥选项 + c
Select the "Element" (or equivalent ie first tab) tab 选择“元素”（或等效项，即第一个选项卡）选项卡
ctrl + F or ⌘ command + F Ctrl + F或⌘命令 + F
Search for the <video> tag by finding the plugin id hook. 通过找到插件ID钩子搜索<video>标签。 (ie the id of the element that uses the plugin.) （即使用插件的元素的ID。）
There should be a <video> tag, an <iframe> , or maybe <object> within that element that the plugin hooks into. 插件挂钩的元素中应该有一个<video>标签，一个<iframe>或<object> 。
If it's a <video> you're in business, the other 2 tags are highly unlikely (especially an <iframe> since this is a background video.) 如果您是业务的<video> ，则其他2个标签的可能性很小（尤其是<iframe>因为这是背景视频）。

Demo 演示版

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

Demo 演示版

HTML5视频播放结束后转到帧

问题描述

1 个解决方案

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

Demo 演示版

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