html5 video 手機端全屏顯示

廢話不多說上程式碼

html   video  

<video preload='auto' id='my-video'  src='xxxxx.xx'  webkit-playsinline='true' playsinline='true'x-webkit-airplay='true' x5-video-player-type='h5' x5-video-player-fullscreen='true'x5-video-ignore-metadata='true'  width='100%' height='100%'><p> 不支援video</p> </video>
 

編譯後在頁面內部播放視訊而不會跳出使用系統播放器全屏播放視訊了。而且z-index屬性也可以正常定義，使其他元素可以覆蓋在視訊上面

#my-video{
    object-fit: cover;
    object-position: center center;
}

object-fit:

• fill: 中文釋義“填充”。預設值。替換內容拉伸填滿整個content box, 不保證保持原有的比例。
• contain: 中文釋義“包含”。保持原有尺寸比例。保證替換內容尺寸一定可以在容器裡面放得下。因此，此引數可能會在容器內留下空白。
• cover: 中文釋義“覆蓋”。保持原有尺寸比例。保證替換內容尺寸一定大於容器尺寸，寬度和高度至少有一個和容器一致。因此，此引數可能會讓替換內容（如圖片）部分割槽域不可見。
• none: 中文釋義“無”。保持原有尺寸比例。同時保持替換內容原始尺寸大小。
• scale-down: 中文釋義“降低”。就好像依次設定了none或contain, 最終呈現的是尺寸比較小的那個