首页 > 代码库 > 那些H5用到的技术（2）——音频和视频播放

那些H5用到的技术（2）——音频和视频播放

2024-09-04 18:06:55   220人阅读

前言
audio标签
Web Audio API
自动播放的问题
背景音乐的实现
立即播放的问题
SoundJS
video标签
播放样式的问题
格式的问题
总结

前言

正常情况，除了非常简陋的小功能H5，音乐播放是必不可少的，对于带有互动的小游戏，还必须有各种酷炫的音效，这就必须用到音频使用了，而对于视频，主要用到过场动画和品牌广告宣传。

audio标签

audio 标签是 HTML 5 的新标签。
其中controls属性可以向用户显示控件，是浏览器自带的样式，否则audio是隐藏不显示的，但是每个浏览器自带样式都不一样，例如在chrome下样子是这样
技术分享
功能也比较单一，所以一般要做播放器啥的就不会用自带的样式了…取而代之的是使用HTMLAudioElement DOM对象来进行操作，里面提供了许多方法事件给我们使用。它继承自HTMLMediaElement
PS：对于查看dom对象的方法，除了查看官方文档，也可以这样（我经常这样）
chrome浏览器里面，直接在debug窗口pause脚本，然后再监视窗口new dom元素，直接展开查看即可
技术分享技术分享

Web Audio API

Web Audio API提供了一套强大&通用的音频操控接口，可以允许用户选择音源，给音频添加效果，添加声场特效，可视化音频等等。基本上可以玩转音频！
一般情况下用不到……所以有兴趣的同学可以研究一下，以后我有机会研究过后也会补充。

自动播放的问题

正常PC客户端的浏览器audio都能够正常使用，不幸的是，在移动设备中大多数浏览器都屏蔽了autoplay属性，也就是无法实现默认的自动播放。
原因当然也很简单，移动设备流量被你这样一播放就去了一大半了，当然要保护起来。必须是要用户主动出发play方法才行。
下面是引自Safari Reference

In Safari on iPhone OS (for all devices, including iPad), where the
user may be on a cellular network and be charged per data unit,
autobuffering and autoplay are disabled. No data is loaded until the
user initiates it. This means the JavaScript play() and load() methods
are also inactive until the user initiates playback, unless the play()
method is triggered by user action.

但是产品说了，一定要给播放背景音乐！那怎么办？
1、对于android的webview

  1. // 设置4.2以后版本支持autoPlay，非用户手势促发
  2. if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN_MR1) {
  3.     webView.getSettings().setMediaPlaybackRequiresUserGesture(false);
  4. }

2、对于手机浏览器
这是我个人的测试，在手机Safari/Chrome中，如果调用play，报错audio.play can only be initiated by a user gesture.
所以，目前没有什么太好的方案，除非欺骗用户主动点击屏幕，然后播放。

3、微信浏览器
注册使用微信JS-SDK的ready事件（前提是需要有公众号，好在目前JS-SDK的权限基本都开放了）
在事件内调用play方法是没有任何问题的。

  1. wx.ready(function(){
  2.     // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
  3.     audio.play();
  4. });

理论是大多H5都是在微信传播的，所以首选方案3，其他就没有考虑那么多了。

背景音乐的实现

看起来是这个样子的，左上角一个音乐图标在旋转（很多h5都是这么干的）
技术分享
默认情况，一进入便加载背景音乐，这种情况一般不用SoundJS，在wx.ready中调用方法即可

  1. wx.ready(function(){
  2.    music_player = new Player($(‘#btn_play_music‘), "./audio/107192078.m4a");
  3. });

如果需要在正常浏览器也能使用，判断一下是否是浏览器即可

  1. //判断是否是微信浏览器
  2. function is_weixin() {
  3.     var ua = navigator.userAgent.toLowerCase();
  4.     if (ua.match(/MicroMessenger/i) == "micromessenger") {
  5.         return true;
  6.     } else {
  7.         return false;
  8.     }
  9. }

核心代码如下，具体可以见demo
CSS样式

  1.    /*音乐按钮*/
  2.     #wraper_music {
  3.         position: fixed;
  4.         width: 40px;
  5.         height: 40px;
  6.         top: 10px;
  7.         right: 10px;
  8.         z-index: 999;
  9.         border-radius: 40px;
  10.         display: block;
  11.     }
  13.     #btn_play_music {
  14.         width: 40px;
  15.         height: 40px;
  16.         cursor: pointer;
  17.         background-size: 40px 40px;
  18.     }
  20.     .c_btn_play_music_playing {
  21.         background: url(./img/music_playing.png) no-repeat;
  22.         -webkit-animation: kf_music_playing 8s linear infinite;
  23.         animation: kf_music_playing 8s linear infinite;
  24.     }
  26.     .c_btn_play_music_paused {
  27.         background: url(./img/music_stop.png) no-repeat;
  28.     }
  30.     @keyframes kf_music_playing {
  31.         0% {
  32.             -webkit-transform: rotateZ(0deg);
  33.         }
  34.         100% {
  35.             -webkit-transform: rotateZ(360deg);
  36.         }
  37.     }
  39.     @-webkit-keyframes kf_music_playing {
  40.         0% {
  41.             -webkit-transform: rotateZ(0deg);
  42.         }
  43.         100% {
  44.             -webkit-transform: rotateZ(360deg);
  45.         }
  46.     }
  48.     @media screen and (max-width: 380px) {
  49.         #btn_qtcs {
  50.             font-size: small;
  51.         }
  52.         #btn_toumiao {
  53.             font-size: small;
  54.         }
  55.     }
  57.     @media screen and (max-width: 320px) {
  58.         #btn_qtcs {
  59.             font-size: x-small;
  60.         }
  61.         #btn_toumiao {
  62.             font-size: x-small;
  63.         }
  64.     }

