産品百科 ｜如何啟用 H5 的同層播放

背景資訊

阿裡雲播放器 2.0.1 及以上，支援在 Android 微信小程式上支援 H5 同層播放功能，此功能隻對 Android 騰訊的 X5 浏覽器起作用。

如果微信沒有啟用同層播放，在 Android 微信上播放視訊時，會自動彈出全屏播放， 覆寫 Dom 元素。

同層播放屬性

名稱	類型	說明
x5_type	String	啟用同層播放，設定值為 h5。
x5_fullscreen	Boolean	聲明視訊播放時是否進入到 TBS 的全屏模式，支援的值為 true。
x5_video_position		聲明視訊播在界面上的位置，預設為 center。取值： top：頂部。 center：中央。
x5_orientation		聲明 TBS 播放器支援的方向，取值： landscape：橫屏。 portraint：豎屏。

同層播放設定

• 不全屏同層播放通過設定 x5_type 屬性為 h5，将 playsinline 設定為 false，啟用同層播放。

  通過 x5_video_position 定義視訊的位置，如果在頂部可以設定為 top，居中可以設定 center，預設為 center。

  Demo，請下載下傳

  H5 Demo 。

  

• 全屏同層播放通過設定 x5_type 屬性為 h5，将 playsinline 設定為 false，啟用同層播放，設定 x5_fullscreen 為 true，啟用全屏， 全屏播放器不需要設定 x5_video_position 屬性。

  全屏播放視訊預設是平鋪的，如果想不平鋪可以設定 object-fit 的樣式為 contain 或其它。

video {
    object-fit: contain !important;
    }      

• H5 Live Demo

  

同層播放的建議

在使用同層播放器時，為您提供的的一些建議，如下所示。

• 監聽 resize 事件實作自适應視口大小變化，視訊播放時會調整視口大小。
• 在視訊播放期間的互動、彈框和字幕要在視訊視訊區域中，不要在視訊區域外。
• 對于直播類全屏視訊，最好不要在最頂部放互動性元素。
• 對于需要全屏互動的，可以将 video 區域設定為視口大小。

更多設定

• 進入和退出同層播放時布局處理在進入和退出同層播放的事件裡，可以添加一些調整布局的邏輯，時常在進入同層播放時，布局需要做一下調整。例如全屏，元素的位置等。

  進入事件： x5requestFullScreen。

  退出事件： x5cancelFullScreen。

• 更多的自定義如果 x_video_position 屬性的 top 和 center 不能滿足要求，可以通過自定義 object-fit 和 object-position 屬性，進行更靈活的設定視訊的顯示位置。
• object-fit 屬性object-fit：CSS 屬性指定替換元素的内容應該如何适應到其使用的高度和寬度确定的框。取值：

• • object-fit：fill。
  • object-fit：contain
  • object-fit:cover
  • object-fit: none
  • object-fit: scale-down

• 每個值的效果圖展示如下所示。

  

  CSS 代碼如下所示。

video {
    object-fit: contain !important;
    }      

• object-position 屬性object-position：CSS 屬性控制替換内容位置，和 background-position 屬性很類似。

img {
   width: 300px;
   height: 250px;
   border: 1px solid black;
   background-color: silver;
   margin-right: 1em;
   object-fit: none;
}
#object-position-1 {
  object-position: 10px;
}
#object-position-2 {
  object-position: 100% 10%;
}      

• 效果如下所示。

  

• 調整播放器容器的高度由于設定了視訊的位置，會引起 controlbar 顯示不是在視訊的最下面，可以通過訂閱 resize 和 requestFullScreen 事件調整視訊容器的高度。

var setLayout = function()
{    
    //設定播放器容器的高度
    var height ; //根據實際情況設定高度
    player.el().style.height = height;
}
window.onresize = function(){
    setLayout();
}
player.on("requestFullScreen", function(){
    setLayout();
});      

「視訊雲技術」你最值得關注的音視訊技術公衆号，每周推送來自阿裡雲一線的實踐技術文章，在這裡與音視訊領域一流工程師交流切磋。