移动端 HTML5 音频与视频问题及解决方案：用交互视频代替精灵动画

大家晚上好今天我要给你们安利下H5游戏里那些超级炫酷的音效和小动画。可能看起来有点复杂，但是其实很好玩，保证你们会喜欢哒！赶紧告诉你的朋友们这个好消息！

移动端视频播放的那些问题

关于iPad和iPhone看视频这事，iPad可以一边看一遍干其他事，而iPhone得专心致志才能看得下去。用iPhone看个短视频都不方便，只能专注于看视频了。还有，旧版的视频播放器总是自动跳到开头，想放到后台？没门儿！

iPhone上的视频播放新尝试

新款iPhone看视频超赞的，只要找到一点点地方就行。既好看又好用！最厉害的是那种直接把互动视频贯穿到平日场景里的功能，真的太炫酷了！

传统视频与交互视频的区别

看电影的话，直接看就可以了！不过要是要自己来操控或者点击链接之类的，就得用互动视频。现在这个东西进步挺大的，比如在iPhone上，手动、自动、窗口啥的功能都能搞定，所以一般情况下没啥问题。

视频代替动画的新思路

告诉大家个福利！以后用电脑看动画不担心会卡了！有了新的压缩技术，原来占用内存大的视频现在变得很小了，一点都不卡而且更神奇的是，这些视频占得空间不大，周围场景看得清清楚楚，互动起来也很顺畅！

音频播放的那些坑

每次搞新Audio音频，iOS非要用新线程，真烦人！再说，iPhone听歌就怕花了流量，得自己看好。

//修复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);
}

音频播放的解决方案

//如果为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();

搞定这事儿简单，把你自己搞定的神器放出来呗。想要自动播放？用你之前弄好的那货就成了呀。这样iPhone不能自动播的问题不就轻松解决了吗！

视频与音频的综合解决方案

说了很多次，其实没什么能难到我们，只要肯想点子，总能解决的。比如说安卓手机有问题，改改系统接口就行；苹果手机的话，直接用VideoJS就好啦；要是还是不行，那就试试Flash或者H5呗，虽然有时候Flash可能有点小毛病，但是多试几次总会找到合适的方法的！

别纠结了，玩手机看电影遇到点儿小问题很正常，学着解决就好了。希望我的话对你有帮助喔！

大家都来聊聊手机上做H5音频视频时遇到过啥问题哈？不管是迷惑还是不明白的地方，统统说出来，咱们一块儿研究一下。别忘了在评论里说说你当时咋解决的！