微信公众号h5视频<video>标签问题

444 阅读5分钟

X5内核视频之问答汇总

X5内核视频三种播放形态

(1) 全屏播放

X5内核视频默认播放形态,用户点击视频区域后开始进入全屏播放,视频区域内的所有事件行为会由X5内核视频组件全权托管。视频层级最高,会遮挡所在区域所有html元素。(仅使用于安卓微信、手机QQ等非安卓QQ浏览器的X5内核场景)

yongling8808.github.io/test/video_…

(2) 页面内播放

X5内核视频在用户点击后默认会进入全屏播放,前端可以设置video的x5-playsinline属性来将视频限定于网页内部播放

yongling8808.github.io/test/video/…

(3) 同层页面内播放

同层页面内播放是标准的视频播放形态,在video标签中添加x5-video-player-type:h5-page属性来控制网页内部同层播放,可以在视频上方显示html元素

tencentx5.github.io/x5/video_pa…

X5内核视频事件

(1) 进入、退出全屏通知

可以通过监听x5videoenterfullscreen、x5videoexitfullscreen事件来得到视频进入和退出全屏通知

yongling8808.github.io/test/video_…

(2) 扩展通知

X5内核视频额外参数,每秒触发一次,让前端通过参数分析决定是否换视频源来保证用户的播放体验

res.imtt.qq.com/qqbrowser_x…

X5内核视频反馈问答

(1) Q:X5内核视频可以实现自动播放吗?

A:X5内核作为webview,具备自动播放能力,但这能力的控制权交由TBS宿主控制(安卓微信、手机QQ、QQ浏览器及其它第三方接入),宿主可以通过IX5WebViewExtension的invokeMiscMethod(String method, Bundle bundle)来决定是否允许前端页面实现自动播放

method = "setVideoPlaybackRequiresUserGesture";

bundle = new Bundle(); bundle.setBoolean("require", val); //val为true或false

yourWebView.getX5WebViewExtension().invokeMiscMethod(method, bundle);

目前安卓QQ浏览器允许wifi下自动播放、手机QQ允许自动播放、微信不允许自动播放。

yongling8808.github.io/test/video/…

(2) Q:X5内核视频为什么有时使用js调用video.play() 无法播放?

A:X5内核自TBS3.8及以后在事件处理这块跟移动端标准对齐,只有用户点击视频或者用户点击操作的时间周期内js调用了video.play()才可以正常播放。

yongling8808.github.io/test/video_…

注意:例子中的4.timer描述已经不适应最新版,最新版视频的首次播放可以在timer响应中触发。

(3) Q:X5内核视频播放会触发页面元素的onblur吗?

A:目前X5内核的视频播放使用跟当前webview同级别的view来展示,视频播放时会抢占webview的焦点势必会导致页面内焦点丢失。

(4) Q:在X5内核上使用js调用video的seek方法怎么会出现seek位置跟传入的参数不符?

A:X5内核中的视频播放器是提供seek能力的,但seek的最终位置是前端传入的时间参数向已播放的方向的第一个关键帧。所以会出现seek位置不准,这个跟具体的视频源由一定关系。

(5) Q:X5内核竖屏播放视频时,横置手机会自动切到横屏全屏播放,但再竖屏时,视频为什么无法切回来?

A:这个是产品策略,需要用户点击全屏上的返回按钮后返回到竖屏。

(6) Q:使用X5内核打开A页面播放视频后暂停,再点击A页面跳转到B页面,再从B页面当用户发生点击行为时使用js的history.goback到A页面,A页面视频一定概率会自动播放。

A:这个是X5内核前进后退重新恢复A页面视频播放通路遗留问题,页面前端可以将js的history.goback 调用跟用户点击行为的时机错开,比如在用户click时间中延时100ms再去调用history.goback可以临时解决该问题。

(7) Q:X5内核支持多个视频同时播放吗?

A:同层情况下支持,参考文档开头部分的第三种播放形态。

(8) Q:X5内核支持MSE吗?

A:支持。

(9)Q:接入X5内核后,webview的onLoadResource为什么接收不到H5页面video标签的视频url地址?如何获取视频链接?

A:X5内核视频播放使用X5内核视频sdk,视频资源通过sdk拉取,独立于X5webview,所以不会有onLoadResource通知,但可以通过webview接口注入js获取video标签的url属性。

(10)Q:视频盖住了网页其他标签。

A:同层形态时不会盖住;native形态播放器是处于顶层的独立view会遮盖视频区域的其它元素。

(11)Q:x5内核video的currentTime赋值后无效。

A:只有视频开始播放后设置的currentTime才有效。

(12)Q:Video标签转Canvas会有卡顿。

A:X5内核基于安全策略,对获取摄像头数据后在canvas上的绘制做了限制。

(13)Q:视频播放控件支持自定义吗?

A:同层形态下的控件前端可以自定义,native形态不支持自定义。

(14)Q:X5内核的视频播放支持字幕功能吗?

A:不支持。

(15)Q:X5内核视频播放支持自签ssl证书的视频吗?

A:不支持。

(16)Q:X5内核视频支持playbackRate倍速播放吗?

A:已支持。

(17)Q:X5内核视频支持与音频同时播放吗?

A:不支持。