1. 程式人生 > >關於video標簽移動端開發遇到的問題,獲取視頻第一幀,全屏,自動播放,自適應等問題

關於video標簽移動端開發遇到的問題,獲取視頻第一幀,全屏,自動播放,自適應等問題

自適應 and auto 自動播放 class cti spa 遇到 function

最近一直在處理video標簽在IOS和Android端的兼容問題,其中遇到不少坑,絕大多數問題已經解決,下面是處理問題經驗的總結:

1.獲取視頻的第一幀作為背景圖;

技術:canvas繪圖

window.onload = function(){
var video = document.getElementById(‘video‘);
//使用嚴格模式
‘use strict‘;
//第一幀圖片與原視頻的比例
var scal = 0.8;
//監聽頁面加載事件
video.addEventListener(‘dataLoad‘,function(){
//創建一個畫布
var canvas = document.createElement(‘canvas‘);
canvas.width = video.style.width*scal;
canvas.height = video.style.height*scal;
//繪制圖片
canvas.getContentext(‘2d‘).drawImage(video,0,0,canvas.width,canvas.height);
//設置標簽的poster屬性
viseo.setAttribute("poster",canvas.toDataURL("image/png")
);

});
}

2.禁止安卓手機自動全屏

video標簽在安卓系統下,默認全屏,通過添加屬性可以禁止全屏,

x5-playsinline="true",切記添加該屬性後不能再有x5-video-player-type=‘h5‘ x5-video-player-fullscreen=‘true‘,否則還會默認全屏

3.播放視頻時,不能完全覆蓋的問題

此時需要給video標簽添加style樣式

width:100%;height:100%;object-fit:fill;

此外,video標簽的父元素應該設置寬高:width:100%;height:100%;

4.自動播放問題

在pc端,只需要給video標簽加上autoplay = ‘autoplay‘屬性即可,

在移動端需要使用js判斷

首先應在也頁面中引入<script src="http://res.wx.qq.com/open/js/jweixin-1.1.0.js"></script>

$(‘#video_play‘).play();
    
document.addEventListener(‘WeixinJSBridgeReady‘, function () {
                $(‘#video_play‘).play();
            
}, false);

在安卓中,是無法實現加載後自動播放功能的,需要引到用戶產生行為,觸發事件,

關於video標簽移動端開發遇到的問題,獲取視頻第一幀,全屏,自動播放,自適應等問題