video的簡(jiǎn)單操作及在IOS和Android下的差異

科技 0評(píng)論 2017-05-05 14:13:13

收藏 | 點(diǎn)贊

  
這次小編與大家分享一下，如何對(duì)video做一些簡(jiǎn)單基本的操作，包括了播放器的播放、暫停，音量的讀取、設(shè)置的相關(guān)操作。
一、獲取影片總時(shí)長(zhǎng)
  對(duì)video操作進(jìn)行操作之前，應(yīng)先給video標(biāo)簽加個(gè)id，便于我們獲取video元素，這樣我們就可以開(kāi)啟對(duì)video的探索之旅。首先要得到的是影片的一些信息，其中一個(gè)就是總時(shí)長(zhǎng)。 
獲取video視頻總時(shí)長(zhǎng)，要用到video的一個(gè)事件loadedmetadata，這個(gè)事件的觸發(fā)表示元數(shù)據(jù)（媒體的一些基本信息）已經(jīng)加載完成，用addEventListener監(jiān)聽(tīng)事件
    var video = document.getElementById('video');//獲取video元素
    myVideo.addEventListener("loadedmetadata", function(){
      //要執(zhí)行的代碼
    });
這時(shí)已經(jīng)監(jiān)聽(tīng)了，那么接下來(lái)要做的就是獲取總時(shí)長(zhǎng)，其實(shí)就是用到了video的一個(gè)屬性：duration
    var video = document.getElementById('video');//獲取video元素
    video.addEventListener("loadedmetadata", function(){
       totalTime = video.duration;//獲取總時(shí)長(zhǎng)
    });
需要注意的是獲取到的在總時(shí)長(zhǎng)的單位為秒，顯示的時(shí)候可根據(jù)需要去轉(zhuǎn)換。 
二、播放、暫停
  我們經(jīng)常會(huì)需要對(duì)video設(shè)置播放或者暫停，播放或者暫停用到的video的兩個(gè)方法就是play和pause
         //播放
       function play(){
           video.play();
       }
 
       //暫停
       function pause(){
           video.pause();
       }
三、獲取影片的播放時(shí)間和設(shè)置播放點(diǎn)
  很多時(shí)候我們都想知道video視頻播到哪了，這需要監(jiān)聽(tīng)一個(gè)事件和獲取一個(gè)屬性的值，用到的是video的timeupdate事件和currentTime屬性
    //更新播放時(shí)間點(diǎn)
   video.addEventListener("timeupdate", function(){
      var currentTime = video.currentTime; //獲取當(dāng)前播放時(shí)間
     console.log(currentTime); //在調(diào)試器中打印
 
     // 如果播放時(shí)間等于視頻總時(shí)間，就暫停播放
     if(currentTime == totalTime){
        pause();
     }
   });
設(shè)置播放點(diǎn)，設(shè)置播放點(diǎn)用得還是currentTime屬性，currentTime屬性是可讀寫(xiě)的，要注意的是設(shè)置值的單位是秒，如果播放點(diǎn)不是秒為單位那就要進(jìn)行轉(zhuǎn)換 
         //設(shè)置播放點(diǎn)
       function playBySeconds(num){
           video.currentTime = num;
       }
       playBySeconds(30); // 從30秒開(kāi)始播放
四、音量的獲取和設(shè)置
   獲取音量可以直接用volume屬性，但是在這里還要介紹的是音量改變的觸發(fā)事件，方面以后需要自定義UI使用，那就是volumechange事件
     //改變音量
     video.addEventListener("volumechange", function(){
         var videoVolume = video.volume;//獲取當(dāng)前音量
         console.log(videoVolume);//在調(diào)試器中打印
     });
要注意的是音量的范圍值為0~1，一般在UI中都是用百分比，所以需要的時(shí)候要進(jìn)行轉(zhuǎn)換。
音量是可以通過(guò)改變屬性來(lái)設(shè)置的，跟播放的時(shí)間點(diǎn)是相似的，只不過(guò)音量設(shè)置的是volume屬性。
//設(shè)置音量
     function setVol(num){
         video.volume = num;
     }
     setVol(0.5);
案例演示：
 
