做h5小游戏遇到的关于音频视频的坑

最新推荐文章于 2023-04-07 16:51:30 发布

原创最新推荐文章于 2023-04-07 16:51:30 发布 · 1.1k 阅读

CC 4.0 BY-SA版权

文章标签：

本文分享了使用H5开发跨平台小游戏时遇到的兼容性问题及解决方案，包括音频视频自动播放、不同格式支持、初始化加载等问题，并提供了一些针对iOS和Android平台的具体实践技巧。

用H5做小游戏最大的坑在于Android和IOS的各种不兼容性，经常其中一个好用另一个不好用，把目前遇到并解决的问题列一下以防自己以后忘记

1. 首先，ios和And都是不支持音频视频的自动播放的，因为手机设置帮助省流量的原因，所以需要做成伪自动播放，也就是引导用户去点击一些按钮或者页面，绑定touchstart进行触发

2. 虽然audio标签推荐使用ogg格式的音频，但是！！IOS的微信浏览器是不支持ogg格式的，所以老老实实的用mp3吧

3. 然后还是ios的坑，ios是不支持在init时候调用onload函数的，根本就不会运行onload里的内容，所以可以做双onload，在需要触发的情况下，再添加一个隐藏触发按钮就好了

4. 关于视频的自动播放，原理和音频同理，ios做特殊处理

document.addEventListener("WeixinJSBridgeReady", function () {
				document.getElementById('video').play();
			}, false);

还有一些，想起来再补充

--------------------分割线9.20-----------------------------

做带视频的小游戏时候，如果想让Android支持播放，可以使用画板画视频，会用到jsmpeg.min.js

使用jsmpeg.min.js时需要注意，jsmpeg.min.js读取的ts流视频必须是30帧的且宽度为偶数才可，另外一定要用ffmpeg去转码！！一定要用ffmpeg去转码！！一定要用ffmpeg去转码！！重要的事情说三遍，ffmpeg是最稳妥的

--------------------分割线10.15-----------------------------

音频是可是自动播放的，只要在onload时候加好audio标签去play就好，视频还是需要引导用户的