HLS.js 使用主播放列表时一次加载所有子片段
HLS.js loading all child fragments at one time when using master playlist
在尝试为流式音频实现 HLS.js 时,我遇到了一个奇怪的问题,即使根本没有播放音频,子播放列表的所有片段也会同时加载。如果我直接加载子播放列表,那么它会正常工作,即加载前两个片段并等待播放头,如果没有播放音频,它不会加载其他片段。
所有片段的同时加载仅在主播放列表中持续存在。
<!-- Or if you want a more recent canary version -->
<!-- <script src="https://cdn.jsdelivr.net/npm/hls.js@canary"></script> -->
<audio id="audio" controls></audio>
<script>
var audio = document.getElementById('audio');
if(Hls.isSupported()) {
var hls = new Hls();
hls.loadSource('https://neplay-test.s3.amazonaws.com/hls/master.m3u8');
hls.attachMedia(audio);
hls.on(Hls.Events.MANIFEST_PARSED,function() {
// audio.play();
});
}
// hls.js is not supported on platforms that do not have Media Source Extensions (MSE) enabled.
// When the browser has built-in HLS support (check using `canPlayType`), we can provide an HLS manifest (i.e. .m3u8 URL) directly to the video element through the `src` property.
// This is using the built-in support of the plain video element, without using hls.js.
// Note: it would be more normal to wait on the 'canplay' event below however on Safari (where you are most likely to find built-in HLS support) the video.src URL must be on the user-driven
// white-list before a 'canplay' event will be emitted; the last video event that can be reliably listened-for when the URL is not on the white-list is 'loadedmetadata'.
else if (audio.canPlayType('application/vnd.apple.mpegurl')) {
audio.src = 'https://neplay-test.s3.amazonaws.com/hls/master.m3u8';
audio.addEventListener('loadedmetadata',function() {
// audio.play();
});
}
</script>
这是网站中使用的基本入门代码。我刚刚将 url 替换为 link 到我的播放列表。
屏幕截图:带有主播放列表
截图:无主,独生子播放列表
我只希望片段仅在需要时加载,作为主播放列表的默认行为。
我之前有过你的问题,但我发现这不是 hls.js 的问题,
hls.js 默认缓冲区大小为 60m,因此如果您的子列表文件小于 60m,它将加载所有文件,您可以设置较小的缓冲区大小以节省带宽
/* 假设设置为 10m */
new Hls(maxBufferSize: 10 * 1000 * 1000);
在尝试为流式音频实现 HLS.js 时,我遇到了一个奇怪的问题,即使根本没有播放音频,子播放列表的所有片段也会同时加载。如果我直接加载子播放列表,那么它会正常工作,即加载前两个片段并等待播放头,如果没有播放音频,它不会加载其他片段。 所有片段的同时加载仅在主播放列表中持续存在。
<!-- Or if you want a more recent canary version -->
<!-- <script src="https://cdn.jsdelivr.net/npm/hls.js@canary"></script> -->
<audio id="audio" controls></audio>
<script>
var audio = document.getElementById('audio');
if(Hls.isSupported()) {
var hls = new Hls();
hls.loadSource('https://neplay-test.s3.amazonaws.com/hls/master.m3u8');
hls.attachMedia(audio);
hls.on(Hls.Events.MANIFEST_PARSED,function() {
// audio.play();
});
}
// hls.js is not supported on platforms that do not have Media Source Extensions (MSE) enabled.
// When the browser has built-in HLS support (check using `canPlayType`), we can provide an HLS manifest (i.e. .m3u8 URL) directly to the video element through the `src` property.
// This is using the built-in support of the plain video element, without using hls.js.
// Note: it would be more normal to wait on the 'canplay' event below however on Safari (where you are most likely to find built-in HLS support) the video.src URL must be on the user-driven
// white-list before a 'canplay' event will be emitted; the last video event that can be reliably listened-for when the URL is not on the white-list is 'loadedmetadata'.
else if (audio.canPlayType('application/vnd.apple.mpegurl')) {
audio.src = 'https://neplay-test.s3.amazonaws.com/hls/master.m3u8';
audio.addEventListener('loadedmetadata',function() {
// audio.play();
});
}
</script>
这是网站中使用的基本入门代码。我刚刚将 url 替换为 link 到我的播放列表。
屏幕截图:带有主播放列表
截图:无主,独生子播放列表
我只希望片段仅在需要时加载,作为主播放列表的默认行为。
我之前有过你的问题,但我发现这不是 hls.js 的问题, hls.js 默认缓冲区大小为 60m,因此如果您的子列表文件小于 60m,它将加载所有文件,您可以设置较小的缓冲区大小以节省带宽
/* 假设设置为 10m */
new Hls(maxBufferSize: 10 * 1000 * 1000);