H5直播Video標籤坑彙總

video 標籤 詳解

<video 
    class="video-source"
    width="100%"
    height="240px"  /*若是有封面，請設置高度*/
    preload="auto" /*這個屬性規定頁面加載完成後載入視頻*/ 
    controls /* 顯示播放器控件 */ 
    style="object-fit:cover/fill"
    playsinline="true"  /*IOS微信瀏覽器支持小窗內播放*/ 
    webkit-playsinline="true"  /*這個屬性是ios 10中設置可讓視頻在小窗內播放，也就是否是全屏播放*/  
    x5-video-player-type="h5-page" /*啓用X5內核同層渲染*/
    x5-video-orientation="h5" /*播放器支付的方向，landscape橫屏，portraint豎屏，默認值爲豎屏*/
    x5-video-player-fullscreen="true" /*全屏設置，設置爲 true 是防止橫屏*/
    /* x5-playsinline="true" */  /*設置X5內核爲行內播放模式，不能和`x5-video-player-type同時設置會覆蓋*/
    x-webkit-airplay="true"  /*未知*/
    x5-video-ignore-metadata="true" /*未知*/
</video>

複製代碼

preload="auto"

屬性規定在頁面加載後載入視頻。若是設置了 autoplay 屬性，則忽略該屬性。

通常參數可能的值：

• auto - 當頁面加載後載入整個視頻

• meta - 當頁面加載後只載入元數據

• none - 當頁面加載後不載入視頻

muted

當設置該屬性後爲靜音播放

坑：當爲多路直播（即多個video同時播放的時候），IOS上表現只能播放1個video，其餘沒法播放

解決方法：IOS系統下，默認video靜音播放，等video播放後，設置爲非靜音

監聽 video 的 play 事件

handleOnPlay = e => {
    // ios 須要靜音才能 同時 播放多個video ，默認靜音播放，在3s 後關閉靜音
    if (iphone) {
      setTimeout(() => {
        const videoElement = this.videoRef.current
        videoElement && (videoElement.muted = false)
      }, 3000)
    }
  }
複製代碼

controls="controls"

屬性規定瀏覽器應該爲視頻提供播放控件

autoplay="autoplay"

視頻自動播放設置

坑：不論安卓IOS在手機上都不能自動播放，須要經過點擊事件等觸發控制播放

webkit-playsinline playsinline

視頻播放時局域播放，不脫離文檔流 。可是這個屬性比較特別， 須要嵌入網頁的APP好比WeChat中UIwebview 的allowsInlineMediaPlayback = YES webview.allowsInlineMediaPlayback = YES，才能生效。換句話說，若是APP不設置，你頁面中加了這標籤也無效，這也就是爲何安卓手機WeChat 播放視頻老是全屏，由於APP不支持playsinline，而IOS的WeChat卻支持。

這裏就要補充下，若是是想作全屏直播或者全屏H5體驗的用戶，IOS須要設置刪除 webkit-playsinline 標籤，由於你設置 false 是不支持的 ，安卓則不須要，由於默認全屏。但這時候全屏是有播放控件的，不管你有沒有設置control。 作直播的可能用得着播放控件，可是全屏H5是不須要的，那麼去除全屏播放時候的控件，須要如下設置：同層播放。

x5-video-player-type="h5-page"

啓用同層H5播放器，就是在視頻全屏的時候，div能夠呈如今視頻層上，也是WeChat安卓版特有的屬性

官方文檔：H5同層播放器接入規範

坑：不一樣版本的X5內核video標籤的展現形式可能有差別，例如(video標籤上有全屏按鈕)

解決方法：掃碼更新X5內核

x5-video-orientation

聲明播放器支持的方向，可選值landscape 橫屏, portraint豎屏。默認值portraint。不管是直播仍是全屏H5通常都是豎屏播放，可是這個屬性須要x5-video-player-type開啓H5模式

其餘坑

• IOS只能支持m3u8的流，直接放入 video 的 src
• Android可支持flv、m3u8的流、須要(flv.js/hls.js)轉換,而且注意流地址和 須要和網頁地址保持一致(例如 http =>http,https=>https)

移動端調試

移動端不少狀況，真機上和chrome 開發者工具上展示形式不一致，如何高效的調試，可用到如下這些工具

• 抓包工具 Charles、https證書
• debugger eruda 或 vConsole
• 真機調試(和微信開發者真機調試相似) Weinre 或者 spy-debugger

直播參考文獻

H5直播起航 H5直播入門