登錄 / 注冊

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

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

收藏 | 點贊

 

這次小編與大家分享一下,如何對video做一些簡單基本的操作,包括了播放器的播放、暫停,音量的讀取、設置的相關操作。

一、獲取影片總時長

  對video操作進行操作之前,應先給video標簽加個id,便于我們獲取video元素,這樣我們就可以開啟對video的探索之旅。首先要得到的是影片的一些信息,其中一個就是總時長。 

獲取video視頻總時長,要用到video的一個事件loadedmetadata,這個事件的觸發表示元數據(媒體的一些基本信息)已經加載完成,用addEventListener監聽事件

    var video = document.getElementById('video');//獲取video元素

    myVideo.addEventListener("loadedmetadata", function(){

      //要執行的代碼

    });

這時已經監聽了,那么接下來要做的就是獲取總時長,其實就是用到了video的一個屬性:duration

    var video = document.getElementById('video');//獲取video元素

    video.addEventListener("loadedmetadata", function(){

       totalTime = video.duration;//獲取總時長

    });

需要注意的是獲取到的在總時長的單位為秒,顯示的時候可根據需要去轉換。 

二、播放、暫停

  我們經常會需要對video設置播放或者暫停,播放或者暫停用到的video的兩個方法就是play和pause

         //播放

       function play(){

           video.play();

       }

 

       //暫停

       function pause(){

           video.pause();

       }

三、獲取影片的播放時間和設置播放點

  很多時候我們都想知道video視頻播到哪了,這需要監聽一個事件和獲取一個屬性的值,用到的是video的timeupdate事件和currentTime屬性

    //更新播放時間點

   video.addEventListener("timeupdate", function(){

      var currentTime = video.currentTime; //獲取當前播放時間

     console.log(currentTime); //在調試器中打印

 

     // 如果播放時間等于視頻總時間,就暫停播放

     if(currentTime == totalTime){

        pause();

     }

   });

設置播放點,設置播放點用得還是currentTime屬性,currentTime屬性是可讀寫的,要注意的是設置值的單位是秒,如果播放點不是秒為單位那就要進行轉換 

         //設置播放點

       function playBySeconds(num){

           video.currentTime = num;

       }

       playBySeconds(30); // 從30秒開始播放

四、音量的獲取和設置

   獲取音量可以直接用volume屬性,但是在這里還要介紹的是音量改變的觸發事件,方面以后需要自定義UI使用,那就是volumechange事件

     //改變音量

     video.addEventListener("volumechange", function(){

         var videoVolume = video.volume;//獲取當前音量

         console.log(videoVolume);//在調試器中打印

     });

要注意的是音量的范圍值為0~1,一般在UI中都是用百分比,所以需要的時候要進行轉換

音量是可以通過改變屬性來設置的,跟播放的時間點是相似的,只不過音量設置的是volume屬性。

//設置音量

     function setVol(num){

         video.volume = num;

     }

     setVol(0.5);

案例演示:

 

五、一些常用且需要重點關注的video事件

eventiOSAndroid
play只是要播放視頻,響應的是video.play()方法,并不代表已經開始播放和iOS一樣,僅是響應video.play()方法
durationchange會執行一次,一定會獲取到視頻的duration可能會執行多次,只有最后一次才能獲取到真實的duration,前面的duration都是0;但低版本Android可能獲取到的duration是0或1;(本文提到的低版本Android大部分是4.1以下)
canplay可以認為是視頻元素沒有問題,可以運行,沒有更多含義了,基本用不上同iOS
canplaythrough會有明確的緩沖,表示可以流暢播放了;沒有什么用,視頻仍然會卡住,數據可能還沒有開始加載;
playing明確表示播放開始了;依然沒有用,視頻可能并沒有開始播放;
progress有明確的下載,可以獲取到當前的buffer,并且全部下載完畢后不在觸發;不一定有明確的數據下載,并且全部下載完畢后依然繼續觸發;
timeupdate會有明確的進度變化,可以獲取到currentTime;進度不一定變化,currentTime可能總是0,但是第一次有currentTime變化的timeupdate事件一定代表了視頻開始播放了;
erroriOS中會有明確的錯誤拋出;Android中某些瀏覽器會莫名其妙的拋出error;
stalled網絡狀況不佳,導致視頻下載中斷;在沒有play之前,也可能會拋出該事件。

 

六、屬性差異

attributesiOSandroid
poster
封面圖片
支持,但是加載速度明顯比在中要慢;不一定支持(瀏覽器廠商的實現標準不統一);
preload
預加載
iPhone不支持;可能支持;
autoplay
自動播放
iPhone Safari中不支持,但在webview中可能被開啟;iOS開發文檔明確說明蜂窩網絡下不允許autoplay;可能支持;
loop
循環播放
支持可能支持;
controls
控制條
支持,但是需要開始播放了才顯示基本都支持顯示或者不顯示
width和height一定給出明確的屬性設置,且不能為0;如果不設置,僅僅通過CSS樣式去控制視頻大小,可能會導致標簽失效。

 

七、其他怪異bug和不友好表現

iOSandroid
物理位置覆蓋在video區域上的元素,click和touch等事件會失效,比如一個a鏈接如果覆蓋在video上,那么點擊后沒有任何效果。-
iOS8.0+中,單頁面播放視頻超過16個,再播放的視頻全部MediaError解碼異常無法播放。-
iPhone的Safari會彈出一個全屏的播放器來播放視頻,iPad則支持內聯播放。iOS7+ 如果webview(比如微信)開啟了webview.allowsInlineMediaPlayback = YES;,可以通過設置webkit-playsinline屬性支持內聯播放;支持內聯播放,但某些廠商會用自己的播放器劫持原生的視頻播放;
下載視頻時,會先發送一個2字節的請求來獲取視頻元數據(比如時長),然后再不斷的發送分包續傳(206)請求來下載視頻,抓包顯示請求數和請求量至少有一倍的冗余(x2),這個嚴重的bug在iOS8中有明顯的修復,但是分包的206請求仍然會有冗余數據的下載,浪費了流量。比iOS的處理方式好,沒有第一個2字節請求,沒有流量損耗;
-低版本Android(<=4.0.4)中,video如果在有相對和決定定位的層中,可能會導致整個頁面錯位。
-某些瀏覽器廠商會劫持video,用其“自己”的播放器來播放視頻,“破壞”了產品本身的播放體驗,那么只能case by case的解決了。
加載視頻時沒有進度提示,視覺上看不出是播放完了還是卡住了;加載視頻時,大都會顯示一個自帶的loading UI。

  


0 條評論

分享
公眾號
公眾號二維碼

? 2017 志進科技 版權所有 上海志進信息科技有限公司 備案號滬ICP備14017051號-2

欧美性生活大片免费看,中文字幕在线亚洲日韩制服在线,国产高清精品福利私拍国产写真,免费AV片在线观看网址,西西大胆午夜视频无码,性AA片在线观看