HLS音频在Safary上不稳定，但在其他主要浏览器上很好用

Question

我有三个HTML5媒体标签。一个视频和两个音频。我通过HLS流传输它们。我有以下用于HLS设置的代码。

音频在除Safari之外的主要浏览器上都很好。在macOS和iOS上，Safari的音频都不稳定。我想知道我是不是错过了设置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>

Answer 1

我有三个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音频现在是好的=)

上面的回调被替换为完全不同的逻辑，以保持视频和音频的同步。