我们可以轻松地在桌面上控制视频的播放,可以借助库在移动设备和平板电脑上完成此操作吗?
Codepen示例:https://codepen.io/ollieRogers/pen/lfeLc/
HTML
#set-height
p#time
video(id="v0", tabindex="0", autobuffer preload)
<source type="video/mp4; codecs="avc1.42E01E, mp4"src="https://www.html5rocks.com/tutorials/video/basics/Chrome_ImF.mp4">
</source>
CSS
#set-height
display block
#v0
position fixed
top 0
left 0
width 100%
JS
var frameNumber = 0, // start video at frame 0
// lower numbers = faster playback
playbackConst = 500,
// get page height from video duration
setHeight = document.getElementById("set-height"),
// select video element
vid = document.getElementById('v0');
// var vid = $('#v0')[0]; // jquery option
// dynamically set the page height according to video length
vid.addEventListener('loadedmetadata', function() {
setHeight.style.height = Math.floor(vid.duration) * playbackConst + "px";
});
// Use requestAnimationFrame for smooth playback
function scrollPlay(){
var frameNumber = window.pageYOffset/playbackConst;
vid.currentTime = frameNumber;
window.requestAnimationFrame(scrollPlay);
}
window.requestAnimationFrame(scrollPlay);