在手机和平​​板电脑上滚动控制视频播放

时间:2018-08-08 03:31:38

标签: javascript android ios video scroll

我们可以轻松地在桌面上控制视频的播放,可以借助库在移动设备和平板电脑上完成此操作吗?

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

0 个答案:

没有答案