溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

HTML5怎么在手機(jī)端實(shí)現(xiàn)視頻全屏展示

發(fā)布時(shí)間：2022-03-01 10:40:46 來(lái)源：億速云 閱讀：165 作者：小新 欄目：開(kāi)發(fā)技術(shù)

這篇文章主要介紹HTML5怎么在手機(jī)端實(shí)現(xiàn)視頻全屏展示，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

第一種：將視頻放大來(lái)控制。

視頻在播放的時(shí)候，全屏是根據(jù)高度來(lái)的，如果設(shè)置視頻 video 標(biāo)簽的寬度是 100% 高度是 110% ，可以實(shí)現(xiàn)全屏，超過(guò)是溢出隱藏就可以了。

確定：手機(jī)屏幕尺寸不固定，這個(gè)高度110%不好確定。

第二種：使用 object-fit 來(lái)解決

直接上代碼：

<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>

編譯后在頁(yè)面內(nèi)部播放視頻而不會(huì)跳出使用系統(tǒng)播放器全屏播放視頻了。而且z-index屬性也可以正常定義，使其他元素可以覆蓋在視頻上面。

css：保持畫面的原有比例

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

簡(jiǎn)單的demo實(shí)現(xiàn)：

<!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: 中文釋義“填充”。默認(rèn)值。替換內(nèi)容拉伸填滿整個(gè)content box, 不保證保持原有的比例。

  • contain: 中文釋義“包含”。保持原有尺寸比例。保證替換內(nèi)容尺寸一定可以在容器里面放得下。因此，此參數(shù)可能會(huì)在容器內(nèi)留下空白。

  • cover: 中文釋義“覆蓋”。保持原有尺寸比例。保證替換內(nèi)容尺寸一定大于容器尺寸，寬度和高度至少有一個(gè)和容器一致。因此，此參數(shù)可能會(huì)讓替換內(nèi)容（如圖片）部分區(qū)域不可見(jiàn)。

  • none: 中文釋義“無(wú)”。保持原有尺寸比例。同時(shí)保持替換內(nèi)容原始尺寸大小。

  • scale-down: 中文釋義“降低”。就好像依次設(shè)置了none或contain, 最終呈現(xiàn)的是尺寸比較小的那個(gè)

以上是“HTML5怎么在手機(jī)端實(shí)現(xiàn)視頻全屏展示”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手