您好,登錄后才能下訂單哦!
本篇內(nèi)容主要講解“HTML5怎么在手機(jī)端實(shí)現(xiàn)視頻全屏”,感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷,實(shí)用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“HTML5怎么在手機(jī)端實(shí)現(xiàn)視頻全屏”吧!
最近做項(xiàng)目,遇到一個(gè)問題,在手機(jī)上要實(shí)現(xiàn)視頻的全屏播放功能。測試了很久,終于找到解決辦法。
第一種:將視頻放大來控制。
視頻在播放的時(shí)候,全屏是根據(jù)高度來的,如果設(shè)置視頻 video 標(biāo)簽的寬度是 100% 高度是 110% ,可以實(shí)現(xiàn)全屏,超過是溢出隱藏就可以了。
確定:手機(jī)屏幕尺寸不固定,這個(gè)高度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>
編譯后在頁面內(nèi)部播放視頻而不會跳出使用系統(tǒng)播放器全屏播放視頻了。而且z-index屬性也可以正常定義,使其他元素可以覆蓋在視頻上面。
css:保持畫面的原有比例
#my-video{ object-fit: cover; object-position: center center;
簡單的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ù)可能會在容器內(nèi)留下空白。
cover: 中文釋義“覆蓋”。保持原有尺寸比例。保證替換內(nèi)容尺寸一定大于容器尺寸,寬度和高度至少有一個(gè)和容器一致。因此,此參數(shù)可能會讓替換內(nèi)容(如圖片)部分區(qū)域不可見。
none: 中文釋義“無”。保持原有尺寸比例。同時(shí)保持替換內(nèi)容原始尺寸大小。
scale-down: 中文釋義“降低”。就好像依次設(shè)置了none或contain, 最終呈現(xiàn)的是尺寸比較小的那個(gè)
到此,相信大家對“HTML5怎么在手機(jī)端實(shí)現(xiàn)視頻全屏”有了更深的了解,不妨來實(shí)際操作一番吧!這里是億速云網(wǎng)站,更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢,關(guān)注我們,繼續(xù)學(xué)習(xí)!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。