vue video全屏播放
阿新 • • 發佈:2019-01-04
需求:
1、視訊為長方形,頁面初始化開啟為橫屏全屏播放視訊。
2、微信不支援自動播放,故自動播放需求刪除。
方法:
1、vue-video-player外掛
因需求較簡單,僅要求播放本地一個視訊,故未選擇使用外掛。
2、video
<div id="video_box" style="z-index: 999;" :class="{video_box_rotate: isIos}"> <video @click="videoPlay" class="index_video" poster="../assets/images/poster.jpg" id="video_content"
style="object-fit:fill" /*加這個style會讓 Android / web 的視訊在微信裡的視訊全屏,如果是在手機上預覽,會讓視訊的封面同視訊一樣大小
webkit-playsinline='true' playsinline="true" x5-playsinline="true" x-webkit-airplay="true" x5-video-player-type="h5" x5-video-player-fullscreen="true" /*全屏播放*/ x5-video-ignore-metadata="true" x5-video-orientation="landscape" /*播放器的方向,landscape橫屏,portraint豎屏,預設值為豎屏*/
preload="preload"> <source src="../../static/video.mp4" type='video/mp4; codecs="avc1.4D401E, mp4a.40.2"' > </video> </div>
具體屬性解釋可參考 https://blog.csdn.net/qq_16494241/article/details/62046891
同層H5播放器官網 https://x5.tencent.com/tbs/guide/video.html
注意:
x5-video-orientation="landscape" /*播放器支付的方向,landscape橫屏,portraint豎屏,預設值為豎屏*/
landscape屬性ios不支援
為相容ios橫屏將視訊旋轉90度
mounted() { if (是否為ios) { this.videoFullScreen(); } }
methods: {
// 視訊寬高設定為手機寬高 videoFullScreen() { let width = document.documentElement.clientWidth; let height = document.documentElement.clientHeight; document.getElementById('video_content').style.height = width + 'px'; document.getElementById('video_content').style.width = height + 'px'; }, }
/*視訊旋轉*/
.video_box_rotate{
transform rotate(90deg)
}
參考資料 https://blog.csdn.net/xcy1193068639/article/details/80242111#commentsedit
歡迎大家指點,謝謝