打开APP
userphoto
未登录

开通VIP,畅享免费电子书等14项超值服

开通VIP
ios实现video自动播放

做一个视频的微信链接 需求是打开连接在屏幕中间的视频自动播放

问了下度娘是怎么回事 

最后的得出安卓不支持 ios支持自动播放

安卓原因是怕影响用户流量的不必要浪费,代码无法解决,得需手动设置浏览器;

好现在说一下ios的解决办法

一共有三个问题

1. video标签部分ios打开后视频无法点击 没有能点的那个播放按钮 直接是一个静态的视频框。

3. 视频点击后全屏播放。要在标签行播放不要全屏。

2. 还有一个就是自动播放的问题。。。。。。

1.的解决办法 :

         给video标签添加视频控件属性 controls 然后ios的视频控件出现变得可以点击 但是想要看视频得点击播放,而且还是全屏的播放。好的进行下一个问题。

2.的解决办法:

         还是video的属性 添加  webkit-playsinline="true"  这个属性 主要是针对ios ,但是这里呢还有一个兼容ios版本的问题 现在这个只是ios9 往后的ios11等得再写一遍 playsinline="true" 语法的问题 。这样就可以解决播放时全屏的问题

3.的解决办法:

          因为咱们这个是微信的链接,需要在微信上点开进入它的浏览器 这里得需要一个插件

<script src="//res.wx.qq.com/open/js/jweixin-1.2.0.js" type="text/javascript" charset="utf-8"></script>

这个是 微信JS-SDK  一个用于微信浏览器上的插件 上面是在线引入的

然后我们以 id 为 video_one 的 video 标签来写的

  1. document.addEventListener("WeixinJSBridgeReady",function() { 
  2. document.getElementById('vido_one').play(); 
  3. }, false);

上面代码说的是对微信准备就绪时的一个内置API进行监听 来触发事件

让这个video标签进行play()播放

 

结:以上亲自踩过的坑 如有错误请指点,我会把错误的地方更新上,希望能对大家有帮助。

本站仅提供存储服务,所有内容均由用户发布,如发现有害或侵权内容,请点击举报
打开APP,阅读全文并永久保存 查看更多类似文章
猜你喜欢
类似文章
video视频标签一些设置,包括封面、播放结束后的封面、视频占满屏幕的方式、视频播放暂停、展示控制栏、触发全屏播放事件
html5标签video在谷歌浏览器下autoplay属性失效不会自动播放
使用HTML5在网页中嵌入音频和视频播放的基本方法
Video 在网页和移动端无法自动播放问题??
HTML网页中插入视频的方法小结
微信刚刚更新,可支持同时设置5个浮窗,微信的多任务处理来了!
更多类似文章 >>
生活服务
热点新闻
分享 收藏 导长图 关注 下载文章
绑定账号成功
后续可登录账号畅享VIP特权!
如果VIP功能使用有故障,
可点击这里联系客服!

联系客服