有奖捉虫:办公协同&微信生态&物联网文档专题 HOT

浏览器劫持视频播放

目前大部分情况下,在网页上播放视频是通过浏览器实现的,浏览器对视频播放拥有最高的处理权限,可以使用浏览器自带的播放器替换原始的 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 模式播放,如果没有出现变速播放按钮,说明当前播放模式不支持变速播放;如果出现变速播放按钮,但切换没有效果,说明播放器检测到当前浏览器支持设置变速播放接口,但实际设置后没有效果,建议在此浏览器下隐藏变速播放按钮。


http://www.vxiaotou.com