原文链接: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
来源:简书
简书著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处。