在原生開發中控制HTML5視頻

前言

有人可能會問，在現在各類前端框架和開發工具橫行的年代，還用得上原生開發嗎？做爲一名從業18年的前端講師，我要告訴你們學習原生開發的優勢：

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

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

---

1、video標記對的屬性

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

2、video標記對的方法

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

3、video標記對的事件

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

4、PC端video標記對的問題

一、視頻如何自動播放

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

<video src=「video/01.mp4」 autoplay muted loop></video>

二、視頻的全屏播放

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

HTML代碼以下所示：

<video src=「video/01.mp4」 class=「bgVideo」 autoplay muted loop></video>

CSS代碼以下所示：

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

三、視頻全屏後致使的垂直滾動條問題

有的視頻因爲高度過大，在全屏播放後會在頁面中產生垂直滾動條。若是不想讓頁面產生垂直滾動條，即在一屏中顯示全部內容包括視頻，則能夠按照以下的CSS代碼進行設置。

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

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

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

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

這個問題能夠經過在標記對中添加屬性的方式來解決。

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

因此，HTML代碼以下所示：

<video playsinline webkit-playsinline></video>

二、【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()方法，以避免產生堆棧溢出。

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

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

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文檔中必須設置爲靜音狀態。

四、補充：移動端如何判斷用戶設備是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設備」);
}

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

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

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

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

---

總結

相對來講，視頻效果再原生開發過程當中的狀況仍是比較複雜的，同窗們在接觸這類項目時，應該多積累具體問題的解決方案，這樣才能舉一反三，讓本身變成項目經驗豐富的程序員。