Video Autoplay

Video autoplay solution using Nuevo plugin

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 conent.
  • If autoplay still not allowed, the player will be paused, big play icon will appear over player window.
Muted autoplay on mobile devices (iOS, Android) usually require "playsinline" (iOS) and "preload" (Android) attributes for <video> or <audio> element. Nuevo plugin auomatically detects the presence of these attributes and apply them automatically if 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 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.