本文主要介绍 Web 端视频播放的几类常见问题及相应解决方案。
视频播放失败
视频播放失败有多种原因，定位问题的基本思路是：
1. 配置网络抓包，查看网络请求情况。
2. 查看浏览器控制台报错情况。
3. 检查视频格式，使用的浏览器是否支持播放。
以下是视频播放失败的几种原因，以及对应的解决方案:
网络
跨协议拦截
问题表现：在 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 文件的域名。解决方案：视频存储服务器需要部署
crossdomain.xml文件并配置正确的访问策略，以及开启 CORS 支持。视频未转码
问题表现：在腾讯云控制台上传视频后，播放器提示视频未转码。
解决方案：对视频进行转码操作，具体操作请参见 处理视频，确保视频编码格式为 H.264，视频封装格式为 MP4 或者 HLS。
异常视频
问题表现：转码后的视频出现花屏、黑屏、卡顿和无法播放等现象，可能是原始视频有问题或者视频转码失败。
解决方案：需要定位原始视频是否有问题，如果是转码问题请 联系我们。
浏览器环境不支持播放
通常情况下在 Web 端播放视频依赖浏览器自带的解码器，或者 Flash 解码器，不支持播放会出现 error code 为3或4的错误。浏览器不支持播放的常见问题如下：
浏览器不支持 Flash
问题表现：无法播放 RTMP 和 FLV 格式的视频，或者无法在 IE 浏览器中播放视频。
解决方案：播放 RTMP、FLV 格式的视频以及在 IE 中播放视频都依赖 Flash 插件，请安装并启用 Flash 插件。
浏览器不支持 MSE
问题表现：在 PC 浏览器不支持 Flash 的情况下，使用 H5 方式无法播放 HLS、FLV 格式的视频。
解决方案：不支持 Flash 的情况下，播放器将使用 MSE 播放 HLS、FLV 格式的视频，如浏览器不支持，只能更换或升级浏览器，目前支持通过 MSE 播放 HLS、FLV 格式视频的浏览器有 Edge、Chrome、Firefox 和 Safari11+。
浏览器不支持解码 H264 或者不支持播放 MP4、HLS 格式的视频
问题表现：排除其他情况后仍无法播放 MP4、HLS 格式的视频，通常出现在部分 PC 软件或者 App 集成精简版本的浏览器内核中，没有对应的视频解码器，会出现无法播放 MP4、HLS 格式视频的情况。
解决方案：在 PC 软件或 App 中升级浏览器内核，或者集成 Flash 插件，并允许调用 Flash 插件。
HLS 加密视频播放失败
HLS 加密视频的播放流程有别于常规视频，通常需要确保获取 key 这个步骤是正常的，常见问题如下：
获取 key 失败
问题表现：获取密钥接口无返回，或者返回非密钥数据。
解决方案：检查 m3u8 文件格式是否符合规范，获取密钥的地址是否正确，密钥接口服务端鉴权是否正常，密钥接口是否正常返回。
解密失败
问题表现：获取密钥接口正常返回，仍无法播放。
解决方案：检查密钥长度，确保密钥长度为16字节，并且是能正确解密的密钥。
浏览器劫持视频播放
目前大部分情况下，在网页上播放视频是通过浏览器实现的，浏览器对视频播放拥有最高的处理权限，可以使用浏览器自带的播放器替换原始的 video 控件，并且禁止通过 JS、CSS 修改。劫持播放通常出现在移动端浏览器中，其表现为，播放器的样式不是期望的样式，视频播放时出现额外的 UI 以及广告等内容，或者强制全屏播放等现象。
以下是由于浏览器劫持造成的问题，以及对应的解决方案：
视频激活播放后强制全屏
问题表现：在单击视频激活播放后，直接全屏播放，通常出现在 Android、iOS 的微信、手机 QQ、QQ 浏览器等浏览器中。
解决方案：如需实现页面内（非全屏）播放，需要在 video 标签中加入 playsinline 和 webkit-playsinline 属性，腾讯云播放器默认会在 video 标签中加上 playsinline 和 webkit-playsinline 属性。iOS10+ 识别 playsinline 属性，版本小于10的系统识别 webkit-playsinline 属性。经测试，在 iOS Safari 中可以实现页面内（内联）播放。Android 端识别 webkit-playsinline，但是由于 Android 的开放性，出现了许多定制浏览器，这些属性不一定生效，例如，在 TBS 内核浏览器（包括不限于微信、手机 QQ，QQ 浏览器）中，可能需要使用同层播放器属性（接入文档），避免系统强制全屏视频。
如果已配置以上提到的属性仍会强制全屏，则通用解决方案无效，需要浏览器厂商提供解决方案。
视频无法被其他元素覆盖
问题表现：无法将其他元素覆盖到视频区域上，播放器控件为浏览器自带控件。
解决方案：需要浏览器厂商提供方法解除视频置顶，暂无通用解决方案。
播放器出现多余的图标
问题表现：视频初始化时，视频区域出现非腾讯云播放器自带的图片。
解决方案：可以尝试隐藏 video 标签，当监听到视频开始播放的事件时，再将 video 标签显示。
播放器出现广告、下载、推荐视频等内容
问题表现：视频在播放、暂停、结束时，视频区域出现广告内容，或者下载按钮。
解决方案：需要浏览器厂商提供关闭方法，暂无通用解决方案。
Android 端播放视频不会随着页面滑动
问题表现：在部分 Android 系统浏览器里，页面滑动时，播放器区域不会跟随页面滑动，或者滑动延迟。
解决方案：经过测试发现通过前端方法无法有效解决此类问题，浏览器劫持视频播放后，没有做好优化体验，可以尝试直接使用 video 标签播放（不通过播放器生成）或者尝试使用 Canvas 绘制视频，如果仍无法解决，只能通过升级浏览器来解决。
播放器显示尺寸
播放器出现黑边
问题表现：播放视频时，播放器区域内出现黑边。
解决方案：设置播放器的尺寸比率与视频实际的尺寸比率一致， 例如，视频的分辨率为1280 x 720，播放器的尺寸可以设置为640 x 360或者1280 x 720等，只要满足16:9（1280:720）的宽高比，就能完全显示视频，播放器不会出现黑边。如果视频自带黑边，则需要在转码的时候切掉视频的黑边内容，改变视频的分辨率。
推流端切换横竖屏，播放端不切换
问题表现：推流端设备在推流过程中，进行横竖屏切换，而播放端保持原有的视频比率。
解决方案：Web 播放器目前无法检测到推流端进行了横竖屏切换，只能通过其他途径进行处理。例如，推流开始时是竖屏模式，上行视频宽高比为9:16，Web 播放端播放也是9:16，这时推流设备不断流（是否断流需要推流 SDK 支持）且变成横屏模式，上行视频宽高比变为16:9，如果下行视频也变成16:9，需要将 Web 播放端重新连接才能播放宽高比切换后的视频，这个操作需要外部的接口通知 Web 播放器。 如果下行视频还是9:16，视频将继续按9:16播放。
全屏相关问题
这里主要介绍全屏相关的问题，首先需要了解屏幕全屏（系统全屏）、网页全屏（页面全屏、伪全屏）两个概念。
屏幕全屏：是指在屏幕范围内全屏，全屏后只有视频画面内容，看不到浏览器的地址栏等界面，这种全屏需要浏览器提供接口支持。支持屏幕全屏的接口有两种，一种称为 Fullscreen API，通过 Fullscreen API 进入屏幕全屏后的特点是，进入全屏后仍然可以看到由 HTML CSS 组成的播放器界面。另一种接口为 webkitEnterFullScreen，该接口只能作用于 video 标签，通常用于移动端不支持 Fullscreen API 的情况，通过该接口全屏后，播放器界面为系统自带的界面。
网页全屏：是指在网页显示区域范围内全屏，全屏后仍可以看到浏览器的地址栏等界面，通常情况下网页全屏是为了应对浏览器不支持系统全屏而实现类似全屏的一种方式，所以又称伪全屏。该全屏方式由 CSS 实现。
云点播 Web 播放器采用屏幕全屏为主、网页全屏为辅的全屏方案。全屏模式的优先级为 Fullscreen API > webkitEnterFullScreen > 网页全屏。
由于 Flash 逐步被浏览器限制运行，云点播 Web 播放器采用了 HTML5 标准进行开发，并减少对于 Flash 的使用，在部分老旧的浏览器上，全屏功能使用受限制。旧版点播播放器1.0采用 Flash 开发，使用 Flash 插件实现的屏幕全屏。如需在不支持 Fullscreen API 的浏览器进行屏幕全屏，只能使用旧版点播播放器1.0。
目前已知的全屏情况：
x5 内核（包括 Android 端的微信、手机 QQ 和 QQ 浏览器）：不支持 Fullscreen API，支持 webkitEnterFullScreen，全屏后进入 x5 内核的屏幕全屏模式。
Android Chrome：支持 Fullscreen API，全屏后进入带有腾讯云播放器 UI 的屏幕全屏模式。
iOS （包括微信、手机 QQ、Safari）：不支持 Fullscreen API，支持 webkitEnterFullScreen，全屏后进入 iOS 系统 UI 的屏幕全屏模式。
IE8/9/10：不支持 Fullscreen API，不支持 webkitEnterFullScreen，全屏为网页全屏模式。
桌面端微信浏览器：不支持 Fullscreen API，不支持 webkitEnterFullScreen，全屏为网页全屏模式 (macOS 微信浏览器目前不支持任何全屏模式)。
其他桌面端现代浏览器：通常支持 Fullscreen API，全屏后进入带有腾讯云播放器 UI 的屏幕全屏模式。
默认全屏播放
在 iOS Hybrid App 的 WebView 中默认全屏播放
问题表现：在 App WebView 里播放视频默认全屏播放。
解决方案：配置 WebView 的参数 allowsInlineMediaPlayback = YES 允许视频行内播放，即禁止 WebView/UiWebView 强制全屏播放视频。
在 iframe 里使用播放器不能全屏
问题表现：在 iframe 中嵌入播放器页面，单击全屏按钮无效。
解决方案：在 iframe 标签里设置属性 allowfullscreen，示例代码：
<iframe allowfullscreen src="" frameborder="0" scrolling="no" width="100%" height="270"></iframe>
在 IE8、9、10 浏览器中无法全屏
问题表现：IE8/9/10 浏览器使用播放器无法全屏，只能铺满页面区域。或者使用 iframe 嵌入播放页面，iframe 加上 allowfullscreen 属性也不能全屏。
解决方案：在不支持 Full Screen API 的老旧浏览器中，云点播播放器使用 CSS 实现网页全屏，配合浏览器全屏可以实现屏幕全屏效果（浏览器全屏快捷键通常为“F11”），这里需要页面的 CSS 不能限制播放器的页面内全屏样式，如不能设置播放器的父容器
overflow:hidden。
如果在 iframe 中，播放器无法修改 iframe 外部的 CSS 样式，需要外部页面提供脚本以及样式支持，通常情况下外部页面需要跨域支持，才能实现网页全屏，因此不建议使用 iframe 的方式使用播放器。说明
IE8/9/10 浏览器不支持 Full Screen API ，因此不能通过 Full Screen API 进行屏幕全屏。
拖拽、时移播放失败
问题表现：拖拽到某个时间点无法播放，或者跳到片头。
解决方案：避免使用原始视频进行播放，请使用腾讯云转码后的视频进行播放。避免使用 Flash 进行播放，请切换 HTML5 播放模式。如果视频时长过短，关键帧通常只有1个，不支持拖拽播放。
自动播放相关问题
自动播放失败
问题表现：设置了自动播放属性，视频没有自动播放。
解决方案：在许多浏览器中，都禁止了多媒体文件自动播放，特别是移动端浏览器。部分浏览器允许静音视频或者无音轨视频自动播放，因此可以尝试将播放器设置为静音。对于静音也无法播放的浏览器，暂无解决办法。
在 Hybrid App 的 WebView 中自动播放失败
问题表现：在 App WebView 里自动播放失败。
解决方案：需要设置 WebView 关于多媒体自动播放的属性：
iOS：mediaPlaybackRequiresUserAction = NO
Android：webView.getSettings().setMediaPlaybackRequiresUserGesture(false)
其他问题
播放器初始化后看不到视频画面
问题表现：播放器初始化后，未开始播放前，看不到视频的画面，播放器区域黑屏。
解决方案：Web 播放器是否显示视频的首帧画面取决于该浏览器是否支持，目前并非所有浏览器都支持首帧画面，解决方案为设置视频的封面。
播放器没有变速播放按钮或者变速功能不可用
问题表现：在某些浏览器播放视频没有变速播放按钮或者变速播放功能不可用。
解决方案：目前只有部分现代浏览支持 HTML5 播放模式的变速播放功能，且 Flash 播放模式不支持变速播放，因此不支持 HTML5 模式播放的浏览器也不支持变速播放。可以优先使用 HTML5 模式播放，如果没有出现变速播放按钮，说明当前播放模式不支持变速播放；如果出现变速播放按钮，但切换没有效果，说明播放器检测到当前浏览器支持设置变速播放接口，但实际设置后没有效果，建议在此浏览器下隐藏变速播放按钮。