关于video标签使用的一些总结

问题一：用一个div包住video，div下边缘会出现下缝隙（和img标签一样）

解决方案：和img标签一样，设置video为display：block或者设置div的font-size为0

问题二：给video标签设置autopaly失效，视频没有自动播放

解决方案：在Chrome 66后，浏览器关掉了声音自动播放，也就是说和在桌面版浏览器也将失效（移动端最开始是完全禁止音视频自动播放的，后来有放开），可以在video标签加上muted属性，现在视频是静音自动播放，可以再显示一个打开声音的按钮，提示用户点一下打开声音

如果想了解audio标签自动播放的方案，移步这里https://juejin.cn/post/6844903605170864136

问题三：video标签在ios中播放的时候会自动全屏

解决方案：给video加上playsinline="true"和webkit-playsinline="true"属性

playsinline=“true” /IOS微信浏览器支持小窗内播放/

webkit-playsinline=“true” /这个属性是ios 10中设置可以让视频在小窗内播放，也就是不是全屏播放/

问题四：在问题二中延伸出的问题

问题：在给video标签加上muted属性后，现在视频是静音自动播放的，可以再显示一个打开声音的按钮，用户点击这个按钮声音就打开了，比如在vue中我们在事件处理函数中这样写：this.$refs.myVideo.volume = 1，但是视频播放还是没有声音

解决方案：在函数中再加上 this.$refs.myVideo.muted = false，比如：

按理说这样写就已经没问题了，但是ios中这样处理只能打开声音，不能关闭声音（在安卓中表现正常），我们再对muted属性处理一下，

这样在ios中也可以正常点击图标打开/关闭声音了