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

[booxood]

https://aotu.io/notes/2017/01/11/mobile-video/index.html

介绍一些移动端使用 Video 标签满屏播放视频的实践经验

[meplay]

做的不错，，不过GIT上面那个地址挂了~~~

[booxood]

@meplay 代码放到单独的项目里去了，在这里可以找到

[tracyxu5298]

请问一下在安卓上用同层播放器播放视频，视频需要加载一段时间才会出现，有一定等待时间，效果很不好。这个同层浏览器在微信的兼容性你们有范例吗

[booxood]

@tracyxu5298 上面发的那个例子可以参考下。另外，也可以参考下文档 。

[tracyxu5298]

@booxood @tracyxu5298 上面发的那个例子可以参考下。另外，也可以参考下文档 。

我是参考了当前的例子，我现在的问题就是安卓点击播放时需要等待加载完成才会出现视频的问题，看你们demo没有这个问题，请问你们做了什么处理呢

[yanhuazeng]

ios 怎么让div位于视频上方，给了playsinline、webkit-playsinline、div给z-index都没用

[tracyxu5298]

@yanhuazeng ios 怎么让div位于视频上方，给了playsinline、webkit-playsinline、div给z-index都没用 直接定位position:absolute就可以了啊，不用做什么特殊处理

[yanhuazeng]

@tracyxu5298

@yanhuazeng ios 怎么让div位于视频上方，给了playsinline、webkit-playsinline、div给z-index都没用 直接定位position:absolute就可以了啊，不用做什么特殊处理

我的不行啊，播放视频后div不见了，但是可以点击（控制视频播放、暂停）http://ticcdesign.com/jinmao/index.html

[booxood]

@tracyxu5298

@booxood @tracyxu5298 上面发的那个例子可以参考下。另外，也可以参考下文档 。

我是参考了当前的例子，我现在的问题就是安卓点击播放时需要等待加载完成才会出现视频的问题，看你们demo没有这个问题，请问你们做了什么处理呢

需要等待加载完成才会出现视频 是加载整个视频还是什么？

[tracyxu5298]

@booxood

@tracyxu5298

@booxood @tracyxu5298 上面发的那个例子可以参考下。另外，也可以参考下文档 。

我是参考了当前的例子，我现在的问题就是安卓点击播放时需要等待加载完成才会出现视频的问题，看你们demo没有这个问题，请问你们做了什么处理呢

需要等待加载完成才会出现视频 是加载整个视频还是什么？ 是的，就是加载整个视频。我在Video标签也添加了preload auto的属性

[booxood]

@tracyxu5298 没遇到你说的这情况。你是在 PC端 还是 移动端？是不是网上比较慢啊，视频这类流媒体文件，一般是前面加载完一段就开始播放，之后边播放边加载。

[gto999]

IPX这样做已经不行了，会有问题

[booxood]

@gto999 IPX这样做已经不行了，会有问题

可以说下会有什么问题吗？是否有解决办法？

[psychokiller666]

安卓下的微信6.6.6无效呀

[booxood]

@psychokiller666 是的，安卓上已经不支持。参考官网文档看看有没有其他解决办法吧。

[gto999]

@booxood IPX上播放视频会变形，得用OBJECT的FIT属性来顶开，但得确保视频中心，否则放大边角上的图像会有缺失 或者做个1080*1920的图像，现在还有一个问题，安卓按框架生成的VIDEO在微信6.6.7中不播放，黑屏，具体原因得真机联调一下才能知道做了什么限制。

[booxood]

@gto999 恩，上面也已经说了不支持安卓了。因为我有一段时间没做这方面的H5了，所以，也没有更新示例了。

[iYting]

安卓上的6.6.6有解决办法吗?

[gto999]

建议IOS还是VIDEO 安卓上就用jsmpeg+TS格式的视频文件，原理就是IOS是VIDEO播，而安卓改为画布加上音频同步播放，这个在安卓低端机上会有延迟，高端机上无问题。而且不会出现在安卓上视频框突出的问题。

[cooper1x]

安卓视频左上角的箭头怎么去掉呢？

[booxood]

@cooper1x 左上角的箭头？指的是关闭按钮吗？可以试试增加视频的高度把它撑出去。

[cooper1x]

@booxood 不行吧，安卓只要播放视频，都会出现左上角的返回按钮和右上角的三个点

[gto999]

@cooper1x jsmpeg.js 用这个，原理就是画布来解决你的痛点，只不过在低端机上或许会有点问题，你先试试吧，看满足你的需求不

[booxood]

@cooper1x 噢！忘记是要白名单才行。。 如果不是白名单，确实是你说的这样。。

[Sanchez3]

微信内联播放的功能，这功能如何申请加入白名单

[Sanchez3]

@gto999 求教 安卓上就用jsmpeg+TS格式的视频文件 微信是不会h5同层播放（进入全屏模式）吗？

[gto999]

@Sanchez3 不会有问题，但低端安卓机会丢桢，这个是安卓本身的限制问题，在画布上，你找找例子吧，网上有人这么做了，抖音有一个Ｈ5就是这么搞的。

[Sanchez3]

@gto999 @Sanchez3 不会有问题，但低端安卓机会丢桢，这个是安卓本身的限制问题，在画布上，你找找例子吧，网上有人这么做了，抖音有一个Ｈ5就是这么搞的。

我发现 若不存在ip白名单的话 这个知乎做的页面应该也是 http://static.adcode.cn/20180808-zhihu-love/index.html

[gto999]

https://imququ.com/post/html5-live-player-2.html @Sanchez3

[Sanchez3]

@gto999 https://imququ.com/post/html5-live-player-2.html @Sanchez3

感谢，好好研究下