播放器JS

  1.     //---------start播放器代码---------
  2.     function Player(el, src) {
  3.         this.el = el;
  4.         this.isPlay = true;
  5.         if (src == undefined) {
  6.             src = ‘‘;
  7.         }
  8.         this.init(src);
  9.     }
  10.     Player.prototype = {
  11.             init: function(src) {
  12.                 var _this = this,
  13.                     attr = {
  14.                         loop: true,
  15.                         preload: "auto",
  16.                         autoplay: true,
  17.                         src: src
  18.                     };
  20.                 this._audio = new Audio;
  21.                 for (var i in attr) {
  22.                     attr.hasOwnProperty(i) && i in this._audio && (this._audio[i] = attr[i]);
  23.                 }
  25.                 this.inited = false;
  26.                 $(this._audio).on(‘durationchange‘, function() {
  27.                     // 播放加载
  28.                     if (_this._audio.duration > 1) {
  29.                         _this.inited = true;
  30.                     }
  31.                 });
  33.                 $(this._audio).on(‘ended‘, function() {
  34.                     // 播放结束
  35.                     _this._audio.currentTime = 0;
  36.                     _this.isPlay = false;
  37.                     _this._play();
  38.                 });
  40.                 if (src != ‘‘) {
  41.                     this._audio.load();
  42.                 }
  44.                 if (typeof this.el !== ‘string‘) {
  45.                     this.el.on(‘click‘, function() {
  46.                         _this._play();
  47.                     });
  48.                 }
  49.             },
  51.             _load: function() {
  52.                 this._audio.load();
  53.             },
  55.             _src: function(src) {
  56.                 this._audio[‘src‘] = src;
  57.             },
  59.             _isplay: function() {
  60.                 return this.isPlay;
  61.             },
  63.             _play: function() {
  64.                 if (!this.isPlay) {
  65.                     this._audio.play();
  66.                     if (typeof this.el !== ‘string‘) {
  67.                         this.el.removeClass(‘c_btn_play_music_paused‘);
  68.                         this.el.addClass(‘c_btn_play_music_playing‘);
  69.                     }
  70.                 } else {
  71.                     this._audio.pause();
  72.                     if (typeof this.el !== ‘string‘) {
  73.                         this.el.removeClass(‘c_btn_play_music_playing‘);
  74.                         this.el.addClass(‘c_btn_play_music_paused‘);
  75.                     }
  76.                 }
  77.                 this.isPlay = !this.isPlay;
  78.             },
  80.             _playOn: function() {
  81.                 this._audio.play();
  82.                 if (typeof this.el !== ‘string‘) {
  83.                     this.el.removeClass(‘c_btn_play_music_paused‘);
  84.                     this.el.addClass(‘c_btn_play_music_playing‘);
  85.                 }
  86.                 this.isPlay = true;
  87.             },
  89.             _playOff: function() {
  90.                 this._audio.pause();
  91.                 if (typeof this.el !== ‘string‘) {
  92.                     this.el.removeClass(‘c_btn_play_music_playing‘);
  93.                     this.el.addClass(‘c_btn_play_music_paused‘);
  94.                 }
  95.                 this.isPlay = false;
  96.             },
  98.             _volume: function(num) {
  99.                 this._audio.volume = num;
  100.             }
  101.         }
  102.         //---------end播放器代码---------

立即播放的问题

默认情况下，播放个单个背景音乐，不用太在乎加载播放延迟的问题，但是H5互动小游戏就不行了，会影响用户体验。

