vue实战(17)——结合vue-video-player设置视频、流媒体自动播放

• vue-video-player github地址：https://github.com/surmon-china/vue-video-player
• 官方案例：https://github.surmon.me/vue-video-player/
• 官方案例对应代码地址：https://github.com/surmon-china/vue-video-player/tree/master/examples
  
  流媒体自动播放
  
  最近接触了流媒体播放的问题，以往做的视频播放都是基于mp4格式文件播放，用的是vue-video-player插件，这次研究了下像直播流媒体等的播放设置，碰见了不少坑，下面来总结一下

1、普通视频播放

• npm install vue-video-player --save // 安装依赖
• 一般在PC端设置了autoplay属性都可以自动播放

• 设置了自动播放，Chrome和Safari的PC端浏览器播放都可以自动播放
• iphone 手机上在微信端及Safari浏览器访问，无法自动播放
• 至于iphone上无法自动播放视频的原因，也查了很多材料，iOS Safari 不允许自动播放视频，只能通过用户主动触发的交互才能播放，就好比H5页面中的按钮不能主动触发事件一样，只能是用户主动操作才可以，这大概也是出于一种安全策略考虑，但是为什么别人的 iPhone 使用微信打开一个 H5 却能自动播放音频?
• 关于这一点参考了这篇文章的说法

这里说到一个被腾讯和谐掉的接口 WeixinJSBridge,这里就不讲为什么 WeixinJSBridge 接口会被和谐掉,反正都被和谐掉了,以后也不建议在项目中使用.但是腾讯又没把 WeixinJSBridge 这个 API 所有功能都和谐掉，相反，有好几个功能还是相当有用的，可以正常使用.有兴趣的可以看看<<微信JSAPI>>.接下来我们就需要用到尚未被腾讯和谐掉的 WeixinJSBridge 接口来实现在 iPhone 手机微信端 自动播放.

在微信内置浏览器中有一个内置的 JS 对象,这个内置的 JS 对象就是 WeixinJSBridge. WeixinJSBridge 并不是 WebView 一打开就有了，客户端需要初始化这个对象，当这个对象准备好的时候，客户端会抛出事件 "WeixinJSBridgeReady"。因此，在调用 WeixinJSBridge 相关 api 时，需要做好 WeixinJSBridge 存在与否的判断，修改后代码如下

• 再次使用微信打开链接就可以自动播放了

2、流媒体自动播放设置

• 自动播放设置和上方普通视频一样，在微信中也能自动播放