微信内置浏览器 如何小窗不全屏播放视频?

需求是这样的我只做了一个网页,里面需要播放一段介绍视频,视频格式采用了主流的m3u8格式为了能够在多平台兼容播放,我使用了一个第三方的JS播放器不过在微信内置浏览器中实测发现,以IOS为例,所有视频都必须全屏打开播放,调用IOS内置的播放器进行播放。我在观察了优酷,乐视,土豆等视频网站的视频后,发现他们可以在微信内做到局部小窗播放视频,请问如何能够达到这种效果?实现的原理是什么?
关注者
185
被浏览
58,732

35 个回答

<video  src=""  controls="" x5-playsinline="" playsinline="" webkit-playsinline="" poster="" preload="auto"></video>

这样写就可以了 安卓微信 ios下通用 测试ok的请把我顶上去 避免大家浪费时间

......start 更新:2018/1/11.......

来自凹凸实验室的一篇分析和总结(代表大家感谢凹凸团队的奉献):

aotu.io/notes/2017/01/1

视频H5のVideo标签在微信里的坑和技巧aotu.io图标

视频H5のVideo标签在微信里的坑和技巧


......end 更新:2018/1/11.......


.........................start我是一条没有梦想的更新线2017/1/9...............................................................


在最新的ios微信6.5.3及其之后的版本中,webview默认支持小窗播放,

开发者需要特别注意小窗播放需要前端同时适配iOS10和iOS10以下的低版本

适配建议:需要完全按照以下代码设置video标签才可同时兼容不同的iOS版本

<video webkit-playsinline playsinline> </video>


.........................end我是一条没有梦想的更新线2017/1/9...............................................................


分析webkit-playsinline为什么不能在微信内核中起作用的原因:


1:在不考虑微信内核的浏览器中用html5的video方式播放视频时:在ipad上是默认原来大小的,而在iphone上是默认全屏播放的。android在此飘过(没测试过),..


2:来两张图片说明一下或许能有所帮助:


a:



b:




最后总结一下:

1:知友说 webkit-playsinline 可以解决这个问题.但是经过个人以及各位知友的验证该方法在ios 系统并且是在非微信自带的浏览器的内核中能够解决。Android 然并卵。


栗子(html):<video id="player" width="480" height="320" webkit-playsinline>


2:微信这样的做法貌似要将做微信视频业务的开发者赶尽杀绝啊(做开发的最不能容忍的就是放弃曾向需求妹妹许诺过可以实现的功能,别问我为什么......因为爱情,怎么能轻易放弃.....)


3:既然微信团队对视频来源进行了域名限制,那么可以考虑把视频挂在腾讯视频上,然后再引用腾讯视频提供的视频地址在微信中进行播放,这样也就巧妙地避开了种种限制(发现许多公众号中的视频的右上角都有”腾讯视频“这样一个标签),实现业务与爱情的双丰收...


4:作为开发者也需要谅解微信平台制定的规则,要求把视频挂在腾讯视频提供的平台下这样的做法个人觉得有利于维护以及给网名提供一个良好的网络环境,如果监管措施做到位的话......