javascript - HTML5视频播放结束后转至帧

标签 javascript jquery html video safari

我有一个简单的 HTML 页面,我使用 Vide plugin 设置了全屏背景视频(无循环)。 .

现在效果很好,但是我希望视频“卡住”在最后一帧,以显示我在视频末尾包含的 Logo 。 在除 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>

预先感谢您的所有帮助!

最佳答案

  1. 关于ended事件获取.duration视频的内容
  2. 下一组 .currentTime.duration
  3. 然后.pause()

为了从Vide插件中获取真实的视频标签,请替换:

var vid1 = document.getElementById('vid1')

与:

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

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

  1. Chrome、Firefox、IE 和 Edge F12 或 Safari ⌘ 命令+⌥ 选项+c

  2. 选择“元素”(或等效选项,即第一个选项卡)选项卡

  3. ctrl+F⌘ 命令+F

  4. 搜索 <video>通过查找插件 id Hook 来标记。 (即使用该插件的元素的 id。)

  5. 应该有一个 <video>标签,一个<iframe> ,或者也许<object>在插件 Hook 的该元素内。

  6. 如果是<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>

关于javascript - HTML5视频播放结束后转至帧,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45149477/

相关文章:

html - 使用变换 : origin to center an element

javascript - 将 img url 调用到移动设备时如何修复像素缺陷?

javascript - Cordova 2.9、3.0 没有 console.log

javascript - AJAX 响应 - XmlHttp.responseXML 被切断

jquery - 使用 Laravel 5 和 Bootstrap Editable 进行内联编辑 : 405 Method Not Allowed

html - 对齐彼此相邻的图像

javascript - 如何检查所选文件是目录还是常规文件?

javascript - 从 Ajax JQuery 获取返回字符串的值

javascript - 使用 JS 滚动时固定表头

html - 在 Safari iOS 上滚动时背景覆盖被裁剪