Video Autoplay

Video autoplay solution

The simplest way to automatically play media content is to add the autoplay attribute to your <audio> or <video> element.
Code snippet
<video class="video-js vjs-fluid" controls autoplay playsinline>
Unfortunately the latest autoplay browser's policies autoplay is only allowed after user interaction (touch or click), or in desktop browsers when the user has previously played video with sound on certain domain. Also, most of browsers/devices support autoplay if video or audio is muted. Additionally iOS requires playsinline attribute.

Generally, we recommend avoiding the autoplay. However, if you insist autoplay functionality, Nuevo plugin features automatic detection of autoplay support in browser.
  • If autoplay supported - the player will play
  • If autoplay allowed only when <video> or <audio> is muted - the player will play muted content, muted button will appear over player to easily unmute content.
  • If autoplay still not allowed, the player will be paused, a big play icon will appear over player window.
Muted autoplay on mobile devices (iOS, Android) usually require "playsinline" (iOS) and "preload" (Android) attributes of <video> or <audio> element. Nuevo plugin automatically detects the presence of these attributes and apply them automatically if the autoplay parameter found.

Muted button which appears when autoplay is allowed with muted content, by default is displayed in top-right corner with 10px offset from the edge of the player. This position is controlled by .video-js .vjs-auto-mute CSS rule.
It is easy to edit the player's skin CSS stylesheet file and change left to right or top to bottom position, set other than 10px offset value from the edge.

For live video it is suggested to set video attribute "preload="auto".