当前时间属性在 Chrome 不工作

Question

我想像this website(Apple Macbook)一样滚动显示视频的特定帧。设置当前时间属性似乎在 Firefox 和 Safari 中有效，但在 Chrome 中无效。我认为事件类型 "loadedmetadata" 是错误的 Chrome 添加事件监听器。代码如下。

HTML & JS

(function(document) {
  var video;
  $(function() {
    init();
  });

  function init() {
    video = document.getElementById('myVideo');
    video.addEventListener('loadedmetadata', function() {
      setClick();
      setScroll();
    });
  }

  function setClick() {
    $('#myButton').on('click', function() {
      video.currentTime = 2;
    });
  }

  function setScroll() {
    $(window).on('scroll', setFrame);
  }

  function setFrame() {
    var pos = $(window).scrollTop();
    console.log(pos);
    video.currentTime = pos/5;
  }

})(document);

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>funny thing</title>
  <link rel="stylesheet" href="main.css">
  <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
  <script src="main.js"></script>
</head>
<body>
  <button id="myButton">i am button</button>
  <video id="myVideo" controls height="800" preload="metadata">
    <source src="test.mp4" type='video/mp4; codecs="avc1.4D401E, mp4a.40.2"'>
  </video>

</body>
</html>

Answer 1

我在 Chrome 上工作正常，如果你只是给它一个有效的 url，你的代码片段将无法工作，因为 test.mp4 不存在。这是一个 jsfiddle 和一个片段：

(function(document) {
  var video;
  $(function() {
    init();
  });

  function init() {
    video = document.getElementById('myVideo');
    video.addEventListener('loadedmetadata', function() {
      setClick();
      setScroll();
    });
  }

  function setClick() {
    $('#myButton').on('click', function() {
      video.currentTime = 2;
    });
  }

  function setScroll() {
    $(window).on('scroll', setFrame);
  }

  function setFrame() {
    var pos = $(window).scrollTop();
    console.log(pos);
    video.currentTime = pos/5;
  }

})(document);

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>funny thing</title>
  <link rel="stylesheet" href="main.css">
  <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
  <script src="main.js"></script>
</head>
<body>
  <button id="myButton">i am button</button>
  <video id="myVideo" controls height="200" preload="metadata">
    <source src="http://techslides.com/demos/sample-videos/small.mp4" type='video/mp4; codecs="avc1.4D401E, mp4a.40.2"'>
  </video>

</body>
</html>

当前时间属性在 Chrome 不工作

The currentTime property not working in Chrome

javascript

html5-video

当前时间 属性 在 Chrome 不工作

The currentTime property not working in Chrome

javascript

html5-video

当前时间属性在 Chrome 不工作