五、一些常用且需要重點(diǎn)關(guān)注的video事件
event
iOS
Android
play
只是要播放視頻，響應(yīng)的是video.play()方法，并不代表已經(jīng)開(kāi)始播放
和iOS一樣，僅是響應(yīng)video.play()方法
durationchange
會(huì)執(zhí)行一次，一定會(huì)獲取到視頻的duration
可能會(huì)執(zhí)行多次，只有最后一次才能獲取到真實(shí)的duration，前面的duration都是0；但低版本Android可能獲取到的duration是0或1；（本文提到的低版本Android大部分是4.1以下）
canplay
可以認(rèn)為是視頻元素沒(méi)有問(wèn)題，可以運(yùn)行，沒(méi)有更多含義了，基本用不上
同iOS
canplaythrough
會(huì)有明確的緩沖，表示可以流暢播放了；
沒(méi)有什么用，視頻仍然會(huì)卡住，數(shù)據(jù)可能還沒(méi)有開(kāi)始加載；
playing
明確表示播放開(kāi)始了；
依然沒(méi)有用，視頻可能并沒(méi)有開(kāi)始播放；
progress
有明確的下載，可以獲取到當(dāng)前的buffer，并且全部下載完畢后不在觸發(fā)；
不一定有明確的數(shù)據(jù)下載，并且全部下載完畢后依然繼續(xù)觸發(fā)；
timeupdate
會(huì)有明確的進(jìn)度變化，可以獲取到currentTime；
進(jìn)度不一定變化，currentTime可能總是0，但是第一次有currentTime變化的timeupdate事件一定代表了視頻開(kāi)始播放了；
error
iOS中會(huì)有明確的錯(cuò)誤拋出；
Android中某些瀏覽器會(huì)莫名其妙的拋出error；
stalled
網(wǎng)絡(luò)狀況不佳，導(dǎo)致視頻下載中斷；
在沒(méi)有play之前，也可能會(huì)拋出該事件。
 
六、屬性差異
attributes
iOS
android
poster
封面圖片
支持，但是加載速度明顯比在中要慢；
不一定支持（瀏覽器廠(chǎng)商的實(shí)現(xiàn)標(biāo)準(zhǔn)不統(tǒng)一）；
preload
預(yù)加載
iPhone不支持；
可能支持；
autoplay
自動(dòng)播放
iPhone Safari中不支持，但在webview中可能被開(kāi)啟；iOS開(kāi)發(fā)文檔明確說(shuō)明蜂窩網(wǎng)絡(luò)下不允許autoplay；
可能支持；
loop
循環(huán)播放
支持
可能支持；
controls
控制條
支持，但是需要開(kāi)始播放了才顯示
基本都支持顯示或者不顯示
width和height
一定給出明確的屬性設(shè)置，且不能為0；
如果不設(shè)置，僅僅通過(guò)CSS樣式去控制視頻大小，可能會(huì)導(dǎo)致標(biāo)簽失效。
 
七、其他怪異bug和不友好表現(xiàn)
iOS
android
物理位置覆蓋在video區(qū)域上的元素，click和touch等事件會(huì)失效，比如一個(gè)a鏈接如果覆蓋在video上，那么點(diǎn)擊后沒(méi)有任何效果。
-
iOS8.0+中，單頁(yè)面播放視頻超過(guò)16個(gè)，再播放的視頻全部MediaError解碼異常無(wú)法播放。
-
iPhone的Safari會(huì)彈出一個(gè)全屏的播放器來(lái)播放視頻，iPad則支持內(nèi)聯(lián)播放。iOS7+ 如果webview（比如微信）開(kāi)啟了webview.allowsInlineMediaPlayback = YES;，可以通過(guò)設(shè)置webkit-playsinline屬性支持內(nèi)聯(lián)播放；
支持內(nèi)聯(lián)播放，但某些廠(chǎng)商會(huì)用自己的播放器劫持原生的視頻播放；
下載視頻時(shí)，會(huì)先發(fā)送一個(gè)2字節(jié)的請(qǐng)求來(lái)獲取視頻元數(shù)據(jù)（比如時(shí)長(zhǎng)），然后再不斷的發(fā)送分包續(xù)傳（206）請(qǐng)求來(lái)下載視頻，抓包顯示請(qǐng)求數(shù)和請(qǐng)求量至少有一倍的冗余（x2），這個(gè)嚴(yán)重的bug在iOS8中有明顯的修復(fù)，但是分包的206請(qǐng)求仍然會(huì)有冗余數(shù)據(jù)的下載，浪費(fèi)了流量。
比iOS的處理方式好，沒(méi)有第一個(gè)2字節(jié)請(qǐng)求，沒(méi)有流量損耗；
-
低版本Android（<=4.0.4）中，video如果在有相對(duì)和決定定位的層中，可能會(huì)導(dǎo)致整個(gè)頁(yè)面錯(cuò)位。
-
某些瀏覽器廠(chǎng)商會(huì)劫持video，用其“自己”的播放器來(lái)播放視頻，“破壞”了產(chǎn)品本身的播放體驗(yàn)，那么只能case by case的解決了。
加載視頻時(shí)沒(méi)有進(jìn)度提示，視覺(jué)上看不出是播放完了還是卡住了；
加載視頻時(shí)，大都會(huì)顯示一個(gè)自帶的loading UI。
  

暫無(wú)評(píng)論