Question

我希望通过滚动this website(Apple Macbook)来显示视频的特定帧。设置currentTime属性似乎适用于Firefox和Safari，但是它在Chrome中不起作用。我认为事件类型＆＃34; loadedmetadata＆＃34; Chrome添加事件侦听器是错误的。代码如下。

HTML＆amp; JS

＆＃13;

(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);

＆＃13;

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

＆＃13;

Answer 1

如果你只是给它一个有效的网址，Chrome就可以正常使用，你的代码片段将无效，因为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>

currentTime属性在Chrome中无效

1 个答案: