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

前言
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. 

  2. if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN_MR1) {
    3. 

  3.     webView.getSettings().setMediaPlaybackRequiresUserGesture(false);
    4. 

  4. }
    5.

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. 

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

  3.     audio.play();
    4. 

  4. });
    5.

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

背景音乐的实现

看起来是这个样子的，左上角一个音乐图标在旋转（很多h5都是这么干的）

默认情况，一进入便加载背景音乐，这种情况一般不用SoundJS，在wx.ready中调用方法即可

    

  1. wx.ready(function(){
    2. 

  2.    music_player = new Player($(‘#btn_play_music‘), "./audio/107192078.m4a");
    3. 

  3. });
    4.

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

    

  1. //判断是否是微信浏览器
    2. 

  2. function is_weixin() {
    3. 

  3.     var ua = navigator.userAgent.toLowerCase();
    4. 

  4.     if (ua.match(/MicroMessenger/i) == "micromessenger") {
    5. 

  5.         return true;
    6. 

  6.     } else {
    7. 

  7.         return false;
    8. 

  8.     }
    9. 

  9. }
    10.

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

CSS样式

    

  1.    /*音乐按钮*/
    2. 

  2.     #wraper_music {
    3. 

  3.         position: fixed;
    4. 

  4.         width: 40px;
    5. 

  5.         height: 40px;
    6. 

  6.         top: 10px;
    7. 

  7.         right: 10px;
    8. 

  8.         z-index: 999;
    9. 

  9.         border-radius: 40px;
    10. 

  10.         display: block;
    11. 

  11.     }
    12. 

    13. 

  13.     #btn_play_music {
    14. 

  14.         width: 40px;
    15. 

  15.         height: 40px;
    16. 

  16.         cursor: pointer;
    17. 

  17.         background-size: 40px 40px;
    18. 

  18.     }
    19. 

    20. 

  20.     .c_btn_play_music_playing {
    21. 

  21.         background: url(./img/music_playing.png) no-repeat;
    22. 

  22.         -webkit-animation: kf_music_playing 8s linear infinite;
    23. 

  23.         animation: kf_music_playing 8s linear infinite;
    24. 

  24.     }
    25. 

    26. 

  26.     .c_btn_play_music_paused {
    27. 

  27.         background: url(./img/music_stop.png) no-repeat;
    28. 

  28.     }
    29. 

    30. 

  30.     @keyframes kf_music_playing {
    31. 

  31.         0% {
    32. 

  32.             -webkit-transform: rotateZ(0deg);
    33. 

  33.         }
    34. 

  34.         100% {
    35. 

  35.             -webkit-transform: rotateZ(360deg);
    36. 

  36.         }
    37. 

  37.     }
    38. 

    39. 

  39.     @-webkit-keyframes kf_music_playing {
    40. 

  40.         0% {
    41. 

  41.             -webkit-transform: rotateZ(0deg);
    42. 

  42.         }
    43. 

  43.         100% {
    44. 

  44.             -webkit-transform: rotateZ(360deg);
    45. 

  45.         }
    46. 

  46.     }
    47. 

    48. 

  48.     @media screen and (max-width: 380px) {
    49. 

  49.         #btn_qtcs {
    50. 

  50.             font-size: small;
    51. 

  51.         }
    52. 

  52.         #btn_toumiao {
    53. 

  53.             font-size: small;
    54. 

  54.         }
    55. 

  55.     }
    56. 

    57. 

  57.     @media screen and (max-width: 320px) {
    58. 

  58.         #btn_qtcs {
    59. 

  59.             font-size: x-small;
    60. 

  60.         }
    61. 

  61.         #btn_toumiao {
    62. 

  62.             font-size: x-small;
    63. 

  63.         }
    64. 

  64.     }
    65.

