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了。经过继续排查比对,发现与视频编码时使用的编码方式有关,目前暂未查明具体哪个编码设置导致的问题。