Micro letter HTML5 VIDEO video player solution

Original link: https://www.jianshu.com/p/e4573acf6564

 

 

webkit-playsinline && playsinline="true"

• Small window to play the video without departing from the text flow, but needs to webview (allowsInlineMediaPlayback = YES webview.allowsInlineMediaPlayback = YES ), the result is now supported by Apple , Android does not support . Andrews will play full-screen.

x-webkit-airplay="allow"

• Allow airplay (the current video can be put to other devices that support this technology through AirPlay.)

x5-video-player-type="h5"

• Enable the same layer H5 player via video attribute "x5-video-player-type" statement
• x5-video-player-type supports value types: h5
• This property need to set up before playing, set invalid after playing

x5-video-player-fullscreen="true"

• Video playback will enter into full-screen mode, if you do not declare this property page to get the viewport area to the original size of the viewport (before the video is not playing), such as micro-channel, there will be a resident of the title bar, if you do not declare this property, this page will not give the title bar height, evenly divided into two (upper and lower black block) while playing
• Note: This property is declared, it is necessary to re-adapt their pages new viewport size changes. Can be achieved by listening to resize events

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

x5-video-orientation control horizontal and vertical screen

• Disclaimer player supports direction
• Available Values: landscape landscape, portrain vertical screen; default portrain
• Follow the phone to automatically rotate

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

method

Autoplay

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

Enter full screen

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

Exit fullscreen

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

Control video playback position with the layer

video {
    object-position: 0 0;
}

Get video buffer progress

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

Author: Vinashed
link: https: //www.jianshu.com/p/e4573acf6564
Source: Jane book
Jane book copyright reserved by the authors, are reproduced in any form, please contact the author to obtain authorization and indicate the source.