播放器JS

    

  1.     //---------start播放器代码---------
    2. 

  2.     function Player(el, src) {
    3. 

  3.         this.el = el;
    4. 

  4.         this.isPlay = true;
    5. 

  5.         if (src == undefined) {
    6. 

  6.             src = ‘‘;
    7. 

  7.         }
    8. 

  8.         this.init(src);
    9. 

  9.     }
    10. 

  10.     Player.prototype = {
    11. 

  11.             init: function(src) {
    12. 

  12.                 var _this = this,
    13. 

  13.                     attr = {
    14. 

  14.                         loop: true,
    15. 

  15.                         preload: "auto",
    16. 

  16.                         autoplay: true,
    17. 

  17.                         src: src
    18. 

  18.                     };
    19. 

    20. 

  20.                 this._audio = new Audio;
    21. 

  21.                 for (var i in attr) {
    22. 

  22.                     attr.hasOwnProperty(i) && i in this._audio && (this._audio[i] = attr[i]);
    23. 

  23.                 }
    24. 

    25. 

  25.                 this.inited = false;
    26. 

  26.                 $(this._audio).on(‘durationchange‘, function() {
    27. 

  27.                     // 播放加载
    28. 

  28.                     if (_this._audio.duration > 1) {
    29. 

  29.                         _this.inited = true;
    30. 

  30.                     }
    31. 

  31.                 });
    32. 

    33. 

  33.                 $(this._audio).on(‘ended‘, function() {
    34. 

  34.                     // 播放结束
    35. 

  35.                     _this._audio.currentTime = 0;
    36. 

  36.                     _this.isPlay = false;
    37. 

  37.                     _this._play();
    38. 

  38.                 });
    39. 

    40. 

  40.                 if (src != ‘‘) {
    41. 

  41.                     this._audio.load();
    42. 

  42.                 }
    43. 

    44. 

  44.                 if (typeof this.el !== ‘string‘) {
    45. 

  45.                     this.el.on(‘click‘, function() {
    46. 

  46.                         _this._play();
    47. 

  47.                     });
    48. 

  48.                 }
    49. 

  49.             },
    50. 

    51. 

  51.             _load: function() {
    52. 

  52.                 this._audio.load();
    53. 

  53.             },
    54. 

    55. 

  55.             _src: function(src) {
    56. 

  56.                 this._audio[‘src‘] = src;
    57. 

  57.             },
    58. 

    59. 

  59.             _isplay: function() {
    60. 

  60.                 return this.isPlay;
    61. 

  61.             },
    62. 

    63. 

  63.             _play: function() {
    64. 

  64.                 if (!this.isPlay) {
    65. 

  65.                     this._audio.play();
    66. 

  66.                     if (typeof this.el !== ‘string‘) {
    67. 

  67.                         this.el.removeClass(‘c_btn_play_music_paused‘);
    68. 

  68.                         this.el.addClass(‘c_btn_play_music_playing‘);
    69. 

  69.                     }
    70. 

  70.                 } else {
    71. 

  71.                     this._audio.pause();
    72. 

  72.                     if (typeof this.el !== ‘string‘) {
    73. 

  73.                         this.el.removeClass(‘c_btn_play_music_playing‘);
    74. 

  74.                         this.el.addClass(‘c_btn_play_music_paused‘);
    75. 

  75.                     }
    76. 

  76.                 }
    77. 

  77.                 this.isPlay = !this.isPlay;
    78. 

  78.             },
    79. 

    80. 

  80.             _playOn: function() {
    81. 

  81.                 this._audio.play();
    82. 

  82.                 if (typeof this.el !== ‘string‘) {
    83. 

  83.                     this.el.removeClass(‘c_btn_play_music_paused‘);
    84. 

  84.                     this.el.addClass(‘c_btn_play_music_playing‘);
    85. 

  85.                 }
    86. 

  86.                 this.isPlay = true;
    87. 

  87.             },
    88. 

    89. 

  89.             _playOff: function() {
    90. 

  90.                 this._audio.pause();
    91. 

  91.                 if (typeof this.el !== ‘string‘) {
    92. 

  92.                     this.el.removeClass(‘c_btn_play_music_playing‘);
    93. 

  93.                     this.el.addClass(‘c_btn_play_music_paused‘);
    94. 

  94.                 }
    95. 

  95.                 this.isPlay = false;
    96. 

  96.             },
    97. 

    98. 

  98.             _volume: function(num) {
    99. 

  99.                 this._audio.volume = num;
    100. 

  100.             }
    101. 

  101.         }
    102. 

  102.         //---------end播放器代码---------
    103.

立即播放的问题

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

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

SoundJS

SoundJS为我们提供了一套具有较高兼容性的简单API，来解决H5互动游戏时的音频操控问题。

当然是配合PreloadJS的效果更棒哦！

    

  1. //建议使用资源清单，方便管理，如果资源较多，可以考虑独立出json文件，脚本自动生成。
    2. 

  2.     var manifest = [
    3. 

  3.         {
    4. 

  4.             id: ‘告白气球‘,
    5. 

  5.             src: ‘./audio/107192078.m4a‘
    6. 

  6.         }, {
    7. 

  7.             id: ‘一生有你‘,
    8. 

  8.             src: ‘./audio/95484.m4a‘
    9. 

  9.         },
    10. 

  10.     ]
    11. 

    12. 

  12.     var queue = new createjs.LoadQueue();
    13. 

  13.     //SoundJS默认用的是复杂的Web Audio接口，这会导致加载音频变慢，所以显示注册使用html的audio即可
    14. 

  14.     createjs.Sound.registerPlugins([createjs.HTMLAudioPlugin]);
    15. 

  15.     //如果需要加载音频，需要注册SoundJs插件
    16. 

  16.     queue.installPlugin(createjs.Sound);
    17. 

  17.     queue.on("complete", function() {
    18. 

  18.         createjs.Sound.play("告白气球");
    19. 

  19.     }, this);
    20. 

  20.     queue.on("progress", function(event) {
    21. 

  21.         console.log("Progress:", queue.progress, event.progress);
    22. 

  22.     });
    23. 

  23.     //设置并列加载，否则每次只加载一个，太耗时
    24. 

  24.     queue.setMaxConnections(5);
    25. 

  25.     queue.maintainScriptOrder = true;
    26. 

  26.     queue.loadManifest(manifest);
    27.

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

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

