H5 video在微信中踩坑记

最近开发的项目中遇到video播放的需求,结果在微信中着实让人折腾了一把,今天做个总结,会有一些不完善的,后续发现新的内容会及时的学习总结。

IOS:

在ios上app都是使用自带的的浏览器进行页面的渲染,video播放器的效果是同意的,只要考虑不同版本是否有不一致的地方,在ios上 播放视频会弹出全屏效果。播放器上下有的系统默认的控制栏,可以控制视频的播放进度、音量以及暂停或继续播放,播放视频时,视频会 “浮” 在页面上,页面上的所有元素都只能是在视频下面,设置z-index也是没有任何的效果的。ios上微信浏览器也是调用的系统的。

但是现在的需求是要求视频内联播放,不要全屏播放,好了。google大法开始了。
好的一点是在IOS 10 Safari 中video新增了playsinline属性,可以使视频内联播放。

webkit.blog中看到令人欣慰的话术:

On iPhone, <video playsinline> elements will now be allowed to play inline, and will not automatically enter fullscreen mode when playback begins.
<video> elements without playsinline attributes will continue to require fullscreen mode for playback on iPhone.
When exiting fullscreen with a pinch gesture, <video> elements without playsinline will continue to play inline.
A note about the playsinline attribute: this attribute has recently been added to the HTML specification, and WebKit has adopted this new attribute by unprefixing its legacy webkit-playsinline attribute. This legacy attribute has been supported since iPhoneOS 4.0, and accordance with our updated unprefixing policy, we’re pleased to have been able to unprefix webkit-playsinline. Unfortunately, this change did not make the cut-off for iOS 10 Developer Seed 2. If you would like to experiment with this new policy with iOS Developer Seed 2, the prefixed attribute will work, but we would encourage you to transition to the unprefixed attribute when support for it is available in a future seed.

在查资料的同时有网友说会出现这样的问题:iOS 10 之前的版本支持 webkit-playsinline,但是加了这个属性后,在 iOS 9 的上出现只能听到声音不能看到画面的问题。我还没遇到,不过先记下来,以备不时只需,网友的解决方案是这样的:

<video id="video" class="video" preload="auto" playsinline src="http://wqs.jd.com/promote/superfestival/superfestival.mp4" width="1" height="1" type="video/mp4"></video>

iphone-inline-video一起使用,
不过在这次的项目中我使用的是video.js这个第三方的插件,

基本代码如下
这里写图片描述

引用了video.js,加了playsinline,webkit-playsinline在ios最新的系统上确实是可以做到在内联的播放。(这次是一个m3u8格式的,关于格式的问题,以及视频流的问题,后续在研究),但是自动播放的问题还是没解决或者是还没发现。

在安卓上,自动播放的问题也没有解决,播放器也是强制的,自动播放时禁止的,这是产品策略,这是官方的说法。官方其中一点说,禁止自动播放也是为了防止浪费流量(很人性,本人讨厌自动播放);

发布了9 篇原创文章 · 获赞 13 · 访问量 5万+
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 深蓝海洋 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览