扫描二维码,下载手机APP
下载安卓APP箭头
客服QQ
箭头给我发消息

客服QQ:3315713922
论坛 >编程语言 >移动端H5音频与视频问题及解决方案

移动端H5音频与视频问题及解决方案

希尔瓦娜斯发布于 2017-12-13 09:53查看:8341回复:1

        最近在研究用视频代替动画,已经初步有成果了,顺便总结下几年开发中遇到的实际问题及给出自己的解决方案

        看下最后实际效果:兼容PC,iphone, 安卓5.0

        解决了,手动,自动,不全屏的问题

        左边视频代替了动画,然后支持背景蒙板效果,能够透出底图

        右边是原视频文件

        1513129690749646.jpg

        H5 audio音频

      • 每次通过 new Audio 一个音频对象,在IOS上可以看到会产生一个新的线程,这个很恶心

解决方案:

new Audio一个对象,通过替换不同的音频地址,达到不多开线程的目的

      • 在安卓上支持不给力

解决方案:

低版本安卓上的问题没解,一般是混合开发都是可以调底层接口处理的,比如 phonegap

      • iphone上不能自动播放

解决方案:

iphone上自动播放,是IOS设计的的时候做的一个处理,貌似是为了防止自动盗用流量吧

        简单来说,需要模拟用户手动去触发才可以

        所以我们需要在最开始调用这样一段代码:

        这是我项目上的,我就直接扣过来了

image.png


        假如在body上绑定这样一个代码:通过手动触发创建一个audio对象,然后保存在全局中

        在使用的时候如下

image.png

        直接替换音频对象即可,简单来说,就是要自动就必须是用户触发创建的对象才能播

        H5 video音频

        视频标签可能在移动端用的很少,安卓支持太烂了,目测5.0才好转

        iphone上老问题,不能自动播放(省流量啊,省你妹!!!),并且默认就是全屏控件播放

        很长一段时间里,我都没理会这个视频处理,安卓用底层,iphone直接用,内置flash与h5切换的,flash也有支持问题

        前阵子老板有个需求,我们应用动画太多了,都是精灵路线的组合动画,一个app下来上百M 到几百M不等

        所以急需有一个方案可以压缩图片

        最后的方案是采用视频代替动画,因为视频压缩技术发展了很多年,已经十分成熟了。现在视频压缩技术,能够很轻松地将720P的

        高清电影,压缩到10M/分钟,或者160K/秒。比图像序列的文件尺寸,至少小了几十倍。同时,在于大部分设备,都支持对视频的

        硬件解压缩,这样呢,视频播放的CPU消耗很低,电池消耗也很低,同时播放速度还快。即使25帧的全屏幕播放,也能轻易地实现。

        方案定下来,需要解决的几个问题就来了

            整个视频,包括视频中的某些物体,能够响应用户的点击、滑动之类的操作

            在iPhone下面,可以在一个窗口中播放

            能够过滤掉背景,从而能像PNG图像一样运用

        最后的实际效果也是开始gif动画所示:

        视频代替了动画,然后支持背景蒙板效果,能够透出底图

        同时也解决了,手动,自动,不全屏的问题

        iphone窗口化

        

            解决方案:

            通过canvas + video标签结合处理

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

            

收藏(0)0
查看评分情况

全部评分

此主贴暂时没有点赞评分

总计:0

回复分享

版主推荐

    共有1条评论

    • 课课家运营团队
    • Mr ken
    • YUI
    • cappuccino
    • mr jack
    • IT宅男
    • Mright
    • 课课家软考1
    • 选择版块:

    • 标题:

    • 内容

    • 验证码:

    • 标题:

    • 内容

    • 选择版块:

    移动帖子x

    移动到: