HTML video标签 兼容总结

  最近项目中用到了video标签,之前在Pc上的时候,问题虽然参差不齐,但是基本功能还是完善的,在这单独说说它在微信下出现的情况

        微信和浏览器看网页的上网通道一样吗?问题是来自于生活中,手机某些app禁用上网,微信可以上网,浏览器禁止上网。
        在微信中点击某个网页链接,可以上网。但直接从浏览器中打不开网页(点击微信中链接,选择更多,从浏览器中打开,打开失败)。

 

从以上现象可知,

  在微信中,ios下默认是全屏的,得设置

1) 微信自身有浏览器的功能;

  webkit-playsinline="true"  /*这个属性是ios 10中设置可以让视频在小窗内播放,也就是不是全屏播放*/  
   x-webkit-airplay="true"  /*这个属性还不知道作用*/ 
   playsinline="true"  /*IOS微信浏览器支持小窗内播放*/ 

  ios下自动播放和loop是没有问题的,并且controls(视频控件)的控制也是有效的,但是安卓下,不会自动播放,并且去不掉controls,loop的时候会重新调出视频控件,贼几把丑。。。
  
  项目中我引用了

  <script src="http://api.html5media.info/1.1.8/html5media.min.js"></script>  (骚粉系。。。   哈哈哈。。。)   我们用的是MP4  ios下不能播,得ogg,这个可以解决不同格式视频不能播放的问题

  另外你要知道。。。   安卓下微信内置浏览器是QQX5内核的 贼垃圾,   ios下是Chrome内核 。。。

2) 在微信中打开链接,然后选择在浏览器中打开,此时打开网页已经不通过微信app,而是通过浏览器app,即微信中的“选择在浏览器中打开”是微信对外的一个接口通道,打开网页切换app的途径。--要了解下微信的架构

本文由金沙官网线上发布于Web前端,转载请注明出处:HTML video标签 兼容总结

您可能还会对下面的文章感兴趣: