同層播放器的用法和普通視頻元素沒有太大區別，只是需要增加兩個X5自定義屬性:“X5-視頻-播放器-類型”和“X5-視頻-播放器-全屏”。
讓我們在同壹個層播放器中嵌入壹個測試頁面:
點擊播放後，視頻元素占據全屏，視頻部分默認顯示在中央:
根據官方文件，只要修改視頻元素的“object-position”屬性，就可以修改視頻部分的顯示位置，但實際上視頻元素的寬度和高度應該設置為屏幕的寬度和高度:
效果如下(右):
請註意，當將視頻元素的高度設置為屏幕高度時，應該使用“window.screen.height”而不是“document”。documentelement。clientheight”，因為後者不包含導航條的高度，會導致無法充滿屏幕(如上左圖)。
在下面添加標題欄:
但點擊播放進入全屏狀態後，標題欄消失。由於同壹層的玩家可以被覆蓋，所以嘗試絕對定位:
標題欄確實擋住了視頻，但是有壹個黑色的漸變和左右兩個按鈕(左下)。根據官方文件，這些是不能移除的。
接下來要做的就是將視頻下移，讓整體UI與進入全屏前保持壹致(右上):
下壹步是在視頻元素後添加其他內容:
但是，進入全屏狀態後，內容元素向上移動(左下)。
顯然，這個元素的位置也應該下移標題欄的高度:
接下來嘗試壹個簡單的點擊事件響應:
此時進入全屏狀態後點擊內容元素是沒有反應的，因為視頻元素占據了全屏，其層次高，擋住了內容元素。知道了問題，解決方法就簡單了，提高主元素的層次就行了:
因為同壹層玩家的全屏狀態只能指定壹個方向(默認豎屏)，所以豎屏玩完後還是會被強制。在這壹點上，整體效果不太對:
因為橫屏狀態的寬度和高度正好與豎屏狀態相反，所以恢復豎屏時UI異常。所以進入全屏的時候，要判斷寬度和高度。如果寬度大於高度，請更換:
如果播放前頁面有滾動條，可以全屏滾動嗎？答案是確實可以滾動，但與其說是滾動不如說是抖動，具體效果可以自己試試。簡而言之，進入全屏狀態後，不要使用頁面滾動，而要使用局部滾動。另外需要註意的是，因為級別提高了，如果內容元素過高，會遮擋視頻的控制條。
最後壹個問題是，在播放壹些視頻格式的時候，進度條會紊亂，甚至回到非全屏模式。
本文同時發表於作者個人博客:X5播放器試用報告|前端開發|希羅的博客。