video的簡單操作及在IOS和Android下的差異

科技 0評論 2017-05-05 14:13:13

收藏 | 點贊

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

暫無評論