时间： 2024-11-05 16:38:17

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

那些H5用到的技术（1）——素材加载

编码环境前言什么时候用到素材加载?loading提示,让用户等待图片的加载音频的加载利用神器PreloadJS总结 编码环境 Sublime Text 3 插件包括: Autoprefixer 自动补全CSS ColorPicker 颜色选择器 ConvertToUTF8 转码 GBK Support 支持GBK HTML-CSS-JS Prettify 前端代码格式化 SublimeCodeIntel 最好用的自动补全 Chrome 57.0.2950.5 m 用来预览以及调试 gifcam

安卓第十六天笔记-音频与视频播放

安卓第十六天笔记-音频与视频播放 音频与视频播放 1.音频 播放应用资源中的音乐 应用中的音乐一般放在res/raw目录下 /** * 播放应用资源中的音乐 * * @param v */ public void player1(View v) { // 设置播放数据源 MediaPlayer mediaPlayer = MediaPlayer.create(this, R.raw.gm); // 不需要准备,create,创建完成直接可以使用播放 mediaPlayer.start(); }

微信小程序（9）--音频及视频播放

记录微信小程序音频及视频播放. 1.audio <!-- audio.wxml --> <audio poster="{{poster}}" name="{{name}}" author="{{author}}" src="{{src}}" id="myAudio" controls loop></audio> <button type="primary&

H5 视频直播相关技术

一.移动视频直播发展 大家首先来看下面这张图: 可以看到,直播从 PC 到一直发展到移动端,越来越多的直播类 App 上线,同时移动直播进入了前所未有的爆发阶段,但是对于大多数移动直播来说,还是要以 Native 客户端实现为主,但是 H5 在移动直播端也承载着不可替代的作用,例如 H5 有着传播快,易发布的优势,同时最为关键的时 H5 同样可以播放直播视频. 大家可以看下面这张大概的实现图 完整的直播可以分为以下几块: 视频录制端:一般是电脑上的音视频输入设备或者手机端的摄像头或者麦克风,目前

新颖交互形式的H5案例浅析（技术分析）

最近我们前端这边搜集了50个比较优秀的H5. 那我这边呢,根据技术的分类,找出其中十个有代表性的案例,给大家解析一下他们技术的实现方案. 设计师也可以根据技术实现作为你们提供的素材参考 因为我主要是对技术分类的介绍,所以只取了不同技术实现的案例,同一种技术实现的不同的设计风格我就不列举出来了. 首先稍微提一下,其中包含的技术主要分为:createjs/thresjs/video内联播放/ 首先第一个呢,是之前腾讯爸爸出品的腾讯动漫的一个APP宣传的H5,这个H5是由腾讯内的TGideas团队完成

那些H5用到的技术（4）——弹幕

前言思路实现模式无限循环模式时间线模式停止显示弹幕 前言 以前玩卷轴射击游戏的时候,大量的BOSS子弹让我们无路可逃的时候,让我见识到了真正弹幕的威力,可自从A站B站火了之后,大量评论留言参与到了视频的播放中,也让我见识到了"弹幕"的威力,压根视频就没法看了--全看评论去了,就是那么好玩. 现在没有弹幕功能都不好意思说是做视频or直播网站的.而我们也不能落后呐,产品提需求了,活动H5里面弄个弹幕留言,看起来就高大上有木有啊,以前的静态留言形势都太古板啦,弹幕才能用户high起来啊!好吧

那些H5用到的技术（6）——数字滚动特效

前言原理源码使用方式补充CountUp.js 前言 会有这么一种情况,H5页面需要进行数字统计展示,以此来强调产品or工作的成果.如果只是静态显示一个数字,总是感觉生硬.对比如下: 是不是瞬间高大上了呢? 这个效果我是在开源中国上找到的 https://www.oschina.net/code/snippet_2380148_52928 感谢馒头同学. 原理 1.如上图可知,代码将每个数字生成了一竖0-9和小数点的队列.如果需要滚动999,那么就会生成3竖 2.由于有height的限制,所以通过

手机QQ会员H5加速方案——sonic技术内幕

版权声明:本文由况鹰原创文章,转载请注明出处: 文章原文链接:https://www.qcloud.com/community/article/141 来源:腾云阁 https://www.qcloud.com/community 目前移动端越多越多的网页开始H5化,一方面可以减少安装包体积,另一方面也方便运营.但是相对于原生界面而言,H5的慢速问题一定被大家所诟病,针对这个问题,目前手Q存在几种方案,最常见的便是离线包方案,但离线包存在几个问题: 滞后性,内容显示不及时: 覆盖率,很难达到10

基于Html5做音频和视频播放

设置html5标签头 <!DOCTYPE html> <html lang="en"> 视频 <video id="media" style="width: 100%;height:400px;" controls> <source src="${pageContext.request.contextPath}/file/video/${fileName}"> </vide