近期做的项目中都涉及了音频和视频的播放，其间遇到的问题以及解决方法在此记录一下
首先储备一些音视频的事件及方法，常用的几个：
- ended：播放已结束
- play：开始播放音频/视频
- pause：暂停当前播放的音频/视频
- load：重新加载音频/视频元素
全屏以及内联播放
视频能带来音画上的特别体验，所以对于视频的需求日渐变多，也难怪各式短视频软件越来越火
这也就涉及了两种表现形式，全屏和内联
目前来看，其实大多是客户端在播放一段视频的时候确实是直接全屏了，但是这样是不够哒，我们优秀的视觉及交互设计师认为在播放后不能放任不管，所以在播放结束后应该自动退出播放来让用户进行下一步的流程
使视频进入全屏的方法
// 在用户点击了播放按钮后可以通过下面方法进入全屏
video.webkitRequestFullScreen && video.webkitRequestFullScreen()
video.requestFullScreen && video.requestFullScreen()
退出全屏的方法
// 退出全屏需要注意调用的是document的方法
document.webkitExitFullscreen && document.webkitExitFullscreen()
document.exitFullscreen && document.exitFullscreen()
内联播放
刚才也提到，客户端一般都直接进入全屏了，不过对于微信中的还是有方法可以把视频嵌入网页做内联播放
只需要加上属性playsinline就可以在以微信为主的页面浏览了
<video webkit-playsinline playsinline controls="true" preload="auto">
<source src="videoUrl"></source>
</video>
多视频切换播放问题
设计类似下图，点击控制可以切换不同的视频来播放
视频切换.png
直接改变视频src的url发现视频并没有播放新的视频，当然可以直接
remove掉video标签再创建一个不过，
其实
video设计了load方法，在替换了src之后，用video.load()执行一下就可以了
自动播放
移动端系统为了节省用户流量，所以音视频的自动播放都是被禁止了的，所以autoplay属性在移动端没什么效果
如果只是在微信中投放的话，可以使用如下方法达到自动播放效果
<audio id="audio" ref="audio" autoplay preload="auto">
<source src="audioUrl"></source>
</audio>
首先，动态加载微信的一段js
function addWeixin() {
let head = document.getElementsByTagName('head')[0]
let script = document.createElement('script')
script.src = '//res.wx.qq.com/open/js/jweixin-1.2.0.js'
head.appendChild(script)
}
添加监听微信ready事件
function isInWechat() {
return !!navigator.userAgent.match(/micromessenger/i)
}
if (isInWechat()) {
addWeixin()
document.addEventListener('WeixinJSBridgeReady', () => {
audio.play()
}, false)
}
参考
http://www.w3school.com.cn/tags/html_ref_audio_video_dom.asp
https://developer.mozilla.org/zh-CN/docs/Web/API/Document/exitFullscreen
