我的文章

Web 端播放问题

最近更新时间：2022-07-01 15:37:31

我的收藏

本页目录：

• 视频播放失败
  • 网络
  • 跨域问题
  • 视频未转码
  • 异常视频
  • 浏览器环境不支持播放
  • HLS 加密视频播放失败
• 浏览器劫持视频播放
  • 视频激活播放后强制全屏
  • 视频无法被其他元素覆盖
  • 播放器出现多余的图标
  • 播放器出现广告、下载、推荐视频等内容
  • Android 端播放视频不会随着页面滑动
• 播放器显示尺寸
  • 播放器出现黑边
  • 推流端切换横竖屏，播放端不切换
• 全屏相关问题
  • 默认全屏播放
  • 在 iOS Hybrid App 的 WebView 中默认全屏播放
  • 在 iframe 里使用播放器不能全屏
  • 在 IE8、9、10 浏览器中无法全屏
• 拖拽、时移播放失败
• 自动播放相关问题
  • 自动播放失败
  • 在 Hybrid App 的 WebView 中自动播放失败
• 其他问题
  • 播放器初始化后看不到视频画面
  • 播放器没有变速播放按钮或者变速功能不可用

本文主要介绍 Web 端视频播放的几类常见问题及相应解决方案。

视频播放失败

视频播放失败有多种原因，定位问题的基本思路是：

1. 配置网络抓包，查看网络请求情况。

2. 查看浏览器控制台报错情况。

3. 检查视频格式，使用的浏览器是否支持播放。

以下是视频播放失败的几种原因，以及对应的解决方案:

网络

跨协议拦截

问题表现：在 HTTPS 协议的页面播放 HTTP 协议的视频时，浏览器会处于安全考虑进行拦截。

解决方案：HTTP 协议的页面播放 HTTP 的视频，HTTPS 协议的页面播放 HTTPS 的视频。

CDN 无视频

问题表现：访问视频地址返回404。

解决方案：请 联系我们 定位并修复 CDN 资源。

CDN 鉴权失败

问题表现：访问视频地址返回403，无法加载视频