Html 使用 html5 播放 m3u 播放列表

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/23058202/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 01:32:56  来源:igfitidea点击:

Playing m3u playlist with html5

htmlaudiomobileplaylistm3u

提问by Abu Roma?ssae

I've created a very simple and basic html5 audio player, actually not more than:

我创建了一个非常简单和基本的 html5 音频播放器,实际上不超过:

<audio src="[url-to-m3u]" controls>

but I am facing two problems, this simple audio tag is working on Chrome, but not in Safari 7 the second is that it is not working on my iPhone iOS7, nor HTC Android 2.3

但我面临两个问题,这个简单的音频标签在 Chrome 上运行,但在 Safari 7 中不起作用,第二个是它不适用于我的 iPhone iOS7,也不适用于 HTC Android 2.3



the playlist elements are mp3 with Content Type: audio/mpeg

播放列表元素是 mp3,内容类型为:audio/mpeg

回答by Arnaud Leyder

I guess the support for m3u file format is going to be scattered in HTML5 media compatible browser.

我猜对 m3u 文件格式的支持将分散在 HTML5 媒体兼容浏览器中。

It should play on iOS: try to add mime-type audio/mpegURL or application/x-mpegURL to your server (if not already done) AND our source tag.

它应该在iOS 上播放:尝试将 mime 类型的 audio/mpegURL 或 application/x-mpegURL 添加到您的服务器(如果尚未完成)和我们的源标签。

<audio controls>
    <source src="[url-to-m3u]" type="audio/mpegURL" />
</audio>

You need to check for browser support both for mp3 and m3u with the canPlayTypemethod - example:

您需要使用canPlayType方法检查浏览器对 mp3 和 m3u 的支持- 例如:

var supportsMp3 = false;
var myAudio = document.createElement('audio');
if (myAudio.canPlayType('audio/mpeg') !== ""){supportsMp3 = true;}

You need to check for audio/mpegURL and application/x-mpegURL and audio/mpeg before going ahead and deliver the m3u file. I would suggest you use a fallback for your case scenario as not all browsers are going to support m3u files.

在继续并交付 m3u 文件之前,您需要检查 audio/mpegURL 和 application/x-mpegURL 和 audio/mpeg。我建议您针对您的案例场景使用回退,因为并非所有浏览器都将支持 m3u 文件。

For example m3u file does not appear in the supported media matrix for Android.

例如 m3u 文件不会出现在Android 支持的媒体矩阵中

EDIT:you can use JW playerthat supports m3u files for wider browser coverage. Otherwise try to find an open source/free flash playeras a fallback.

编辑:您可以使用支持 m3u 文件的JW 播放器来扩大浏览器覆盖范围。否则,尝试找到一个开源/免费的 Flash 播放器作为后备。

Also your m3u file can be parsed using JS to extract the mp3 URLs (m3u files are normally only referencing playlist of items). After that it is just dynamic changing of the src of the audio tag with the correct mp3 URL.

此外,您的 m3u 文件可以使用 JS 解析以提取 mp3 URL(m3u 文件通常仅引用项目的播放列表)。之后,它只是使用正确的 mp3 URL 动态更改音频标签的 src。