CODEWITHSUNDEEP
javascripthtmljquery
Neta Yamin
Neta Yamin

Reputation: 33

How to autoplay video without sound?

I'd like my video to start playing automatically when the page is launched without sound just like on this page: https://getreact.io/mobile-01/.

I've tried any possible jQuery/javascript/CSS option I could find online but I always end up with Google error that's blocking the video from autoplay unless there was an interaction.

How did they do it in the link above?

Upvotes: 2

Views: 4328

Answers (2)

mappie
mappie

Reputation: 522

In order to give users control over this, browsers often provide various forms of autoplay blocking. Browser's autoplay blocking policy is not applied to media elements when the source media does not have an audio track, or if the audio track is muted.

For eg: The browser Chrome maintains a Media Engagement Index which represents an individual's tendency to play/consume media on a site. You could check it by visiting chrome://media-engagement.

The content can be autoplayed in various ways:

  1. Attempt autoplay on mute mode always. Could be achieved in the following ways:

  • Add autoplay and muted attributes in the media tag. <video controls width="250" autoplay muted>

  • defaultMuted property could be used for this, which indicates whether the media element's audio output should be muted by default. (NOTE: The support for defaultMuted on IE is unknown.)

  • muted property could also be accessed directly and switched on before invoking the play action. This could be done as follows:

var video = document.querySelector('video')

if (video.play() !== undefined) {
  video.muted = true
  video.play().then(_ => {
    // Muted autoplay started!
  }).catch(error => {
    // Autoplay was prevented due to some error.
  });
}
  1. Attempt autoplay with audio and show the play button if autoplay action is rejected by the browser. This can be achieved by adding autoplay attribute to the media tag or by simply invoking .play() on the media element. On rejection the play button could be shown. The successful play would depend upon various forms of autoplay blocking done by the browser.
var video = document.querySelector('video')

if (video.play() !== undefined) {
  video.play().then(_ => {
    // Autoplay started with audio!
  }).catch(error => {
    // Autoplay was prevented by browser.
    // Show play button
  });
}
  1. Attempt autoplay with the audio or play on mute mode if the browser rejects autoplay with audio. You can try playing the content first, which if not successful, play the media as muted, if it is still rejected, show the play button, and wait for user action.
var video = document.querySelector('video')

if (video.play() !== undefined) {
  video.play().then(_ => {
    // Autoplay started!
  }).catch(error => {
    // Try muted autoplay
    video.muted = true
    video.play().then(_ => {
      // Muted autoplay started. Show unmute button
    }).catch(error => {
        // Autoplay was prevented.
        // Show a "Play" button so that the user can start playback.
    })
  });
}

For chrome, if the MEI of a user for a website is low, chrome does not allow autoplay, however, the content could be autoplay if in muted mode and the user has the option to chose to unmute.

Chrome autoplay policy

Upvotes: 2

Makwana Prahlad
Makwana Prahlad

Reputation: 967

try this only html it posible

<!DOCTYPE html>
<html>
<body>

<h1>The video muted attribute</h1>

<video width="320" height="240" controls muted>
  <source src="https://www.w3schools.com/tags/movie.mp4" type="video/mp4">
  <source src="https://www.w3schools.com/tags/movie.mp4" type="video/ogg">
  Your browser does not support the video tag.
</video>

</body>
</html>

Upvotes: 0

Related Questions