Safari canPlayType() 将 .ogg 标记为 "probably" & HTML5 <audio><source> 不播放
Safari canPlayType() marks .ogg as "probably" & HTML5 <audio><source> does not play
我想为我乐队的网站创建一个 html5 音频播放器。
音频文件在数据库中存储为 mp3、ogg 和 wav 文件以支持所有主流浏览器的当前版本。
首先,一个音频文件的所有音频文件版本都加载到 html:
<audio class="song-preview" preload="none">
<source type="audio/ogg" src="/preview/trees/trees/OG/DT/OGG"></source>
<source type="audio/mpeg" src="/preview/trees/trees/OG/DT/MP3"></source>
<source type="audio/wav" src="/preview/trees/trees/OG/DT/WAV"></source>
</audio>
方法一:
Javascript 检查 audio.canPlayType(type)
浏览器支持并删除所有不受支持的 <source>
元素并添加 "probably"
源到 <audio>
的 src
属性。
Example I: (不适用于我的 iphone).
问题一:
在 <audio>
元素中嵌套 <source>
元素效果不佳。 (尽管 Safari 通常播放来自 <audio>
的 src
的给定 mp3,但如果它位于 <source>
的 src
中则不会。 sources 也会阻止移动设备播放音频。)
方法二:
Javascript 检查 audio.canPlayType(type)
的浏览器支持,并将第一个 "probably" 支持的 <source>
的 src
添加到 <audio>
的 [=19] =] 属性。之后所有 <source>
元素都被删除。
Example II: (我不是 JS 专家,但 jsbin 似乎没有正确处理 canPlayType()).
问题二:
Safari 将我的 ogg 文件分类为 "probably"
,然后不播放它们。
- 为什么
<source>
个元素的音频没有播放?
- 关于如何更好地检查音频类型浏览器支持的任何想法?
- 在
<audio>
元素和 <source>
子元素中具有相同的 src 是否正常工作?
我目前的工作"solution":
检测桌面上的 safari,如果为真,则删除所有 ogg 源。
var isSafari = /Safari/.test(navigator.userAgent) && /Apple Computer/.test(navigator.vendor);
if (isSafari) {
$(this).children("source[type!='audio/mpeg']").remove();
}
code above found here
不推荐此解决方案,因为它依赖于发送用户代理,它可以被伪造等
结合以下代码,将probably
可播放源文件合并到音频元素的src
属性中。这让 Safari 可以正确播放您的 html 音频:
$(this).children("source").each(function(){
switch ($audio_preview[0].canPlayType($(this).attr("type"))) {
case "":
$(this).remove();
break;
case "maybe":
$audio_preview.attr("src", $(this).attr("src"));
break;
case "probably":
$audio_preview.attr("src", $(this).attr("src"));
$audio_preview.children("source").remove();
break;
default:
$audio_preview.attr("src", $(this).attr("src"));
}
});
您是否尝试过更改文件扩展名?
我看到人们通过保留 minetype .ogg 获得成功,
但将音频的扩展名更改为 .oga,视频的扩展名更改为 .ogv。
<audio class="song-preview" preload="none" id="NameOfSong">
<source type="audio/ogg" src="/preview/trees/trees/OG/DT/OGa"></source>
<source type="audio/mpeg" src="/preview/trees/trees/OG/DT/MP3"></source>
<source type="audio/wav" src="/preview/trees/trees/OG/DT/WAV"></source>
</audio>
我想为我乐队的网站创建一个 html5 音频播放器。
音频文件在数据库中存储为 mp3、ogg 和 wav 文件以支持所有主流浏览器的当前版本。
首先,一个音频文件的所有音频文件版本都加载到 html:
<audio class="song-preview" preload="none">
<source type="audio/ogg" src="/preview/trees/trees/OG/DT/OGG"></source>
<source type="audio/mpeg" src="/preview/trees/trees/OG/DT/MP3"></source>
<source type="audio/wav" src="/preview/trees/trees/OG/DT/WAV"></source>
</audio>
方法一:
Javascript 检查 audio.canPlayType(type)
浏览器支持并删除所有不受支持的 <source>
元素并添加 "probably"
源到 <audio>
的 src
属性。
Example I: (不适用于我的 iphone).
问题一:
在 <audio>
元素中嵌套 <source>
元素效果不佳。 (尽管 Safari 通常播放来自 <audio>
的 src
的给定 mp3,但如果它位于 <source>
的 src
中则不会。 sources 也会阻止移动设备播放音频。)
方法二:
Javascript 检查 audio.canPlayType(type)
的浏览器支持,并将第一个 "probably" 支持的 <source>
的 src
添加到 <audio>
的 [=19] =] 属性。之后所有 <source>
元素都被删除。
Example II: (我不是 JS 专家,但 jsbin 似乎没有正确处理 canPlayType()).
问题二:
Safari 将我的 ogg 文件分类为 "probably"
,然后不播放它们。
- 为什么
<source>
个元素的音频没有播放? - 关于如何更好地检查音频类型浏览器支持的任何想法?
- 在
<audio>
元素和<source>
子元素中具有相同的 src 是否正常工作?
我目前的工作"solution":
检测桌面上的 safari,如果为真,则删除所有 ogg 源。
var isSafari = /Safari/.test(navigator.userAgent) && /Apple Computer/.test(navigator.vendor);
if (isSafari) {
$(this).children("source[type!='audio/mpeg']").remove();
}
code above found here
不推荐此解决方案,因为它依赖于发送用户代理,它可以被伪造等
结合以下代码,将probably
可播放源文件合并到音频元素的src
属性中。这让 Safari 可以正确播放您的 html 音频:
$(this).children("source").each(function(){
switch ($audio_preview[0].canPlayType($(this).attr("type"))) {
case "":
$(this).remove();
break;
case "maybe":
$audio_preview.attr("src", $(this).attr("src"));
break;
case "probably":
$audio_preview.attr("src", $(this).attr("src"));
$audio_preview.children("source").remove();
break;
default:
$audio_preview.attr("src", $(this).attr("src"));
}
});
您是否尝试过更改文件扩展名? 我看到人们通过保留 minetype .ogg 获得成功, 但将音频的扩展名更改为 .oga,视频的扩展名更改为 .ogv。
<audio class="song-preview" preload="none" id="NameOfSong">
<source type="audio/ogg" src="/preview/trees/trees/OG/DT/OGa"></source>
<source type="audio/mpeg" src="/preview/trees/trees/OG/DT/MP3"></source>
<source type="audio/wav" src="/preview/trees/trees/OG/DT/WAV"></source>
</audio>