HTML5 音频标签 - 在 chrome/firefox 中处理 m3u8

DDS*_*DDS 5 html firefox google-chrome audio-streaming html5-audio

我在 chrome 和 firefox 上遇到 m3u8 播放列表的问题(edge 就像一个魅力)

我正在尝试发送使用 ffmpeg 转换的数据,我用于转换的行如下,同时制作 m3u8 文件:

ffmpeg -i .\european-anthem-2012.mp3 -c:a aac -b:a 64k -f segment -segment_time 15 -segment_time_delta 3 -segment_list_type m3u8 -segment_list playlist_aac.m3u8 outfile_aac-%03d.aac
Run Code Online (Sandbox Code Playgroud)

作为目标格式,我也尝试过 mp3:-c:a mp3 -b:a 64k和 vorbis:-c:a libvorbis -b:a 64k

m3u8 文件如下所示:

#EXTM3U
#EXT-X-VERSION:3
#EXT-X-MEDIA-SEQUENCE:0
#EXT-X-ALLOW-CACHE:YES
#EXT-X-TARGETDURATION:16
#EXTINF:12.004717,
outfile_aac-000.aac
#EXTINF:15.000091,
outfile_aac-001.aac
#EXTINF:15.000091,
outfile_aac-002.aac
#EXTINF:15.000091,
outfile_aac-003.aac
#EXTINF:15.000091,
outfile_aac-004.aac
#EXTINF:15.000091,
outfile_aac-005.aac
#EXTINF:15.000091,
outfile_aac-006.aac
#EXTINF:15.000091,
outfile_aac-007.aac
#EXTINF:10.495420,
outfile_aac-008.aac
#EXT-X-ENDLIST
Run Code Online (Sandbox Code Playgroud)

我使用的文件是这样的:EU Anathem

我使用的 HTML 是这样的:

<html>
<audio  id="track2" 
        src="playlist_aac.m3u8" 
        type="audio/x-mpegurl"
        >

    <p>Your browser does not support the audio element</p>

</audio>
<button onclick="document.getElementById('track2').play();">Play</button>

</html>
Run Code Online (Sandbox Code Playgroud)

使用的文件(音频片段、播放列表和 html)与 html 页面位于同一本地文件夹中

当我在边缘运行此代码(双击 HTML)时,只要单击控制台记录的按钮,一切都会在 Chrome 上运行audiotag.html:61 Uncaught (in promise) DOMException: The element has no supported sources

在 Firefox 上,错误是这样的:NotSupportedError: The media resource indicated by the src attribute or assigned media provider object was not suitable.

(预期行为是文件播放)

小智 0

这是因为 Chrome 和 Firefox 不支持 Native HLS 播放。

您无法直接使用音频或视频 HTML 标签播放 HLS(.m3u8)。您必须使用外部库来为您执行此操作。示例:hls.js、video.js、shakaplayer.js 等

顺便说一句,Safari 也支持它,因为它是由 Apple 开发的。

奖励内容:三星 (Tizen)、LG(WebOS)、海信等电视浏览器也支持原生 HLS 播放。

外部库,他们做什么,他们使用 MSE API 来播放 HLS 内容。这称为 MSE-HLS 支持。有些库(例如 dash.js)没有它。(请从文档中确认这一点)

因此,如果您希望在不支持本机 hls 播放的浏览器上播放 HLS 内容,请确保使用支持 MSE-HLS 播放的库。