如何防止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>
<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除外。
谢谢。因此,这会自动停止自动下载和预加载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+' <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,我注意到这提供了优雅的选择。
你可以请张贴jQuery替代品,并完整解释代码,你是什么意思? +1的努力,这使我离开'Γειασας'这是什么代码在做什么? – TheBlackBenzKid 2012-08-04 14:39:13
我已经更新了我的答案。对不起,我只是从我的一页中拉出一行“Γειασας”就是这个例子中的一些字符数据(它是希腊语“hello”),就像“你的浏览器不支持...”是你的。 jQuery的例子是一个不同的问答,并不是我想在这里涵盖的东西。这只是我认为这是JavaScript的高级使用,如果您需要解释这个简单的操作例程,那么您的情况就不太合适。 – TerryE 2012-08-04 17:23:36
我认为浏览器的高度和宽度都会弹出来,所以默认情况下,你可以将其保留为空,只需像下面的M1th那样控制“'和'preload =”none“”。因为这些只是浏览器呈现。 – AlphaApp 2012-08-03 22:54:13
@AlphaApp谢谢FYI。 – TheBlackBenzKid 2012-08-03 22:54:35