“小白乌奇，你仔細(xì)想一想網(wǎng)頁(yè)上的視頻什么情況下需要使用javascript進(jìn)行操作试伙？”
“我把video的標(biāo)簽屬性看了一下既绕，感覺標(biāo)簽的屬性已經(jīng)可以實(shí)現(xiàn)所有功能了壹甥，autoplay屬性可以讓視頻自動(dòng)播放救巷、controls屬性可以給視頻增加播放控件、loop屬性能讓視頻循環(huán)播放、preload屬性可以實(shí)現(xiàn)預(yù)加載，功能已經(jīng)很完善了郑原，還需要javascript控制么雏搂？”
老朱說(shuō)：“當(dāng)然需要了，video標(biāo)簽自帶的屬性只是實(shí)現(xiàn)了視頻的播放控制功能鬓梅。假如一個(gè)頁(yè)面有幾個(gè)產(chǎn)品展示的視頻，最好的展現(xiàn)效果就是視頻自動(dòng)播放給用戶看，可是一個(gè)頁(yè)面有好幾個(gè)視頻叹俏，通過標(biāo)簽只能設(shè)定一個(gè)視頻自動(dòng)播放，都設(shè)置自動(dòng)播放的話頁(yè)面就亂套了僻族，這種情況下最好的解決辦法就是用戶滾動(dòng)頁(yè)面的時(shí)候粘驰，根據(jù)用戶的瀏覽位置用javascript對(duì)視頻進(jìn)行自動(dòng)播放屡谐。”
“哦蝌数！我明白了愕掏，有一些網(wǎng)站就是這么做的！可是怎么判斷用戶當(dāng)前滾動(dòng)的位置呢籽前？”
“這個(gè)問題看似簡(jiǎn)單亭珍，其實(shí)還是很復(fù)雜的，我們除了需要獲取用戶當(dāng)前滾動(dòng)頁(yè)面距離頂部的距離枝哄，還需要獲取當(dāng)前窗口的高度肄梨，每個(gè)視頻距離文檔頂部的距離，獲取到這幾數(shù)據(jù)才能做處理挠锥≈谙郏”
小白想了想，說(shuō)道：“哦蓖租！我明白了粱侣，稍等我先查一下獲取這幾個(gè)距離的方法！”
過了一會(huì)小白跟老朱說(shuō)道：“我在頁(yè)面里放了兩個(gè)視頻他們之間有一定的距離蓖宦，現(xiàn)在我已經(jīng)能拿到這幾個(gè)數(shù)據(jù)了齐婴。你看一下代碼吧！”
老朱看了一下說(shuō)：“不錯(cuò)稠茂，你覺得視頻在什么位置適合播放柠偶，什么位置不適合播放，可以自己先試著計(jì)算一下睬关。如果一屏不同時(shí)出現(xiàn)兩個(gè)視頻诱担，我們一般選擇視頻上部完全進(jìn)入窗口，和視頻下部剛剛移出窗口兩個(gè)邊界作為播放視頻的區(qū)域电爹！”
沒過多長(zhǎng)時(shí)間小白就算出了結(jié)果：$("#video1").offset().top-$(document).scrollTop()>0就可以看作視頻頂部完全進(jìn)入屏幕蔫仙，window.innerHeight-(topnum1+$("#video1").height())>0可以看作視頻下部沒有移出屏幕，所以我使用了一下jquery的scroll（窗口滾動(dòng)事件）丐箩，在頁(yè)面滾動(dòng)過程中進(jìn)行實(shí)時(shí)判斷：
“干的不錯(cuò)摇邦，不過兩個(gè)視頻處理方面代碼有些重復(fù)了，還需要精簡(jiǎn)雏蛮，好了現(xiàn)在把兩個(gè)video的div中根據(jù)昨天講的video標(biāo)簽嵌入視頻吧涎嚼！嵌入以后通過jQuery獲取到視頻標(biāo)簽對(duì)象，使用play方法和pause方法就可以讓視頻播放和停止了挑秉》ㄌ荩”
“好嘞！我已經(jīng)知道怎么做了！”
“小白立哑！很好夜惭，現(xiàn)在我們只是初步實(shí)現(xiàn)了滾動(dòng)頁(yè)面控制視頻播放與停止，如果以后碰到類似項(xiàng)目還是要根據(jù)需求進(jìn)行調(diào)整铛绰，這就看你對(duì)video功能處理的熟悉程度了诈茧，再多練習(xí)練習(xí)吧！”
老朱又說(shuō)道：“另外思考一個(gè)問題捂掰，假如頁(yè)面中只有一個(gè)視頻敢会，當(dāng)用戶瀏覽網(wǎng)頁(yè)的時(shí)候由于滾動(dòng)頁(yè)面視頻移出窗口，怎么做一個(gè)右下角漂浮的視頻繼續(xù)播放这嚣？根據(jù)前面你學(xué)到的知識(shí)已經(jīng)完全可以實(shí)現(xiàn)了鸥昏，試試看吧！”
想學(xué)H5的朋友可以關(guān)注老爐姐帚，您的關(guān)注是我持續(xù)更新《小白HTML5成長(zhǎng)之路》的動(dòng)力吏垮！
