详解移动端HTML5音频与视频问题及解决方案
|
最近在研究用视频取代动画，用视频取代精灵动画，我们称这种视频叫做交互视频。 传统的精灵动画： 磁盘空间大，下载慢，尤其是在线播放，会更慢 文件太多，在线播放的时辰，太多http哀求，会导致相应慢，可能举动反常 因此，急需开拓了一套技能，用视频取代精灵动画。我们称这种视频叫做交互视频 传统视频的题目： 传统视频，只能在方块形的地区中播放 传统的视频，在iPad下是窗口播放，在iPhone下面，只能全屏播放 传统的视频，播放的时辰，必然会呈此刻最前端 交互视频具有如下特点： 在iPhone下面，不必要全屏播放，可以在一个地区中播放 交互视频可以呈此刻平凡图形工具的下面 交互视频可以带有蒙板，这样可以去掉视频的配景，让视频和平凡图形工具融为一体 总结：纯真播放用的视频，我们就将其配置为传统视频。而必要用于特定用途的视频，我们就将其配置为交互视频。 其研究已经起源有成就了，趁便总结下几年移动H5开拓中音频与视频碰着的现实题目及给出本身的办理方案 看下最后现实结果：兼容PC（>IE9） ，iphone，ipad， 安卓5.0 办理了iphone上，手动、自动、窗口化等题目，根基能用于现实出产了 右边是原视频mp4文件 左边视频取代了动画，然后支持配景蒙板结果，可以或许透出底图，支持一系列的交互操纵
H5 audio音频 每次通过 new Audio 一个音频工具，在IOS上可以看到会发生一个新的线程，这个很恶心 办理方案：new Audio一个工具，通过替代差异的音频地点，到达不多开线程的目标 在安卓上支持不给力 办理方案：低版本安卓上的题目没解，一样平常是殽杂开拓都是可以调底层接口处理赏罚的，好比 phonegap iphone上不能自动播放 办理方案：iphone上自动播放，是IOS计划的的时辰做的一个处理赏罚，貌似是为了防备自动盗用流量吧 简朴来说，必要模仿用户手动去触发才可以，以是我们必要在最开始挪用这样一段代码： 这是我项目上的，我就直接扣过来了 //修复ios 赏识器不能自动播放音频的题目 在加载时建设新的audio 用的时辰改换src即可 Xut.fix = Xut.fix||{}; if (Xut.plat.isBrowser && Xut.plat.isIOS) { var isAudio = false var fixaudio = function() { if (!isAudio) { isAudio = true; Xut.fix.audio = new Audio(); document.removeEventListener('touchstart', fixaudio, false); } }; document.addEventListener('touchstart', fixaudio, false); } 若是在body上绑定这样一个代码：通过手动触发建设一个audio工具，然后生涯在全局中 在行使的时辰如下 //假如为ios browser 用Xut.fix.audio 指定src 初始化见app.js if (Xut.fix.audio) { audio = Xut.fix.audio; audio.src = url; } else { audio = new Audio(url); } audio.autoplay = true; audio.play(); 直接替代音频工具即可，简朴来说，就是要自动就必需是用户触发建设的工具才气播 H5 video音频 视频标签也许在移动端用的很少，安卓支持太烂了，目测5.0才好转 iphone上老题目，不能自动播放（省流量啊，省你妹!!!），而且默认就是全屏控件播放 很长一段时刻里，我都没分析这个视频处理赏罚，安卓用底层，iphone直接用VideoJS，内置flash与h5切换的，flash也有支持题目 前阵子老板有个需求，我们应用动画太多了，都是精灵蹊径的组合动画，一个app下来上百M 到几百M不等 以是急需有一个方案可以压缩图片 最后的方案是回收视频取代动画，由于视频压缩技能成长了许多年，已经异常成熟了。此刻视频压缩技能，可以或许很轻松地将720P的高清影戏，压缩到10M/分钟，可能160K/秒。比图像序列的文件尺寸，至少小了几十倍。同时，在于大部门装备，都支持对视频的硬件解压缩，这样呢，视频播放的CPU耗损很低，电池耗损也很低，同时播放速率还快。纵然25帧的全屏幕播放，也能等闲地实现。 方案定下来，必要办理的几个题目就来了 1.整个视频，包罗视频中的某些物体，可以或许相应用户的点击、滑动之类的操纵 最后的现实结果也是开始gif动画所示： 视频取代了动画，然后支持配景蒙板结果，可以或许透出底图 同时也办理了，手动，自动，不全屏的题目 iphone窗口化 办理方案： 通过canvas + video标签团结处理赏罚 道理： 获取video的原图帧，通过canavs绘制到页面 这里我直接附上源码把，代码写的一样平常，可是突出了几个重点 视频取代动画 这个有点贫困，必要做交互，拖动canvas到达节制图像的目标，今朝我还没有所有写完，一样平常的公司需求也不会有这个这里简朴的描写下，同样是canvas + video处理赏罚的，可是必要有一个缓存的canvas容器做一个预处理赏罚，通过预处理赏罚，拿到每一张图的像素点，通过改变每一个像素点RBG的值，到达可以或许过滤掉配景，从而能像PNG图像一样运用，往后写好了，在宣布吧~~ （编辑：河北网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
