很久以前整理的...
项目是基于Vue & scss
- video的通用html属性
- preload：IOS不支持，用户只有在点击的时候才会去加载(所以还没播放默认显示第一帧视频会有问题？)
- autoplay：IOS不知道，需手动点击，使用setTimeout延迟开启也不行
- video的js方法
- play()：视频播放
- pause()：视频停止
- currentTime：控制视频当前时间
- muted：是否静音
- volume：音量大小
- duration：视频总时间
- ontimeupdate事件：当前播放位置改变时执行，使用时要绑定addEventListener
- requestFullscreen：全屏
- 使用原生video播放
<!-- 视频播放区 -->
<div id="video_box">
<video id="video_all"
src="播放.mp4"
poster="默认图片.png"
autoplay="false"
style="object-fit:fill">
</video>
</div>
<!-- 视频播放按钮 -->
<div id="btn" v-on:click="playcontr()"></div>h
<script>
export default {
name: 'room',
data() {
return {
video_all: '',
video_box: '',
btn: '',
isAndroid: '',
isiOS: '',
}
},
mounted() {
this.$nextTick(function () {
var self = this;
self.play();
})
},
methods: {
playcontr() {
console.log(1)
var self = this;
self.video_all.play();
},
play() {
var self = this;
self.video_all = document.getElementById('video_all');
self.video_box = document.getElementById('video_box');
self.btn = document.getElementById('btn');
document.addEventListener('touchmove', function (e) {
e.preventDefault()
}, false);
}
}
};
</script>
表现：
IOS 端：会调出微信自带的播放器，里面有视频所有控件，如进度条，暂停，关闭等。等于是脱离页面的一个播放器，但是遇到一个问题是第一次点击播放正常，第二次点击播放黑屏只有声音。
安卓：正好遇到的一台安卓机是无法播放，无任何反应。原因可能是没有安装qq浏览器或者qq视频播放插件。但就算安装也有可能无效。
基于以上，想单纯使用video标签的默认显示，明显是不足够的。安卓和IOS差异性过大，肯定不满足需求。
-
h5原生video 属性
-
poster="1.png"视频封面 -
webkit-playsinline="true"这个属性是IOS 10中设置可以让视频在小窗内播放,也就是不是全屏播放playsinline="true"IOS微信浏览器支持小窗内播放这个属性比较特别， 需要嵌入网页的APP比如WeChat中UIwebview 的allowsInlineMediaPlayback = YES 、webview.allowsInlineMediaPlayback = YES，才能生效。换句话说，如果APP不设置，你页面中加了这标签也无效，这也就是为什么安卓手机WeChat 播放视频总是全屏，因为APP不支持playsinline，而IOS的WeChat却支持。
如果是想做全屏直播或者全屏H5体验的用户，IOS需要设置删除 webkit-playsinline 标签，因为你设置 false 是不支持的 ，安卓则不需要，因为默认全屏。但这时候全屏是有播放控件的，无论你有没有设置control。
-
x5-video-player-type="h5"启用H5播放器,是wechat安卓版特性同层播放别名也叫做沉浸式播放，播放的时候看似全屏，但是已经除去了control和微信的导航栏，只留下"X"和"<"两键。目前的同层播放器只在Android（包括微信）上生效，暂时不支持IOS。加了这个属性后视频上层可以有其他dom元素出现了（非腾讯白名单机制的一种处理措施）。
-
x5-video-player-fullscreen="true"全屏设置,设置为 true 是防止横屏ture和false，true支持全屏播放，false不支持全屏播放。
-
x5-video-orientation="portraint"播放器支付的方向,landscape横屏,portraint竖屏,默认值为竖屏这个属性需要x5-video-player-type开启H5模式
-
IOS 微信浏览器是Chrome的内核，相关的属性都支持，也是为什么X5同层播放不支持的原因。安卓微信浏览器是X5内核，一些属性标签比如playsinline就不支持，所以始终全屏。
-
x-webkit-airplay="allow"使此视频支持IOS的AirPlay功能，使用AirPlay可以直接从使用IOS的设备上的不同位置播放视频、音乐还有照片文件，也就是说通过AirPlay功能可以实现影音文件的无线播放，当然前提是播放的终端设备也要支持相应的功能 -
在Android的微信里面，就算加上了上面的属性，还会出现上下有黑边，不能全屏的问题。
解决办法：给video加上
object-fit: fill;的style属性。如果还是有黑边有可能是视频尺寸不合适。
-
参考链接（感谢原作者，绝对干货）
