Modern browsers do not support autoplay with sound unless the user or browser autoplay algorithm allows it. see https://developer.chrome.com/blog/autoplay/ .
This npm package will detect if the current website is allowed to autoplay audio and video. And gzip size is only 833B.
If you like this repo, please give it a star ⭐️.
npm i -S detect-autoplayor via CDN
<script src="https://unpkg.com/detect-autoplay@latest/dist/index.min.js"></script>
<script>
console.log(detectAutoplay)
</script>import { detectAutoplay } from 'detect-autoplay'
const video = document.createElement('video')
video.src = 'https://interactive-examples.mdn.mozilla.net/media/cc0-videos/friday.mp4'
video.playsInline = true
video.preload = 'auto'
video.load()
document.body.appendChild(video)
detectAutoplay().then((canAutoplay) => {
if (canAutoplay) {
// current website allows autoplay with sound
} else {
// current website does not allow autoplay with sound
// video can only be muted to autoplay
video.muted = true
// show a button to unmute
const btn = document.createElement('button')
btn.textContent = 'unmute'
btn.onclick = () => video.muted = false
document.body.appendChild(btn)
}
video.autoplay = true
video.play()
})detectAutoplay(timeout?: number): Promise<boolean>Detect if the current website is allowed to autoplay audio and video. If autoplay is allowed, the detection result will be cached, and the next time this function is called, will directly return true.
The parameter timeout is the detection timeout, will return false if it timeout. default is 300ms
forceDetectAutoplay(timeout?: number): Promise<boolean>Same as detectAutoplay, but it doesn't cache the result, it re-detect every time.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent