蘋果官網的效果 網址：https://www.apple.com/homepod/

完成的效果：滾動滾軸播放相同比例時間的視頻，向上滾動倒播視頻。

目前碰到的問題是 只有一下下滾動滾軸才可以完成這個效果，如果一下滾動很長滾動的時間就沒有設置的那么長了。還有就是向上滾動的問題，video現在沒有倒播API，不知道怎么實現。

使用 video.currentTime 可以解決這兩個問題，但是就沒有平滑的播放效果了。求救各位大神~~

下面是我做的的demo和代碼，demo頁面打開控制臺可以看到滾動信息。

DEMO： http://blog.isnomo.com/airpro...

代碼：

// 獲取到 video 元素

var video = document.getElementById("videoPlayer");

// 計算出需要滾動的中距離

var scrollNum = $('#videoPlayer').height() - $(window).height();

var temp,time,preTime = 0;

$(window).scroll(function () {

// 滾軸事件，a = 已經滾動的距離

var a = $(this).scrollTop();

function playVideo(){

// 播放視頻的函數 , temp = 當前滾動距離與總滾動距離的比例. scrollNum /2 為了減少播放距離。

temp = ( scrollNum / 2 ) / a;

// 使用滾動條的相同比例得出每次滾動所需要播放的時間

time = video.duration / temp;

video.play();

// 本次滾動的時間要減去上次滾動的時間

setTimeout( 'video.pause()' , ( time - preTime ) * 1000);

preTime = time;

console.log('本次播放時間：'+time);

}

playVideo();

console.log('滾軸距離：'+ a);

console.log('已播放到的時間：'+ video.currentTime );

});

總結

以上是生活随笔為你收集整理的苹果设置播放html5视频,类似苹果官网,使用滚轴事件控制视频播放的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。