HLS 音频在 Safari 上不稳定,但在其他主要浏览器上表现良好
HLS audio is choppy on Safary, but good on other major browsers
我有三个 HTML5 媒体标签。一个视频,两个音频。我通过 HLS 流式传输它们。我有以下 HLS 设置代码。
音频在除 Safari 以外的主要浏览器上都很好。 Safari 在 macOS 和 iOS 上的音频不稳定。我想知道我是否遗漏了设置 HLS 的内容?
<video id="vid" preload="metadata" muted playsinline></video>
<audio id="human" preload="metadata" playsinline></audio>
<audio id="racoon" preload="metadata" playsinline></audio>
<script>
// HLS setup for media.
var media = document.getElementById('vid');
var mediaSrc = 'media/vid/playlist.m3u8';
// First check for native browser HLS support
if (media.canPlayType('application/vnd.apple.mpegurl')) {
media.src = mediaSrc;
// If no native HLS support, check if HLS.js is supported
} else if (Hls.isSupported()) {
var hls = new Hls();
hls.loadSource(mediaSrc);
hls.attachMedia(media);
} else {
// Alert only once. Don't alert for other video/audio tags.
alert("Your browser doesn't support HTTP Live Streaming.")
}
</script>
<script>
// HLS setup for media.
var media = document.getElementById('human');
var mediaSrc = 'media/human/playlist.m3u8';
// First check for native browser HLS support
if (media.canPlayType('application/vnd.apple.mpegurl')) {
media.src = mediaSrc;
// If no native HLS support, check if HLS.js is supported
} else if (Hls.isSupported()) {
var hls = new Hls();
hls.loadSource(mediaSrc);
hls.attachMedia(media);
}
</script>
<script>
// HLS setup for media.
var media = document.getElementById('racoon');
var mediaSrc = 'media/racoon/playlist.m3u8';
// First check for native browser HLS support
if (media.canPlayType('application/vnd.apple.mpegurl')) {
media.src = mediaSrc;
// If no native HLS support, check if HLS.js is supported
} else if (Hls.isSupported()) {
var hls = new Hls();
hls.loadSource(mediaSrc);
hls.attachMedia(media);
}
</script>
我有三个 HTML 媒体标签,一个视频和两个音频:
<video id="vid" preload="metadata" muted playsinline>
<source src="media/vid/playlist.m3u8">
<source src="media/vid.mp4" type="video/mp4">
<source src="media/vid.mov" type="video/mp4">
<source src="media/vid.webm" type="video/webm">
<source src="media/vid.ogv" type="video/ogg">
Your browser does not support the vedio tag.
</video>
<audio id="human" preload="metadata" playsinline>
<source src="media/human/playlist.m3u8">
<source src="media/human.m4a" type="audio/mpeg">
<source src="media/human.ogg" type="audio/ogg">
<source src="media/human.mp3" type="audio/mpeg">
Your browser does not support the audio tag.
</audio>
<audio id="racoon" preload="metadata" playsinline>
<source src="media/racoon/playlist.m3u8">
<source src="media/racoon.m4a" type="audio/mpeg">
<source src="media/racoon.ogg" type="audio/ogg">
<source src="media/racoon.mp3" type="audio/mpeg">
Your browser does not support the audio tag.
</audio>
我正在获取媒体元素:
var vid = document.getElementById("vid")
var audioHuman = document.getElementById("human")
var audioRaccoon = document.getElementById("racoon")
然后,我正在使用视频播放的回调:
// When video is playing, move slider and play audio.
vid.addEventListener("timeupdate", timeUpdate)
回调根据视频更新音频当前时间:
function timeUpdate() {
t = vid.currentTime
// Human voice isn't synced with video. It was a recording mistake.
// Compensate for the mistake.
var audioHumanOffset = 1.4
audioHuman.currentTime = t - audioHumanOffset
audioRaccoon.currentTime = t
}
上述回调是导致 Safari 音频不佳的原因。去掉上面的回调后,Safar 的音频好了=)
上面的回调被完全不同的逻辑所取代,以保持视频和音频同步。
我有三个 HTML5 媒体标签。一个视频,两个音频。我通过 HLS 流式传输它们。我有以下 HLS 设置代码。
音频在除 Safari 以外的主要浏览器上都很好。 Safari 在 macOS 和 iOS 上的音频不稳定。我想知道我是否遗漏了设置 HLS 的内容?
<video id="vid" preload="metadata" muted playsinline></video>
<audio id="human" preload="metadata" playsinline></audio>
<audio id="racoon" preload="metadata" playsinline></audio>
<script>
// HLS setup for media.
var media = document.getElementById('vid');
var mediaSrc = 'media/vid/playlist.m3u8';
// First check for native browser HLS support
if (media.canPlayType('application/vnd.apple.mpegurl')) {
media.src = mediaSrc;
// If no native HLS support, check if HLS.js is supported
} else if (Hls.isSupported()) {
var hls = new Hls();
hls.loadSource(mediaSrc);
hls.attachMedia(media);
} else {
// Alert only once. Don't alert for other video/audio tags.
alert("Your browser doesn't support HTTP Live Streaming.")
}
</script>
<script>
// HLS setup for media.
var media = document.getElementById('human');
var mediaSrc = 'media/human/playlist.m3u8';
// First check for native browser HLS support
if (media.canPlayType('application/vnd.apple.mpegurl')) {
media.src = mediaSrc;
// If no native HLS support, check if HLS.js is supported
} else if (Hls.isSupported()) {
var hls = new Hls();
hls.loadSource(mediaSrc);
hls.attachMedia(media);
}
</script>
<script>
// HLS setup for media.
var media = document.getElementById('racoon');
var mediaSrc = 'media/racoon/playlist.m3u8';
// First check for native browser HLS support
if (media.canPlayType('application/vnd.apple.mpegurl')) {
media.src = mediaSrc;
// If no native HLS support, check if HLS.js is supported
} else if (Hls.isSupported()) {
var hls = new Hls();
hls.loadSource(mediaSrc);
hls.attachMedia(media);
}
</script>
我有三个 HTML 媒体标签,一个视频和两个音频:
<video id="vid" preload="metadata" muted playsinline>
<source src="media/vid/playlist.m3u8">
<source src="media/vid.mp4" type="video/mp4">
<source src="media/vid.mov" type="video/mp4">
<source src="media/vid.webm" type="video/webm">
<source src="media/vid.ogv" type="video/ogg">
Your browser does not support the vedio tag.
</video>
<audio id="human" preload="metadata" playsinline>
<source src="media/human/playlist.m3u8">
<source src="media/human.m4a" type="audio/mpeg">
<source src="media/human.ogg" type="audio/ogg">
<source src="media/human.mp3" type="audio/mpeg">
Your browser does not support the audio tag.
</audio>
<audio id="racoon" preload="metadata" playsinline>
<source src="media/racoon/playlist.m3u8">
<source src="media/racoon.m4a" type="audio/mpeg">
<source src="media/racoon.ogg" type="audio/ogg">
<source src="media/racoon.mp3" type="audio/mpeg">
Your browser does not support the audio tag.
</audio>
我正在获取媒体元素:
var vid = document.getElementById("vid")
var audioHuman = document.getElementById("human")
var audioRaccoon = document.getElementById("racoon")
然后,我正在使用视频播放的回调:
// When video is playing, move slider and play audio.
vid.addEventListener("timeupdate", timeUpdate)
回调根据视频更新音频当前时间:
function timeUpdate() {
t = vid.currentTime
// Human voice isn't synced with video. It was a recording mistake.
// Compensate for the mistake.
var audioHumanOffset = 1.4
audioHuman.currentTime = t - audioHumanOffset
audioRaccoon.currentTime = t
}
上述回调是导致 Safari 音频不佳的原因。去掉上面的回调后,Safar 的音频好了=)
上面的回调被完全不同的逻辑所取代,以保持视频和音频同步。