微信 HTML5 VIDEO 視頻播放解決方案

原文連接：https://www.jianshu.com/p/e4573acf6564

 

 

webkit-playsinline && playsinline="true"

• 小窗播放 使視頻不脫離文本流，可是須要webview（allowsInlineMediaPlayback = YES webview.allowsInlineMediaPlayback = YES），如今結果是蘋果支持，安卓不支持。安卓播放會全屏。

x-webkit-airplay="allow"

• 容許airplay（經過AirPlay能夠把當前的視頻投放到支持此技術的其餘設備上。）

x5-video-player-type="h5"

• 經過video屬性「x5-video-player-type」聲明啓用同層H5播放器
• x5-video-player-type支持的值類型：h5
• 這個屬性須要在播放前設置好，播放以後設置無效

x5-video-player-fullscreen="true"

• 視頻播放時將會進入到全屏模式，若是不申明此屬性，頁面獲得視口區域爲原始視口大小(視頻未播放前)，好比在微信裏，會有一個常駐的標題欄，若是不聲明此屬性，這個標題欄高度不會給頁面，播放時會平均分爲兩塊（上下黑塊）
• 注： 聲明此屬性，須要頁面本身從新適配新的視口大小變化。能夠經過監聽resize 事件來實現

window.onresize = function(){ test_video.style.width = window.innerWidth + "px"; test_video.style.height = window.innerHeight + "px"; } 

x5-video-orientation控制橫豎屏

• 聲明播放器支持方向
• 可選值： landscape 橫屏，portrain豎屏； 默認portrain
• 跟隨手機自動旋轉

<video x5-video-player-type="h5" x5-video-orientation="landscape|portrait"/> 

方法

自動播放

setTimeout(function () { video.play(); }, 1000); video.addEventListener('touchstart', function () { video.play(); }); 

進入全屏狀態

video.on('x5videoenterfullscreen', function() { //延時修改video尺寸以佔滿全屏 //$(this).attr('x5-video-player-type',''); setTimeout(function() { $('video').css({ width: window.innerWidth, height: window.innerHeight, }); }, 200); }); 

退出全屏狀態

//退出全屏狀態 video.on('x5videoexitfullscreen', function() { //清除 $(this).css({ width: '', height: '', }); }); 

控制video同層播放位置

video { object-position: 0 0; } 

獲取視頻緩存進度

function gp() {
    var _this=video;// video爲當前video元素 var percent=null; // FF4+, Chrome if (_this && _this.buffered && _this.buffered.length > 0 && _this.buffered.end && _this.duration) { percent = _this.buffered.end(0) / _this.duration; } // Some browsers (e.g., FF3.6 and Safari 5) cannot calculate target.bufferered.end() // to be anything other than 0. If the byte count is available we use this instead. // Browsers that support the else if do not seem to have the bufferedBytes value and // should skip to there. Tested in Safari 5, Webkit head, FF3.6, Chrome 6, IE 7/8. else if (_this && _this.bytesTotal != undefined && _this.bytesTotal > 0 && _this.bufferedBytes != undefined) { percent = _this.bufferedBytes / _this.bytesTotal; } if (percent !== null) { percent = 100 * Math.min(1, Math.max(0, percent)); return percent; } return 0; }

做者：Vinashed 連接：https://www.jianshu.com/p/e4573acf6564 來源：簡書 簡書著做權歸做者全部，任何形式的轉載都請聯繫做者得到受權並註明出處。