如何防止HTML5音频在加载前下载/流式传输？

我有一个单页网站，列出了一组HTML5音频播放器。问题是，该网站已成为慢，因为以下浏览器启动predownloading内容（MP3和OGG）如何防止HTML5音频在加载前下载/流式传输？

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>

来源

2012-08-03 TheBlackBenzKid

我认为浏览器的高度和宽度都会弹出来，所以默认情况下，你可以将其保留为空，只需像下面的M1th那样控制“'和'preload =”none“”。因为这些只是浏览器呈现。 – AlphaApp 2012-08-03 22:54:13

@AlphaApp谢谢FYI。 – TheBlackBenzKid 2012-08-03 22:54:35

<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" - 可以用HTML5视频和音频HTML5使用。

所有主流浏览器都支持预加载属性，但Internet Explorer和Opera除外。

来源

2012-08-03 22:46:06 M1th

谢谢。因此，这会自动停止自动下载和预加载HTML5元素。欣赏它。 – TheBlackBenzKid 2012-08-03 22:50:35

MSIE仍然占所有网络流量的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>

这是什么确实是定义一个包含文本跨度的列表项目。当浏览者点击spanned文本时，javascript会触发并追加<audio>标记。您也可以使用onmouseover属性，以便在悬停时添加音频标签。

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

来源

2012-08-04 09:25:11 TerryE

你可以请张贴jQuery替代品，并完整解释代码，你是什么意思？ +1的努力，这使我离开'Γειασας'这是什么代码在做什么？ – TheBlackBenzKid 2012-08-04 14:39:13

我已经更新了我的答案。对不起，我只是从我的一页中拉出一行“Γειασας”就是这个例子中的一些字符数据（它是希腊语“hello”），就像“你的浏览器不支持...”是你的。 jQuery的例子是一个不同的问答，并不是我想在这里涵盖的东西。这只是我认为这是JavaScript的高级使用，如果您需要解释这个简单的操作例程，那么您的情况就不太合适。 – TerryE 2012-08-04 17:23:36

如何防止HTML5音频在加载前下载/流式传输？

回答

相关问题