最近做項目，遇到一個問題，在手機上要實作視訊的全屏播放功能。測試了很久，終于找到解決辦法。
第一種：将視訊放大來控制。
視訊在播放的時候，全屏是根據高度來的，如果設定視訊 video 标簽的寬度是 100% 高度是 110% ，可以實作全屏，超過是溢出隐藏就可以了。
确定：手機螢幕尺寸不固定，這個高度110%不好确定。
第二種：使用 object-fit 來解決
直接上代碼：
不支援video
編譯後在頁面内部播放視訊而不會跳出使用系統播放器全屏播放視訊了。而且z-index屬性也可以正常定義，使其他元素可以覆寫在視訊上面。
css：保持畫面的原有比例
#my-video{
object-fit: cover;
object-position: center center;
簡單的demo實作：
視訊播放器
*{margin:0px; padding:0px;}
.app{width: 100%; height:100%; position: absolute; top:0px; right:0px; bottom: 0px; left:0px; overflow: hidden;}
.video{width: 100%; height: 100%;}
#my-video{object-fit: cover; object-position: center center;}
不支援video
// vue 解析
var Application = new Vue({
el: "#app",
data: {
videoUrl:'',
video:null,
},
mounted: function(){
this.videoUrl = "http://gamaru.wpgcms.com/media/file/movie/dkSdfdqur5uQKV5p.mp4";
this.video = this.$refs.video;
},
methods: {
player:function(){
console.log(this.video.clientWidth);
console.log(this.video.clientHeight);
if(this.video.paused){
// 播放
this.video.play();
}else{
// 暫停
this.video.pause()
};
}
}
});
解釋下：object-fit
fill: 中文釋義“填充”。預設值。替換内容拉伸填滿整個content box, 不保證保持原有的比例。
contain: 中文釋義“包含”。保持原有尺寸比例。保證替換内容尺寸一定可以在容器裡面放得下。是以，此參數可能會在容器内留下空白。
cover: 中文釋義“覆寫”。保持原有尺寸比例。保證替換内容尺寸一定大于容器尺寸，寬度和高度至少有一個和容器一緻。是以，此參數可能會讓替換内容(如圖檔)部分區域不可見。
none: 中文釋義“無”。保持原有尺寸比例。同時保持替換内容原始尺寸大小。
scale-down: 中文釋義“降低”。就好像依次設定了none或contain, 最終呈現的是尺寸比較小的那個
到此這篇關于HTML5在手機端實作視訊全屏展示方法的文章就介紹到這了,更多相關HTML5視訊全屏内容請搜尋腳本之家以前的文章或繼續浏覽下面的相關文章，希望大家以後多多支援腳本之家！