15

我有一个单页网站，其中列出了 HTML5 音频播放器的集合。问题是网站变慢了，因为以下浏览器开始预下载内容（mp3 和 ogg）

Internet Explorer
Google Chrome
Firefox
Safari
(probably Opera)

我使用基本代码来实现播放器。有没有办法可以阻止浏览器预下载音频文件，并且仅在它们单击播放时才起作用？

<audio controls="controls" height="32" width="300" tabindex="0">
<source type="audio/mpeg" src="http://cdn.com/track.mp3"></source>
<source type="audio/ogg" src="http://cdn.com/track.ogg"></source>
</audio>
4

2 回答 2

32 
<audio controls="controls" preload="none">
  <source src="song.ogg" type="audio/ogg" />
  <source src="song.mp3" type="audio/mpeg" />
  Your browser does not support the audio element.
</audio>

注意 - preload="none"- 可以与 VIDEO HTML5 和 AUDIO HTML5 一起使用。

除了 Internet Explorer 和 Opera，所有主流浏览器都支持 preload 属性。

于 2012-08-03T22:46:06.130 回答
3

MSIE 仍占所有 Web 流量的 30% 左右，因此preload="none"只是部分解决方案。在我遇到此问题的几页中，我在页眉中添加了一个小脚本：

<script type="text/javascript">
function addAudio(t) {
  var l=t.innerHTML.length;
  var audioName=t.parentElement.id;
  if( t.children.length==0) {
    t.innerHTML=t.innerHTML+'&nbsp; &nbsp; <audio controls="controls"><source src="'+
      audioName+'.ogg" type="audio/ogg" /><source src="'+
      audioName+'.mp3" type="audio/mp3" /> No audio tag support</audio>';
  }
}
</script>

然后使用 DHMTL 动态添加音频标签，例如：

<li id="2_Lesson_1_Hello"><span onclick="addAudio(this)">Γεια σας</span></li>

它的作用是定义一个包含文本跨度的列表项。当浏览者点击跨区文本时，javascript 会触发并附加<audio>标签。您也可以使用该onmouseover属性，以便在悬停时添加音频标签。

preload如果您愿意，可以将该属性添加到生成的代码中。这是一种简单的方法，但如果您已经在网页上使用jQuery，我注意到这提供了优雅的替代方案。

于 2012-08-04T09:25:11.087 回答