近期做的项目中都涉及了音频和视频的播放，其间遇到的问题以及解决方法在此记录一下

首先储备一些音视频的事件及方法，常用的几个：

• 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

自动播放

移动端系统为了节省用户流量，所以音视频的自动播放都是被禁止了的，所以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