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 的音频好了=)

上面的回调被完全不同的逻辑所取代,以保持视频和音频同步。