上面可以知道，在微信中是可以主动加载音频的，这时候new Audio(src)的音频加载方法就可以适用了，可以做到多个音频的加载，加载完成再在需要的时候播放。但实际测试手机过程中发现，即使已经加载完毕了，在代码用audio标签更换src路径，还是会有一定的延迟（PC端没有这个问题，可能是由于手机内存限制，又要从本地缓冲读取加载一次），然而就算是建立N个audio标签，然后用到的时候用该标签播放，也没有用，还是有延迟，特别是Safari中，本身就有300毫秒的延迟，这样更加明显了。当时候就没有什么头绪了，最后还是找到了神器SoundJS，在H5互动小游戏上，完美解决音频的播放问题。

SoundJS

SoundJS为我们提供了一套具有较高兼容性的简单API，来解决H5互动游戏时的音频操控问题。
当然是配合PreloadJS的效果更棒哦！

  1. //建议使用资源清单，方便管理，如果资源较多，可以考虑独立出json文件，脚本自动生成。
  2.     var manifest = [
  3.         {
  4.             id: ‘告白气球‘,
  5.             src: ‘./audio/107192078.m4a‘
  6.         }, {
  7.             id: ‘一生有你‘,
  8.             src: ‘./audio/95484.m4a‘
  9.         },
  10.     ]
  12.     var queue = new createjs.LoadQueue();
  13.     //SoundJS默认用的是复杂的Web Audio接口，这会导致加载音频变慢，所以显示注册使用html的audio即可
  14.     createjs.Sound.registerPlugins([createjs.HTMLAudioPlugin]);
  15.     //如果需要加载音频，需要注册SoundJs插件
  16.     queue.installPlugin(createjs.Sound);
  17.     queue.on("complete", function() {
  18.         createjs.Sound.play("告白气球");
  19.     }, this);
  20.     queue.on("progress", function(event) {
  21.         console.log("Progress:", queue.progress, event.progress);
  22.     });
  23.     //设置并列加载，否则每次只加载一个，太耗时
  24.     queue.setMaxConnections(5);
  25.     queue.maintainScriptOrder = true;
  26.     queue.loadManifest(manifest);

具体的操作可以查阅官方文档，由于当时项目进度比较赶，到目前我也还未研究具体的实现原理。有知道的同学麻烦留言解答一下…

video标签

video标签同样继承自HTMLVideoElement，所以用法和audio大庭相径，具体参考官方文档即可。

播放样式的问题

对于PC客户端，使用controls属性，不同浏览器的样式也是不一样的，下面是chrome的样式，如果不加controls属性，就只能通过dom控制播放了。
技术分享
悲剧的是！！手机上就又各种坑了……默认都是弹框全屏播放的。
对于android微信，是不能自动播放的，即使在wx.ready中调用代码
技术分享技术分享技术分享
播出完成竟然还有广告！
而对于IOS微信，也没广告，默认在wx.ready中是可以自动播放的。

对于一般没啥高要求的H5来说，是可以接受的，但其实用户体验确实都不太好，最好是能统一样式，没有其他任何广告！
那怎么办？感谢Avin同学分享了《视频H5のVideo标签在微信里的坑和技巧》，研究如此透彻，想必也是花了很多的时间。

最后还有一个方案，用canvas实时读video画图，但这个太耗CPU，PC端是可以考虑使用的。

格式的问题

需要注意的是，格式支持的问题，如果格式不对，要嘛就无法播放，要嘛就白屏只有声音，具体可以参考这里《Media formats supported by the HTML audio and video elements》。而且！MP4的编码其实是有很多种的，不一定是mp4就可以用， 转之前我在这个问题就郁闷了挺久，最终的方案就是使用格式工厂，编码选择H.264

总结

才第二篇，已经各种坑了，想想前端其实也不容易啊~！各种兼容调试！什么时候是个头呢？自己也有些惭愧，很多内部原理其实也没深入去了解，只是做到符合业务需求，不过目前前端混乱之治，也是挺头疼，技术变化挺快，没太多时间研究。

啥时候大家才能统一标准呢？这种感觉就好像是我买了个充电器，电源本来都是统一标准的东西，结果在我家能充电，在你家就不能充，我难道还要去研究你家为什么电源不能充电？然后再配合拆开我的充电器研究一下原理？或许还有公司再生产一个万能充电器来适应各种私自改的标准？好像没啥意义，我只是想冲个电（就像我只是想播放个音视频，咋就不能同意效果呢？）…有些浪费生命呐，但是标准终究是标准，人家就是愿意改来自己用也没啥办法……

下一篇将介绍另一个H5神器！！swiper.js！用它我们就可以实现酷炫的上下左右滑动展示特特效了！

demo地址：
https://github.com/leestar54/h5-demo/blob/master/audio%26video.html

那些H5用到的技术（2）——音频和视频播放


联系
我们