内容简介:昨天公司指派给我了一个任务,是关于视频播放后展示页面的单页应用,具体需求如下:看起来是不是特别简单粗暴,乍一看好像也是就是不到一小时的工作量,却让我足足熬到了深夜两点钟,说起来都是泪~~。这期间遇到了不少问题,我都会在下面一一列举(以下所说的浏览器均为移动端浏览器,不再一一标注)。在我开发完基本代码之后,push到githook上在手机上展示时,遇到了第一个问题: 众所周知,html中video的autoplay在移动端浏览器上基本失效(其一,移动端要有用户交互才能触发事件,如click、touch;其二
昨天公司指派给我了一个任务,是关于视频播放后展示页面的单页应用,具体需求如下:
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内核,若用户未安装浏览器,使用的是系统内核。
- IOS
Webkit。
大部分手机浏览器
Webkit。(UC的U3内核和X5内核一样,是基于webkit修改的内核)。
由上可知,在移动端开发遇到的百分之九十的问题,都是系统和机型问题。
我们回到问题本身,在使用htmlvideo标签时,我们会发现,点击播放之后首先会进入播放器占用整个屏幕,之后开始播放,再次点击视频会出现控制栏。
好,捋一捋思路。第一步,要解决脱离屏幕的播放问题。
<video poster="img/test.jpg" webkit-playsinline="true" playsinline> <source src="img/movie.mp4" type="video/mp4"> <source src="img/movie.ogg" type="video/ogg"> 您的浏览器不支持该视频格式。 </video> 复制代码
webkit-playsinline playsinline:这个属性作用是让视频播放时局域播放(不全屏,在原有位置上播放),不脱离文档流 。但这个属性需要嵌入网页的APP比如WeChat中UIwebview 的allowsInlineMediaPlayback = YES webview.allowsInlineMediaPlayback = YES,才能生效。换句话说,安卓不支持,而IOS的wechat却支持,因为APP不支持playsinline,所以安卓是默认全屏播放的。
第二步,隐藏掉控制栏。
<video x5-video-player-type="h5" id="video"> <source src="img/movie.mp4" type="video/mp4"> <source src="img/movie.ogg" type="video/ogg"> 您的浏览器不支持该视频格式。 </video> 复制代码
x5-video-player-type='h5' 启用同层H5播放器,学名叫沉浸式播放。播放的时候除去了control和微信的导航栏,只留下"X"和"<"两键。
一般来说,这种已经足够‘沉浸’了,但项目对定制化要求比较高,要求这种也不要出现。我苦思冥想,查了好多文档,方法却都大同小异。直到最后灵光一闪,放弃了通过属性或方法来限制的思路,决定用视觉遮挡来实现效果:
将video的控制栏挤出可视区域,不就相当于隐藏了控制栏嘛。
/*这是CSS*/ html,body,.main{ width: 100%; height: 100%; overflow: hidden;//隐藏 background: #FFF; box-sizing:border-box; } .videobox{ z-index: 12; position: fixed; left: 0; top: 0; width: 100%; height: 100%; } #video{ position: absolute; top: -2%; width: 100%; height: 110%; } <!--这是HTML--> <div class="videobox" ontouchmove="return false;"> <video poster="img/test.jpg" webkit-playsinline="true" playsinline x5-video-player-type="h5" x-webkit-airplay="true" id="video"> <source src="img/movie.mp4" type="video/mp4"> <source src="img/movie.ogg" type="video/ogg"> 您的浏览器不支持该视频格式。 </video> </div> 复制代码
这样就实现了播放时不得操作的需求。
三、IOS当视频被打开在safari浏览器时播放白屏。
这就牵扯到两个个问题,我们分开来说。
video标签对视频格式以及编码的支持
-
MPEG4 = 带有H.264视频编码和AAC音频编码的MPEG4文件
-
WebM = 带有VP8视频编码和Vorbis音频编码的 WebM文件
-
Ogg = 带有Theora视频编码和Vorbis音频编码的Ogg文件
如上所示,只有h264编码的MP4视频(MPEG-LA公司)、VP8编码的webm格式的视频(Google公司)和Theora编码的ogg格式的视频(iTouch开发)可以支持html5的 <video>
标签。
那么在实际代码上我们应该这么布置:
<video poster="img/test.jpg" webkit-playsinline="true" playsinline x5-video-player-type="h5" x-webkit-airplay="true" id="video"> <source src="img/movie.mp4" type="video/mp4"> <source src="img/movie.ogg" type="video/ogg"> 您的浏览器不支持该视频格式。 </video> 复制代码
首先会判断是否支持MP4,如否,判断是否支持OGG,如否,展示文字。这也是我最后选择的解决方式,简单粗暴可以早睡觉 :)。
备注:网上有文章说,用格式工厂将mp4编码转成H264即可,但我实际应用中发现H264在safari和chrome中竟然无法打开,具体原因究竟是我编码错误还是与文档冲突,暂未知晓。
iOS上播放视频,http协议中应用rang请求头
视频格式MP4是正确的,但是你的后台没有对ios的视频播放器做适配。如果想要在iOS上播放视频,那么必须在http协议中应用rang请求头。 对于有的朋友还对ios播放器http的range标记不是很懂。我再讲解下。 视频文件总长度是123456789 range是播放器要求的区间也就是客户端发送请求的时候http会带有这个标记,这个区间的值在http.headers.range中获取,一般是bytes=0-1这样的。 我们需要做的处理是返回文件的指定区间(如上面的例子,我们就应该返回0到1的字符),并添加Content-Range:btyes 0-1、Accept-Ranges:bytes、'Content-Length: 123456789','Content-Type: video/mp4'到http.headers中 复制代码
具体效果因为时间关系并没有亲自测试,有兴趣的朋友可以研究一下。
四、关于其他属性的补充
- 让你的视频充满屏幕。
#video{ object-fit: fill; } 复制代码
- 把当前的视频投放到其他支持此技术的设备上。
<video x-webkit-airplay="true"></video> 复制代码
- 在视频结束时执行事件。
$("#video").get(0).addEventListener("ended", function() { }, false); 复制代码
- 微信浏览器下实现自动播放。
document.addEventListener("WeixinJSBridgeReady", function() { video.play() }, false) 复制代码
笔记到这里就结束了,如果在文章里有哪些纰漏和错误,望您不吝赐教
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:- 我在实际项目开发中遇到的关于ElementUI各种表单验证
- html5中video在安卓与ios实际应用中遇到的问题及解决
- 算法实际应用集
- 基于实际场景的架构攻击
- 理解Go接口的实际应用
- 理解 Go 接口的实际应用
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
企业应用架构模式
Martin Fowler / 王怀民、周斌 / 机械工业出版社 / 2010-4 / 59.00元
《企业应用架构模式》作者是当今面向对象软件开发的权威,他在一组专家级合作者的帮助下,将40多种经常出现的解决方案转化成模式,最终写成这本能够应用于任何一种企业应用平台的、关于解决方案的、不可或缺的手册。《企业应用架构模式》获得了2003年度美国软件开发杂志图书类的生产效率奖和读者选择奖。《企业应用架构模式》分为两大部分。第一部分是关于如何开发企业应用的简单介绍。第二部分是《企业应用架构模式》的主体......一起来看看 《企业应用架构模式》 这本书的介绍吧!