0

i'm working on spa where i have to show banner video on top of the website. when loading video at initial phase is there any way to unmute the audio of video.

I have tried to unmute video and override but it's not working on chrome browser. i have read article about chrome autoplay video blocking but still is there anyway to unmute video.

tried below code

<video autoplay preload="auto" muted onloadedmetadata="this.muted = true" oncanplay="this.play()" id="video-player">
<source src="https://###########" type="video/mp4" crossorigin="anonymous">
</video>

let audioPlayer = <HTMLVideoElement> document.getElementById('video-player');
audioPlayer.addEventListener('play', () => {
  // audioPlayer.muted = true;
  audioPlayer.play();
  audioPlayer.muted = false;
});

audioPlayer.addEventListener('ended', () => {
  this.showPlayBtn = true;
})

i need to auto play video with audio in all browser.

Any help will be appreciated. Thanks in advance!

Rohit
  • 71
  • 11
  • Why don't you setInterval and call it as soon as the video gets over. – Kedar Kulkarni Oct 30 '19 at 08:45
  • Chromium automatically disables audio playback unless it was initiated by an user action or you've previously played a video on the same site, there are a few workarounds such as playing a small empty audio file first – Checkium Oct 30 '19 at 09:21
  • Does this answer your question? [How to make audio autoplay on chrome](https://stackoverflow.com/questions/50490304/how-to-make-audio-autoplay-on-chrome) – Checkium Oct 30 '19 at 09:27
  • problem is at initial loading video is not playing in chrome browser – Rohit Oct 30 '19 at 09:40
  • @Checkium no at initial loading chrome is blocking autoplay video but when you use muted its working fine. But i want to play video and audio at the same time – Rohit Oct 30 '19 at 09:47
  • @Rohit exactly, chrome blocks autoplay audio by default like I explained, read the question I linked – Checkium Oct 30 '19 at 09:49
  • @Checkium thanks for the help... i have solve my problem by using muted in video tag and added audio button for unmute video – Rohit Nov 02 '19 at 10:02

1 Answers1

0

If you are using Angular, you could use this external library Videogular. It's very easy to use and you could configure almost everything related to the video player.

Here you can see a live example of the use of this library live-demo

All you have to do to "autoplay" the video is to put the parameter "autoplay" to true as you can see below:

<video [vgMedia]="media" #media id="singleVideo" preload="auto" autoplay="true" controls>

You can try this in the live-demo adding this parameter.

Darwin Gonzalez
  • 175
  • 1
  • 9
  • i had tried but still getting same problem autoplay is not working in chrome – Rohit Oct 30 '19 at 09:37
  • `` – Rohit Oct 30 '19 at 09:38
  • according to the chrome policy at the initial loading of video, only auto play will work not both( audio and video at the same time ). i have created the audio button if user want to listen audio of that video then only audio will play. It solve my problem. – Rohit Jan 09 '20 at 06:34