在原生開發中控制HTML5視頻

---

前言

有人可能會問，在如今各種前端框架和開發工具橫行的年代，還用得上原生開發嗎？作爲一名從業18年的前端講師，我要告訴大家學習原生開發的優點：

1. 原生開發有助於同學們從原理上認識前端知識，並在本質上學會它。
2. 原生開發有助於鍛鍊同學們的編程水平，提高大家對前端知識的理解。
3. 正所謂萬變不離其宗，做過項目開發的人們都知道，無論用什麼框架，也是要用到紮實的JavaScript功底的。
4. 以小程序開發爲例，如果用戶要在小程序中添加一個非常長的頁面，有的時候還是需要使用來實現的，這就可能會涉及到原生頁面的製作。

今天我就爲大家講一講在原生開發過程中，標記對遇到的一些問題以及這些問題的解決方案。

---

一、video標記對的屬性

下表中列出了video標記對在開發過程中常用的原生屬性。

屬性	含義	JS取值
src	設置視頻存放的路徑及文件名。	視頻文件的URL地址
controls	設置是否顯示視頻的控制面板。	true、false
autoplay	設置是否自動播放。	true、false
loop	設置是否循環播放。	true、false
muted	設置是否默認靜音播放。	true、false
volume	獲取/設置視頻的音量大小。	0-1
paused	獲取視頻是否處於暫停狀態。	true、false
ended	獲取視頻是否處於播放結束狀態。	true、false
duration	獲取視頻的總播放時長。	以秒爲單位的時間
currentTime	獲取/設置視頻當前播放的時長。	以秒爲單位的時間
playbackRate	獲取/設置視頻的播放速度。	1-正常倍速 2-兩倍倍速 0.5-半倍倍速
poster	設置視頻播放前的封面圖地址。	封面圖的URL地址
width	設置視頻在頁面中顯示的寬度範圍。	數值
height	設置視頻在頁面中顯示的高度範圍。	數值
videoWidth	返回視頻的原始寬度。	數值
videoHeight	返回視頻的原始高度。	數值

二、video標記對的方法

下表中列出了video標記對在開發過程中常用的原生方法。

方法	含義
play()	控制視頻開始播放。
pause()	控制視頻暫停播放。

三、video標記對的事件

下表中列出了video標記對在開發過程中常用的原生事件以及事件的觸發機制。

事件	觸發機制
play	當視頻開始播放時觸發該事件。
pause	當視頻暫停播放時觸發該事件。
ended	當視頻播放結束時觸發該事件。
volumechange	當視頻音量發生變化時觸發該事件。
ratechange	當視頻播放速度發生變化時觸發該事件。
timeupdate	當視頻播放時間發生變化時觸發該事件。
seeking	當改變視頻播放進度時觸發該事件。
seeked	當改變視頻播放進度結束時觸發該事件。

四、PC端video標記對的問題

1、視頻如何自動播放

當前的瀏覽器都已經將視頻的自動播放功能去掉了，也就是說在標記對上使用autoplay屬性也無法實現視頻的自動播放功能。
但是如果爲標記對添加上autoplay屬性的同時設置其靜音播放是可以實現的。

<video src=“video/01.mp4” autoplay muted loop></video>

2、視頻的全屏播放

有的視頻是要在頁面中實現自動全屏播放的，這類視頻往往在頁面一進入時就能夠佔據整個屏幕。目的是顯示酷炫的視頻效果，而不是展示聲音，因此可以靜音自動播放。

HTML代碼如下所示：

<video src=“video/01.mp4” class=“bgVideo” autoplay muted loop></video>

CSS代碼如下所示：

.bgVideo{
   
     
    width:100%;height: 100%;
    min-height: 1080px;
    object-fit: cover;
}

3、視頻全屏後導致的垂直滾動條問題

有的視頻由於高度過大，在全屏播放後會在頁面中產生垂直滾動條。如果不想讓頁面產生垂直滾動條，即在一屏中顯示所有內容包括視頻，則可以按照如下的CSS代碼進行設置。

.bgVideo{
   
     
    position:fixed; 
    z-index:-1000;
}

五、移動端video標記對的問題

1、【IOS】iPhone系列手機中視頻的內聯播放問題

使用IOS系統的設備，視頻在播放時會自動“豎屏全屏”，也就是說在這類設備中單擊視頻播放按鈕，視頻不會在頁面原有的位置中“內聯播放”，而是會出現類似於全屏的模式。即頁面展示爲黑色的背景，但是視頻在手機豎屏的情況下播放。

這個問題可以通過在標記對中添加屬性的方式來解決。

• IOS10及其以上版本的操作系統可以支持playsinline屬性。
• IOS10以下版本的操作系統只能使用-webkit-playsinline屬性。

所以，HTML代碼如下所示：

<video playsinline webkit-playsinline></video>

2、【Android】多個視頻同時播放問題

一個頁面下若有多個視頻，這樣的情況在Andro系統中可能會出現多個視屏同時播放的現象。
該問題的解決原理：在一個視頻的play事件中，將其他所有的視頻都暫停掉。

jQuery代碼如下所示：

$("video").on("play",function(){
   
     
	var reg=/android/i;
	if(reg.test(navigator.userAgent)){
   
     
	   var currentVideo=$(this).get(0);
	   for(var i=0;i<$("video").length;i++){
   
     
	      if($("video").get(i)!==currentVideo){
   
     
		     $("video").get(i).pause();
		  }
	   }
   }
})

注意：在視頻的play事件中不要再調用play()方法，以免產生堆棧溢出。

3、在移動端自定義視頻的控制按鈕

對於不顯示系統原生控制面板的視頻，使用自己製作的元素來控制視頻的播放與暫停。

jQuery代碼如下所示：

$(".control").on("touchstart",function(){
   
     
	var node=$(this).next().get(0);
	if(node.paused){
   
     
		node.play();		
		$(this).find("img").css("display","none");
	}else{
   
     
		node.pause();
		$(this).find("img").css("display","inline");
	}
}).on("touchend",function(){
   
     
	var node=$(this).next().get(0);
	node.muted=false;
})

注意：此時視頻在HTML文檔中必須設置爲靜音狀態。

4、補充：移動端如何判斷用戶設備是IOS設備還是Android設備

使用navigator.userAgent屬性來判斷返回值當中是否帶有特定的字符串。

（1）判定Android設備：

var reg=/android/gi;
if(reg.test(navigator.userAgent)){
   
     
   console.log(“這是Android設備”);
}

（2）判斷IOS設備：

var reg=/(iphone)|(ipad)|(ipod)/gi;
if(reg.test(navigator.userAgent)){
   
     
    console.log(“這是ISO設備”);
}

5、補充：【IOS】爲適配iPhoneX設備製作兩套頁面

由於iPhoneX及其以上的設備高度遠遠大於iPhoneX以下的產品（高度大於812px），因此對於具有全屏背景的頁面需要爲大高度的設備再做一套頁面，或者判斷設備加載不同的背景圖片。

那麼如何判斷IOS設備是否是iPhoneX以上的設備呢？代碼如下所示。

if(screen.height>=812){
   
     
   //iPhoneX系列的大高度設備
   location.href=“indexX.html”;
}

---

總結

相對來說，視頻效果再原生開發過程中的情況還是比較複雜的，同學們在接觸這類項目時，應該多積累具體問題的解決方案，這樣才能觸類旁通，讓自己變成項目經驗豐富的程序員。