菜单

活动端H5音频与视频难点及缓和方案

2019年11月14日 - 皇家前端

运动端H5音频与摄像难题及解决方案

2015/09/16 · HTML5 · 1
评论 ·
视频,
音频

初藳出处:
Aaron的博客   

最近在研商用摄像取代动漫,已经初叶有成果了,顺便计算下几年支付中相遇的实际上难点及给出本身的解决方案

看下最终实效:宽容PC,iphone, 安卓5.0

消除了,手动,自动,不全屏的主题素材

左臂摄像代替了动漫片,然后援助背景蒙板效果,能够透出底图

左侧是原摄像文件

图片 1

H5 audio音频

缓慢解决方案:

new 奥迪(Audi卡塔尔o二个指标,通过轮流不相同的节拍地址,达到十分的少开线程的目标

解决方案:

低版本安卓上的难题没解,平时是勾兑开辟都以能够调底层接口处理的,比方phonegap

技术方案:

iphone上自动播放,是IOS设计的的时候做的叁个拍卖,貌似是为了防卫自动盗用流量吧

简轻巧单的话,供给效法顾客手动去触发本领够

据此我们需求在最带头调用那样生龙活虎段代码:

这是本身项目上的,小编就径直扣过来了

JavaScript

//修复ios 浏览器无法自动播放音频的难点 在加载时创建新的audio
用的时候更改src即可 Xut.fix = Xut.fix||{}; if (Xut.plat.isBrowser &&
Xut.plat.isIOS) { var is奥迪o = false var fixaudio = function() { if
(!isAudio) { isAudio = true; Xut.fix.audio = new Audio();
document.removeEventListener(‘touchstart’, fixaudio, false); } };
document.addEventListener(‘touchstart’, fixaudio, false); }

1
2
3
4
5
6
7
8
9
10
11
12
13
//修复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对象,然后保留在大局中

在应用的时候如下

JavaScript

//借使为ios browser 用Xut.fix.audio 钦点src 伊始化见app.js if
(Xut.fix.audio) { audio = Xut.fix.audio; audio.src = url; } else { audio
= new 奥迪o(url); } audio.autoplay = true; audio.play();

1
2
3
4
5
6
7
8
9
10
11
//如果为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. 大器晚成体摄像,富含录制中的某个物体,能够响应顾客的点击、滑动之类的操作
  2. 在索爱上面,能够在三个窗口中播放
  3. 能够过滤掉背景,进而能像PNG图像同样使用

最后的实际效果也是发端gif动漫所示:

摄像取代了动画,然后帮忙背景蒙板效果,能够透出底图

而且也解决了,手动,自动,不全屏的难点

iphone窗口化

施工方案:

由此canvas + video标签结合处理

原理: 获取video的原图帧,通过canavs绘制到页面

此处自个儿间接依靠源码把,代码写的平时,可是特出了几个第生龙活虎

1 赞 2 收藏 1
评论

图片 2

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图