解决Chrome浏览器HTML5 video控件 大码率视频无法播放的问题

症状表现

HTML5代码如下：

<video id="media" ref="player" preload="auto" controls  src="https://xxxx.com/xxx.mp4"/>

从阿里云OSS加载的MP4视频，少数用户，部分视频使用Chrome浏览器播放时，点击播放按钮后，出现黑屏;

无法播放的用户将视频下载到本地后，使用系统播放器可以正常播放。
使用阿里云官方提供的视频控件测试也是黑屏：https://player.alicdn.com/aliplayer/setting/setting.html （阿里云控件地址）

经过排查，发现只有码率较大（文件较大）的MP4视频才存在这个问题，码率小的MP4可以正常播放。

解决方案

将视频控件的属性

preload="auto"

改为

preload="metadata"（导致视频开头卡几秒）

preload="none" 

初步结论

推测：可能与视频码率太大或者视频编码有关，部分用户电脑配置低或者系统环境中某个缓存空间不够有关系，因为使用preload="auto"之后，会预加载整个视频，导致单位时间内的缓存不够用，视频文件数据不完整。
注意preload不能为空，因为各家浏览器preload的默认值有差异。

补充结论

改用metadata之后，遇到新的问题，有进度条，但是视频开头几秒卡住。只能改用none了。经过继续排查比对，发现与视频编码时使用的编码方式有关，目前暂未查明具体哪个编码设置导致的问题。