MediaElement.js带有音频标签的Flash后备

Question

我想用Flash回退实现一个音频标签.网站上没有例子,我不确定如何做到这一点.我有一个我想玩的MP3,它在Webkit浏览器上运行正常,但是它不适用于Firefox和假设IE.

我尝试通过使用示例中的Flash回退来模拟视频元素来实现类似的功能.

<audio id="audio-bloop" controls="controls">
  <source src="audio/digital-boop.mp3" type="audio/mp3" />
  <!-- Flash Fallback -->
  <object width="640" height="360" type="application/x-shockwave-flash" data="flashmediaelement.swf">
      <param name="audio" value="videos/build/flashmediaelement.swf" />
      <param id="flashvars-param" name="flashvars" value="controls=falseg&file=audio/digital-boop.mp3" />
  </object>
</audio>

但是,这不起作用.如何使用MediaElement.js为音频标签提供Flash后备支持？

编辑:

我在MediaElement.js主页上查看源代码后尝试了这个:

<audio id="audio-bloop" controls="false" preload="auto" src="audio/digital-boop.mp3" type="audio/mp3"></audio>

加上这个:

audioPlayer = new MediaElementPlayer("#audio-bloop", {
        pluginPath: '../videos/build/',
        // name of flash file
        flashName: 'flashmediaelement.swf',
       // name of silverlight file
       silverlightName: 'silverlightmediaelement.xap'
});

仍然没有成功.同样,该视频在IE9,Safari和谷歌Chrome中运行良好,但没有适用于IE6-7或Firefox和Opera.

编辑:我无法使Flash回退工作,所以目前我正在使用另一个源标记来添加文件的.wav格式.

Answer 1

当我使用 Media Element JS（版本 2.9.3）时，这就是我对 Audio 元素所做的，它适用于 IE 8+、Firefox、Safari、Chrome 的最新版本（截至撰写本文时）。

JS

<script type="text/javascript" src="/path/media-element/mediaelement-and-player.min.js"></script>

$(document).ready(function() {
    $('audio,video').mediaelementplayer();  
});

超文本标记语言

<audio id="player2" src="path.mp3" type="audio/mp3" controls></audio>

CSS

<link rel="stylesheet" type="text/css" media="screen" href="/path/media-element/mediaelementplayer.css" />

如果不支持 HTML 5，则会自动加载 Flash 后备。