溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹HTML5怎么在手機端實現視頻全屏展示，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！
第一種：將視頻放大來控制。
視頻在播放的時候，全屏是根據高度來的，如果設置視頻 video 標簽的寬度是 100% 高度是 110% ，可以實現全屏，超過是溢出隱藏就可以了。
確定：手機屏幕尺寸不固定，這個高度110%不好確定。
第二種：使用 object-fit 來解決
直接上代碼：
<video preload='auto' id='video' src='' webkit-playsinline='true' playsinline='true'x-webkit-airplay='true' x5-video-player-type='h6' x5-video-player-fullscreen='true'x5-video-ignore-metadata='true' width='100%' height='100%'><p> 不支持video</p> </video>編譯后在頁面內部播放視頻而不會跳出使用系統播放器全屏播放視頻了。而且z-index屬性也可以正常定義，使其他元素可以覆蓋在視頻上面。
css：保持畫面的原有比例
#my-video{
object-fit: cover;
object-position: center center;簡單的demo實現：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>視頻播放器</title>
<style type="text/css">
*{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;}
</style>
</head>
<body>
<div id="app" class="app">
<video preload='auto' id='my-video' ref="video" :src="videoUrl" @click="player" loop autoplay="autoplay" webkit-playsinline='true' playsinline='true'x-webkit-airplay='true' x5-video-player-type='h6' x5-video-player-fullscreen='true'x5-video-ignore-metadata='true' width='100%' height='100%'><p> 不支持video</p> </video>
</div>
</body>
<script type="text/javascript" src="./js/vue.min.js"></script>
<script type="text/javascript">
// 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()
};
}
}
});
</script>
</html>解釋下：object-fit
fill: 中文釋義“填充”。默認值。替換內容拉伸填滿整個content box, 不保證保持原有的比例。
contain: 中文釋義“包含”。保持原有尺寸比例。保證替換內容尺寸一定可以在容器里面放得下。因此，此參數可能會在容器內留下空白。
cover: 中文釋義“覆蓋”。保持原有尺寸比例。保證替換內容尺寸一定大于容器尺寸，寬度和高度至少有一個和容器一致。因此，此參數可能會讓替換內容（如圖片）部分區域不可見。
none: 中文釋義“無”。保持原有尺寸比例。同時保持替換內容原始尺寸大小。
scale-down: 中文釋義“降低”。就好像依次設置了none或contain, 最終呈現的是尺寸比較小的那個
以上是“HTML5怎么在手機端實現視頻全屏展示”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
