html5中video在安卓与ios实际应用中遇到的问题及解决_IOS开发_网络编程_码蚁之家_www.codes51.com
返回首页
专题
网络编程
ASP教程 .NET教程 PHP教程 JSP教程 C#教程 Java教程 Delphi教程 VB教程 C/C++教程 Android开发 IOS开发 Windows Phone开发 Python教程 Ruby教程 移动开发 其他编程教程
网页制作
HTML教程 CSS教程 Dreamweaver教程 FrontPages教程 Javascript教程 web前端
数据库
SqlServer MySql Oracle Access DB2 SQLite 其他数据库
图形设计
photoshop教程 Fireworks教程 CorelDraw教程 Illustrator教程 AutoCad教程 FLASH教程
操作系统
Windows xp教程 Windows 7教程 Windows 8教程 Windows 2003教程 Windows Server 2008教程 Linux教程 Windows 10
网站运营
建站经验 SEO优化 站长心得 网赚技巧 网站推广 站长故事
手机学院
手机速递 安卓教程 iphone教程 手机评测 手机技巧 手机知识 手机应用 手机游戏 手机导购
网店宝典
开店指导 开店经验 网店装修 网店推广 网店seo 网购技巧
软件教程
办公软件 系统工具 媒体工具 压缩工具 图文处理 文件管理
范文之家
自我介绍 自我鉴定 写作模板 合同范本 工作总结 贺词祝福语 演讲致辞 思想汇报 入党申请书 实习报告 心得体会 工作计划 简历模板 工作报告 导游词 评语寄语 口号大全 策划书范文
信息工程
软件工程 企业开发 系统运维 软件测试
移民之家
移民动态 移民政策 移民百科 移民生活 技术移民 投资移民
知识大全
母婴 数码 摄影 装修 美文 常识 时尚 婚嫁 美食 养生 旅游 兴趣 职场 教育 文学 健康
问答大全
电脑网络 手机数码 QQ专区 生活 游戏 体育运动 娱乐明星 休闲爱好 文化艺术 社会民生 教育科学 健康医疗 商业理财 情感家庭 地区问题 其他
编程问答
IOS Android .NET Java C/C++ Delphi VC/MFC 其他语言 PHP MSSQL MYSQL Oracle 其他数据库 Web开发 Windows Linux 硬件/嵌入开发 网络通信 移动开发 云计算 企业IT 游戏开发
笑话大全
幽默笑话 爱情笑话 成人笑话 校园笑话 爆笑笑话 综合笑话 古代笑话 现代笑话 国外笑话

html5中video在安卓与ios实际应用中遇到的问题及解决(1/2)

来源:互联网  时间:2018/10/11 13:32:08

昨天公司指派给我了一个任务,是关于视频播放后展示页面的单页应用,具体需求如下:

  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, 00, 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标签时,我们会发现,点击播放之后首先会进入播放器占用整个屏幕,之后开始播放,再次点击视频会出现控制栏。

好,捋一捋思路。第一步,要解决脱离屏幕的播放问题。

"img/test.jpg" webkit-playsinline="true" playsinline>
    <source src="img/movie.mp4" type="video/mp4">
    <source src="img/movie.ogg" type="video/ogg">
    您的浏览器不支持该视频格式。
 

webkit-playsinline playsinline:这个属性作用是让视频播放时局域播放(不全屏,在原有位置上播放),不脱离文档流 。但这个属性需要嵌入网页的APP比如WeChat中UIwebview 的allowsInlineMediaPlayback = YES webview.allowsInlineMediaPlayback = YES,才能生效。换句话说,安卓不支持,而IOS的wechat却支持,因为APP不支持playsinline,所以安卓是默认全屏播放的。

第二步,隐藏掉控制栏。

"h5"   id="video">
    <source src="img/movie.mp4" type="video/mp4">
    <source src="img/movie.ogg" type="video/ogg">
    您的浏览器不支持该视频格式。
 

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%;
}

<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的

那么在实际代码上我们应该这么布置:

"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">
    您的浏览器不支持该视频格式。
 

首先会判断是否支持MP4,如否,判断是否支持OGG,如否,展示文字。这也是我最后选择的解决方式,简单粗暴可以早睡觉 :)。

备注:网上有文章说,用格式工厂将mp4编码转成H264即可,但我实际应用中发现H264在safari和chrome中竟然无法打开,具体原因究竟是我编码错误还是与文档冲突,暂未知晓。

iOS上播放视频,http协议中应用rang请求头

引用了CSDN一位版主业余草的回复

视频格式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中


上一篇利用函数组合提升代码可维护性
下一篇iOS封装一个简单的曲线图表视图
明星图片
相关文章
《 html5中video在安卓与ios实际应用中遇到的问题及解决》由码蚁之家搜集整理于网络,
联系邮箱:mxgf168#qq.com(#改为@)