详情页标题前

腾讯云云点播全屏播放问题

详情页1

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

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

云点播官网1折活动,限时活动,即将结束,速速收藏
同尘科技为腾讯云授权服务中心。
购买腾讯云产品享受折上折,更有现金返利。同意关联立享优惠

转转请注明出处:https://www.yunxiaoer.com/144235.html

(0)
上一篇 2023年12月9日
下一篇 2023年12月9日
详情页2

相关推荐

  • 腾讯云容器服务网络精细调度同尘科技

    网络精细调度能力提供了一系列功能,保证业务网络方面的服务质量保证。全方位提升网络表现,以及灵活限制容器对网络的使用。 功能一:出入方向限速 功能介绍 限制某个容器的入、出带宽。 使用方式 1. 部署 QoS Agent。2. 在集群里的“扩展组件”页面,找到部署成功的 QoS Agent,单击右侧的更新配置。3. 在修改 QoS Agent 的组件配置页面,…

    2023年12月9日
  • 阿里云大数据开发治理平台 DataWorksGetPermissionApplyOrderDetail-云淘科技

    调用GetPermissionApplyOrderDetail查询一个权限申请单的详细信息。 调试 您可以在OpenAPI Explorer中直接运行该接口,免去您计算签名的困扰。运行成功后,OpenAPI Explorer可以自动生成SDK代码示例。 请求参数 名称 类型 是否必选 示例值 描述 Action String 是 GetPermissionA…

  • 信息流广告,信息流部分建议宽度830px,只针对默认列表样式,顺序随机
  • 腾讯云对象存储数据工作流

    如何设置媒体工作流? 详细操作请参见 配置工作流。 如何使用 API 接口创建媒体工作流? 详细操作请参见 创建工作流。 如何使用 API 接口删除媒体工作流? 详细操作请参见 删除工作流。 如何使用 API 接口更新媒体工作流? 详细操作请参见 更新工作流。 如何使用 API 接口查询媒体工作流? 详细操作请参见 查询工作流。 对象存储官网1折活动,限时活…

    腾讯云 2023年12月9日
  • 阿里云人工智能平台PAIEAS模型服务概述-云淘科技

    EAS是PAI产品为实现一站式模型开发部署应用,针对在线推理场景提供的模型在线服务,支持将模型服务部署在公共资源组或专属资源组,实现基于异构硬件(CPU和GPU)的模型加载和数据请求的实时响应。 EAS产品架构 模型在线服务EAS(Elastic Algorithm Service)是一种模型在线服务平台,可支持您一键部署模型为在线推理服务或AI-Web应用…

    2023年12月10日
  • PolarDB-X中CLA文件链接打不开呢?-云小二-阿里云

    “PolarDB-X中CLA文件链接打不开呢?https://gist.github.com/alibaba-oss/151a13b0a72e44ba471119c7eb737d74 “

    阿里云 2023年12月19日

联系我们

400-800-8888

在线咨询: QQ交谈

邮件:admin@example.com

工作时间:周一至周五,9:30-18:30,节假日休息

关注微信
本站为广大会员提供阿里云、腾讯云、华为云、百度云等一线大厂的购买,续费优惠,保证底价,买贵退差。