Safari Play Multiple Video Restrictions at the Same Time (Web)

Application Scenarios

In order to improve the user experience, the Safari browser has strengthened the restriction of playing multiple video streams with audio at the same time: when two videos are not in a muted state, after clicking one video to play, the other video will be paused.

If multiple video streams contain audio and are not muted, they will be restricted by the browser, resulting in only one video being played at the same time.

Implementation Steps

In order to solve the above-mentioned problem that multiple video streams with audio cannot be played at the same time, this article will introduce the processing steps to bypass browser restrictions:

1. Mute All Videos

When the page is loaded for the first time, in order to bypass the restrictions of the Autoplay policy (Autoplay), all videos on the page need to be muted.

When creating the video tag, add the muted attribute. For details, please refer to Browser AutoPlay Strategy.

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

Or set DOM element attributes.

<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 When Muted

In the mute state, all videos will be played. At this time, all videos on the page will be in the playing state, and there will be no pauses in some videos.

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

3. Unmute All Videos

When all the videos are muted and playing, unmute all the videos to play multiple videos with audio at the same time.

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

In summary, the code can be combined into:

<video id="one" playsinline controls></video>
<video id="two" 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 in mute state
        videoList.forEach(video => {
          video.play()
        })
    function cancelMuted() {
    // Cancel the mute effect of all videos
      videoList.forEach(video => {
        video.muted = false;
      })
    }
</script>