关于微信使用内置播放器播放视频的办法

  • 内容
  • 评论
  • 相关

大家做H5页面的时候想必都会遇到过一个问题,那就是使用video标签的时候在移动端或者微信上会默认弹出外置的播放器,使很多特效页面无法完成。但是别人的页面却可以,比如著名的薛之谦的页面:http://game.qq.com/act/a20161121xzq/?ADTAG=tencent.h5

这是什么原因呢?懂的人都知道,这是腾讯的白名单,白名单内的地址可以使用内置的播放器进行播放,可惜现在腾讯已经关闭了白名单的申请,值得注意的是ios并不影响(ios只需要设置webkit-playsinline="true"),影响的主要是安卓。那怎么才能在安卓下也能播放呢?好在微信的X5内核经过了几代版本迭代,推出了x5-video-player-type="h5" 和 x5-video-player-fullscreen="true"属性,这个可以让网页在所谓“同层播放器”中播放,可以解决安卓播放视频弹出默认框的问题。

接下来,我放出一个demo:http://www.ajexoop.com/test/embedVideoTest/test.html

(我的服务器网速只有100k,测试视频有2m,所以大家看demo的时候耐心等等)

大家可以用安卓机测试一下,点测试的时候,依然会弹一个框,但是弹出来后发现,按钮是在视频上面了,也就是说,修改后在安卓机上点击视频播放弹出的不是默认播放器,而是同层播放器。我们也可以叫他全屏层播放器。虽然说体验还是怪怪的,但是tgideas那种视频交互页面已经可以实现了。

代码很简单就是这样:

<video id="myvideo" style="object-fit: fill; width: 750px; height: 1206px; z-index: 0;position:fixed " autoplay="autoplay" playsinline="true" webkit-playsinline="true" x-webkit-airplay="allow"
       airplay="allow" loop="loop"x5-video-player-type="h5" x5-video-player-fullscreen="true" x5-video-orientation="portrait"  src="video/1.mp4" width="750" height="1206"></video>

那么能不能做到不弹全屏层,在安卓机上内置播放呢?这个本人找了很多资料得到的答案是,只有腾讯白名单可以,白名单外还是要是用“同层播放器”。

另外还有一个,大家经常问的问题,那就是能不能进网页自动播放视频,这个答案也是否定的。进网页如果可以自动播放视频,会导致用户流量浪费,或者扫码后直接播放一些嘿嘿嘿的视频。这些都不是用户想看到的,所以现在手机的浏览器,包括别的一些内核,自动播放视频的功能都是无法实现的

相关资料考证:凹凸实验室

1542183776360437.jpg

评论

0条评论

发表评论

电子邮件地址不会被公开。