@flosportsinc/ng-video-autoplay

Simple way to ensure videos autoplay even if they need to be muted first.

Usage no npm install needed!

<script type="module">
  import flosportsincNgVideoAutoplay from 'https://cdn.skypack.dev/@flosportsinc/ng-video-autoplay';
</script>

README

FloVideoAutoplay

Simple way to ensure videos autoplay even if they need to be muted first.

Installation

npm i @flosportsinc/ng-video-autoplay

import { FloVideoAutoplayModule } from '@flosportsinc/ng-video-autoplay'

@NgModule({
  imports: [
    ...
    FloVideoAutoplayModule,
    ...
  ]
})
export class AppModule { }

Single video without clickable reference

The video will always play, but start muted if the browser has yet to build trust with the domain.

<video floVideoAutoplay src="http://techslides.com/demos/sample-videos/small.mp4"></video>

<!- You can also disable it when needed ->
<video [floVideoAutoplay]="false" src="http://techslides.com/demos/sample-videos/small.mp4"></video>

Single video with clickable references

floVideoAutoplay can use an element reference. It automatically bind to its click events and show and hide the element if the video is muted. This minimal approach allows for full customization. In future version there will likley be classes that are applied instead the current on/off approach in order to support animations.

<div>
  <button #unmute>Click to unmute</button>
  <button #play>Click to play</button>
  <video floVideoAutoplay
    [floVideoAutoplayClickUnmuteRef]="unmute"
    [floVideoAutoplayClickPlayRef]="play"
    src="http://techslides.com/demos/sample-videos/small.mp4">
  </video>
</div>

Multi video without clickable reference

Autoplay all child videos.

<div floVideoAutoplay>
  <video #floVideoAutoplay src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/WeAreGoingOnBullrun.mp4" width="300" playsinline controls></video>
  <video #floVideoAutoplay src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/WeAreGoingOnBullrun.mp4" width="300" playsinline controls></video>
</div>

Multi video with clickable reference

Autoplay all child videos. References a clickable element to unmute when videos are started muted. The click event will only affect a single video in this case (instead of unmuting them all)

<div floVideoAutoplay [floVideoAutoplayClickUnmuteRef]="unmute" [floVideoAutoplayClickPlayRef]="play">
  <button #unmute>Click to unmute</button>
  <button #play>Click to play</button>
  <video #floVideoAutoplay src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/WeAreGoingOnBullrun.mp4" width="300" playsinline controls></video>
  <video #floVideoAutoplay src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/WeAreGoingOnBullrun.mp4" width="300" playsinline controls></video>
</div>