Safari Simultaneous Multiple Video Playback Restriction (Web)

Application Scenarios

To improve user experience, the Safari browser has strengthened restrictions on playing multiple video streams with audio simultaneously: when two videos are not muted, clicking one video to play will cause the other video to be paused.

Multiple video streams containing audio and not being muted will be subject to this browser restriction, resulting in only one video playing at a time.

Operation Steps

To solve the above problem of being unable to play multiple video streams with audio simultaneously, this section will introduce the processing steps to bypass browser restrictions:

1. Mute all videos

   When first loading the page, to bypass Autoplay policy restrictions, all videos on the page need to be muted.

   When creating the video tag, add the muted attribute. For details, please refer to Safari browser Autoplay policy.

   <video id="one" muted autoplay playsinline controls></video>
   <video id="two" muted autoplay playsinline controls></video>

   <video id="one" muted autoplay playsinline controls></video>
   <video id="two" muted autoplay playsinline controls></video>

   Or set DOM element properties.

   <video id="one" autoplay playsinline controls></video>
   <video id="two" autoplay playsinline controls></video>
   
   <script>
     const videoList = document.querySelectorAll("video")
      // Mute all videos
      videoList.forEach(video => {
          video.muted = true;
      })
   </script>

   <video id="one" autoplay playsinline controls></video>
   <video id="two" autoplay playsinline controls></video>
   
   <script>
     const videoList = document.querySelectorAll("video")
      // Mute all videos
      videoList.forEach(video => {
          video.muted = true;
      })
   </script>

2. Play all videos while muted

   While muted, play all videos. At this point, all videos on the page will be in the playing state, and no videos will be paused.

   <script>
     const videoList = document.querySelectorAll("video")
       // Play all videos while muted
       videoList.forEach(video => {
           video.play()
       })
   </script>

   <script>
     const videoList = document.querySelectorAll("video")
       // Play all videos while muted
       videoList.forEach(video => {
           video.play()
       })
   </script>

3. Unmute all videos

   While all videos are muted and playing, unmute all videos to achieve simultaneous playback of multiple videos with audio.

<button onclick="cancelMuted()">Unmute</button>
<script>
    const videoList = document.querySelectorAll("video")
    // Unmute all videos
    function cancelMuted() {
         videoList.forEach(video => {
             video.muted = false;
      })
    }
</script>

<button onclick="cancelMuted()">Unmute</button>
<script>
    const videoList = document.querySelectorAll("video")
    // Unmute all videos
    function cancelMuted() {
         videoList.forEach(video => {
             video.muted = false;
      })
    }
</script>

Complete Example

In summary, the code can be merged as:

<video id="one" autoplay playsinline controls></video>
<video id="two" autoplay playsinline controls></video>
<button onclick="cancelMuted()">Unmute</button>

<script>
    const videoList = document.querySelectorAll("video")
        // Mute all videos
        videoList.forEach(video => {
            video.muted = true;
        })
        // Play all videos while muted
        videoList.forEach(video => {
            video.play()
        })
    function cancelMuted() {
        // Unmute all videos
        videoList.forEach(video => {
            video.muted = false;
        })
    }
</script>

<video id="one" autoplay playsinline controls></video>
<video id="two" autoplay playsinline controls></video>
<button onclick="cancelMuted()">Unmute</button>

<script>
    const videoList = document.querySelectorAll("video")
        // Mute all videos
        videoList.forEach(video => {
            video.muted = true;
        })
        // Play all videos while muted
        videoList.forEach(video => {
            video.play()
        })
    function cancelMuted() {
        // Unmute all videos
        videoList.forEach(video => {
            video.muted = false;
        })
    }
</script>