当前时间属性在Chrome中不起作用
[英]The currentTime property not working in Chrome
问题描述
I want to show a specific frame of a video by scrolling like this website(Apple Macbook) . 
我想通过像本网站（Apple Macbook）一样滚动来显示视频的特定帧。 Setting the currentTime property seems to work in Firefox and Safari, however, it does not work in Chrome. 设置currentTime属性似乎可以在Firefox和Safari中使用，但是，不能在Chrome中使用。 I think the event type "loadedmetadata" is wrong for Chrome to add the event listener. 我认为事件类型“ loadedmetadata”对于Chrome添加事件侦听器是错误的。 The code is below. 代码如下。
HTML & JS 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>
1 个解决方案
解决方案1
1 已采纳 2015-05-25 03:31:04
Works fine for me on Chrome if you just give it a valid url, your snippet won't work because test.mp4 does not exist. 如果您只给我一个有效的网址，那么在Chrome上对我来说效果很好，因为test.mp4不存在，您的代码段将无法工作。 Here is a jsfiddle and a snippet: 这是一个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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.