HTML5在手機端實現視頻全屏展現

時間 2019-11-10

標籤 html5 html 手機實現視頻全屏展現欄目 HTML5 简体版

原文原文鏈接

最近作項目，遇到一個問題，在手機上要實現視頻的全屏播放功能。測試了好久，終於找到解決辦法。javascript

第一種：將視頻放大來控制。css

視頻在播放的時候，全屏是根據高度來的，若是設置視頻 video 標籤的寬度是 100% 高度是 110% ，能夠實現全屏，超過是溢出隱藏就能夠了。html

肯定：手機屏幕尺寸不固定，這個高度110%很差肯定。vue

第二種：使用 object-fit 來解決java

直接上代碼：web

<video preload='auto' id='video'  src=''  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屬性也能夠正常定義，使其餘元素能夠覆蓋在視頻上面。app

css：保持畫面的原有比例ide

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

簡單的demo實現：oop

<!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='h5' 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, 最終呈現的是尺寸比較小的那個

詳細瞭解 object-fit：https://www.cnblogs.com/e0yu/p/10670990.html

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。