文章目錄
- 前言
- 一、video標記對的屬性
- 二、video標記對的方法
- 三、video標記對的事件
- 四、PC端video標記對的問題
- 1、視頻如何自動播放
- 2、視頻的全屏播放
- 3、視頻全屏后導致的垂直滾動條問題
- 五、移動端video標記對的問題
- 1、【IOS】iPhone系列手機中視頻的行內播放問題
- 2、【Android】多個視頻同時播放問題
- 3、在移動端自定義視頻的控制按鈕
- 4、補充：移動端如何判斷用戶設備是IOS設備還是Android設備
- 5、補充：【IOS】為適配iPhoneX設備制作兩套頁面
- 總結
前言
有人可能會問，在如今各種前端框架和開發工具橫行的年代，還用得上原生開發嗎？作為一名從業18年的前端講師，我要告訴大家學習原生開發的優點：
- 原生開發有助于同學們從原理上認識前端知識，并在本質上學會它，
- 原生開發有助于鍛煉同學們的編程水平，提高大家對前端知識的理解，
- 正所謂萬變不離其宗，做過專案開發的人們都知道，無論用什么框架，也是要用到扎實的JavaScript功底的，
- 以小程式開發為例，如果用戶要在小程式中添加一個非常長的頁面，有的時候還是需要使用來實作的，這就可能會涉及到原生頁面的制作，
今天我就為大家講一講在原生開發程序中，標記對遇到的一些問題以及這些問題的解決方案，
一、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”;
}
總結
相對來說，視頻效果再原生開發程序中的情況還是比較復雜的，同學們在接觸這類專案時，應該多積累具體問題的解決方案，這樣才能觸類旁通，讓自己變成專案經驗豐富的程式員，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/229876.html
標籤：其他