html5中video在安卓与ios实际应用中遇到的问题及解决 | 您所在的位置:网站首页 › ios微信浏览器内核切换页面 › html5中video在安卓与ios实际应用中遇到的问题及解决 |
昨天公司指派给我了一个任务,是关于视频播放后展示页面的单页应用,具体需求如下: 1)用户在进入页面后视频开始自动播放,期间不得操作; 2)视频播放完成后顺滑切换到主体页。看起来是不是特别简单粗暴,乍一看好像也是就是不到一小时的工作量,却让我足足熬到了深夜两点钟,说起来都是泪~~。这期间遇到了不少问题,我都会在下面一一列举(以下所说的浏览器均为移动端浏览器,不再一一标注)。 一、video的默认显示在我开发完基本代码之后,push到githook上在手机上展示时,遇到了第一个问题: 众所周知,html中video的autoplay在移动端浏览器上基本失效(其一,移动端要有用户交互才能触发事件,如click、touch;其二,ios协议蜂窝数据下不得开启音视频的自动播放),所以我在加载后取巧的加了一个悬浮播放图标,引导用户点击开始业务流程。 但可能因为内核不同,在微信浏览器/safari/chrome上默认展示的poster各有不同,chrome应用了默认行为截取了视频第一帧作为显示,微信浏览器和safari却显示空白,效果就是孤零零的播放图放在一张白纸上。解决方案是:通过canvas截取视频第一帧作为默认显示的图片: var cut = function() { let canvas = document.createElement("canvas");//创建画布 canvas.width = video.videoWidth * scale; canvas.height = video.videoHeight * scale;//设定宽高比 canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);//将视频此刻帧数画入画布 let img = document.createElement("img"); img.src = canvas.toDataURL("image/png"); Dom.appendChild(img);//写入到Dom }; video.addEventListener('loadeddata',cut);//在视频帧数已加载时执行截取 二、video控制栏的隐藏html文档里写有,如果controls属性不出现,则默认不显示,但其实在实际应用中,浏览器一般都是调用默认播放器进行播放,再加上双端差异,实际展示效果更是精彩纷呈。说到这里,要写一下目前各个浏览器的内核情况: 微信浏览器 安卓微信6.1版本以上的android用户,都是使用的QQ浏览器的X5内核。 5.4-6.1之间的版本,若用户安装了QQ浏览器就是使用的X5内核,若用户未安装浏览器,使用的是系统内核。 IOSWebkit。 大部分手机浏览器 Webkit。(UC的U3内核和X5内核一样,是基于webkit修改的内核)。 由上可知,在移动端开发遇到的百分之九十的问题,都是系统和机型问题。 我们回到问题本身,在使用htmlvideo标签时,我们会发现,点击播放之后首先会进入播放器占用整个屏幕,之后开始播放,再次点击视频会出现控制栏。 好,捋一捋思路。第一步,要解决脱离屏幕的播放问题。 您的浏览器不支持该视频格式。webkit-playsinline playsinline:这个属性作用是让视频播放时局域播放(不全屏,在原有位置上播放),不脱离文档流 。但这个属性需要嵌入网页的APP比如WeChat中UIwebview 的allowsInlineMediaPlayback = YES webview.allowsInlineMediaPlayback = YES,才能生效。换句话说,安卓不支持,而IOS的wechat却支持,因为APP不支持playsinline,所以安卓是默认全屏播放的。 第二步,隐藏掉控制栏。 您的浏览器不支持该视频格式。x5-video-player-type='h5' 启用同层H5播放器,学名叫沉浸式播放。播放的时候除去了control和微信的导航栏,只留下"X"和" |
CopyRight 2018-2019 实验室设备网 版权所有 |