Media 媒体 ​

HTML5 新增了用于视频与音频播放的 <video> 和 <audio> 标签，接下来主要说说 video 标签的问题。

1. autoplay 属性 ​

当前主流浏览器是禁止 video 自动播放功能，即使你添加了 autoplay 属性。以下情况支持自动播放：

• 视频静音（通过设置 muted 属性）或音量设置为 0
• 用户与网站进行了交互（通过鼠标点击、键盘回车等）
• 站点已被列入浏览器白名单：
  • 浏览器确定用户频繁使用媒体，自动加入白名单
  • 通过设置首选项等

2. 微信浏览器中的情况 ​

你可能会遇到需求提出，别人的视频可以在微信的网页中自动播放。这个目前我发现有两种情况：

• 腾讯视频的连接可以实现自动播放，毕竟这是腾讯公司自己的产品
• 腾讯系的一些企业网站或者其它大公司的网页视频，这种应该是微信内置浏览器有对内的能播放的网址白名单，一般公司还是别考虑了。

3. 不同清晰度视频切换 ​

该方式没有内置支持的属性，需要自定义 controls 实现，无非是根据不同清晰度切换对应的视频地址来实现。

4. 全屏播放 ​

主要是微信的 X5 内核会与标准不同，播放默认会全屏播放，需要特殊处理，给其添加 x5-video-player-type='h5-page' 开启同层渲染

<video
  autoplay
  src={videoUrl}
  webkit-playsinline="true"
  playsinline="true"
  x5-video-player-type='h5-page'
/>

<video
  autoplay
  src={videoUrl}
  webkit-playsinline="true"
  playsinline="true"
  x5-video-player-type='h5-page'
/>