Web 端视频播放的常见问题及相应解决方案
本文主要介绍 Web 端视频播放的几类常见问题及相应解决方案。
文章目录
视频播放失败
网络
跨协议拦截
CDN 无视频
CDN 鉴权失败
微信浏览器拦截
跨域问题
视频未转码
异常视频
浏览器环境不支持播放
浏览器不支持 Flash
浏览器不支持 MSE
浏览器不支持解码 H264 或者不支持播放 MP4、HLS 格式的视频
HLS 加密视频播放失败
获取 key 失败
解密失败
浏览器劫持视频播放
视频激活播放后强制全屏
视频无法被其他元素覆盖
播放器出现多余的图标
播放器出现广告、下载、推荐视频等内容
Android 端播放视频不会随着页面滑动
播放器显示尺寸
播放器出现黑边
推流端切换横竖屏，播放端不切换
全屏相关问题
默认全屏播放
在 iOS Hybrid App 的 WebView 中默认全屏播放
在 iframe 里使用播放器不能全屏
在 IE8、9、10 浏览器中无法全屏
拖拽、时移播放失败
自动播放相关问题
自动播放失败
在 Hybrid App 的 WebView 中自动播放失败
其他问题
播放器初始化后看不到视频画面
播放器没有变速播放按钮或者变速功能不可用
视频播放失败
视频播放失败有多种原因，定位问题的基本思路是：
配置网络抓包，查看网络请求情况。
查看浏览器控制台报错情况。
检查视频格式，使用的浏览器是否支持播放。
以下是视频播放失败的几种原因，以及对应的解决方案:
网络
跨协议拦截
问题表现： 在 HTTPS 协议的页面播放 HTTP 协议的视频时，浏览器会处于安全考虑进行拦截。 解决方案： HTTP 协议的页面播放 HTTP 的视频，HTTPS 协议的页面播放 HTTPS 的视频。
CDN 无视频
问题表现： 访问视频地址返回404。 解决方案： 定位并修复 CDN 资源。
CDN 鉴权失败
问题表现： 访问视频地址返回403，无法加载视频。 解决方案： 需确认是否开启 referer 防盗链或者 key 防盗链，视频播放时是否具备校验参数。
微信浏览器拦截
问题表现： 在微信无法播放视频，非微信情况下可以播放。 解决方案： 需要通过微信申诉解除拦截。
跨域问题
问题表现： 在 PC 端无法播放视频，浏览器控制台报跨域相关的错误。 问题背景： 在 PC 端使用 Flash 播放视频需要检查视频服务器的crossdomain.xml文件。
crossdomain.xml 的作用
位于www.a.com域中的 SWF 文件要访问www.b.com的文件时，SWF 首先会检查www.b.com服务器根目录下是否有crossdomain.xml文件，如果没有，则访问不成功；如果crossdomain.xml文件存在，且文件内设置了允许www.a.com域访问，则通信正常。
crossdomain.xml中配置的是 SWF 文件的域名。
在 PC 端的现代浏览器使用 HTML5 播放 HLS 和 FLV 时，视频服务器需要配置跨域资源共享 CORS。 正常情况下，腾讯云服务会自动配置这两项跨域策略，如遇到异常情况请 联系我们。
解决方案： 视频存储服务器需要部署crossdomain.xml文件并配置正确的访问策略，以及开启 CORS 支持。
视频未转码
问题表现： 在腾讯云控制台上传视频后，播放器提示视频未转码。 解决方案： 对视频进行转码操作，具体操作请参见 处理视频，确保视频编码格式为 H.264，视频封装格式为 MP4 或者 HLS。
异常视频
问题表现： 转码后的视频出现花屏、黑屏、卡顿和无法播放等现象，可能是原始视频有问题或者视频转码失败。 解决方案： 需要定位原始视频是否有问题，如果是转码问题请 联系我们。
浏览器环境不支持播放
通常情况下在 Web 端播放视频依赖浏览器自带的解码器，或者 Flash 解码器，不支持播放会出现 error code 为3或4的错误。浏览器不支持播放的常见问题如下：
浏览器不支持 Flash
问题表现： 无法播放 RTMP 和 FLV 格式的视频，或者无法在 IE 浏览器中播放视频。<
