tencent cloud

PrevNext

文档反馈

请输入关键字

Recent Pages

文档
云点播
    文档
    Download PDF

    全屏播放问题

    最后更新时间：2024-12-02 17:39:37
    下载PDF

      如何区分屏幕全屏和网页全屏？

      屏幕全屏：是指在屏幕范围内全屏，全屏后只有视频画面内容，看不到浏览器的地址栏等界面，这种全屏需要浏览器提供接口支持。支持屏幕全屏的接口有两种，一种称为 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 的屏幕全屏模式。

      如何解决视频播放后强制或默认全屏的问题？

      如需实现页面内（非全屏）播放，需要在 video 标签中加入 playsinline 和 webkit-playsinline 属性，腾讯云播放器默认会在 video 标签中加上 playsinline 和 webkit-playsinline 属性。iOS10+ 识别 playsinline 属性，版本小于10的系统识别 webkit-playsinline 属性。
      经测试，在 iOS Safari 中可以实现页面内（内联）播放。Android 端识别 webkit-playsinline，但是由于 Android 的开放性，出现了许多定制浏览器，这些属性不一定生效，例如，在 TBS 内核浏览器（包括不限于微信、手机 QQ，QQ 浏览器）中，可能需要使用同层播放器属性（接入文档），避免系统强制全屏视频。
      如果您仍然无法解决上述问题，请 提交工单。

      如何解决在 iOS Hybrid App 的 WebView 中默认全屏播放的问题？

      配置 WebView 的参数 allowsInlineMediaPlayback = YES 允许视频行内播放，即禁止 WebView/UiWebView 强制全屏播放视频。

      如何解决在 iframe 里使用播放器不能全屏的问题？

      在 iframe 标签里设置属性 allowfullscreen，示例代码：
      <iframe allowfullscreen src="" frameborder="0" scrolling="no" width="100%" height="270"></iframe>

      如何解决在 IE8、9、10 浏览器中无法全屏的问题？

      在不支持 Full Screen API 的老旧浏览器中，云点播播放器使用 CSS 实现网页全屏，配合浏览器全屏可以实现屏幕全屏效果（浏览器全屏快捷键通常为“F11”），这里需要页面的 CSS 不能限制播放器的页面内全屏样式，如不能设置播放器的父容器overflow:hidden。
      如果在 iframe 中，播放器无法修改 iframe 外部的 CSS 样式，需要外部页面提供脚本以及样式支持，通常情况下外部页面需要跨域支持，才能实现网页全屏，因此不建议使用 iframe 的方式使用播放器。
      说明：
      IE8/9/10 浏览器不支持 Full Screen API ，因此不能通过 Full Screen API 进行屏幕全屏。
      联系我们

      联系我们，为您的业务提供专属服务。

      联系我们
      技术支持

      如果你想寻求进一步的帮助，通过工单与我们进行联络。我们提供7x24的工单服务。

      提交工单
      7x24 电话支持
      Copyright © 2013-2024 Tencent Cloud. All Rights Reserved.
      隐私条款服务条款缓存条款