Playing video in angular - html

I am working on a angular application and I am using video tag of html 5 in my code
to play video. Code is as follows::
<video autoplay>
<source src="videos/video.mp4" type="video/mp4">
</video>
In this I just want my video to play once and on completion of video I want to route to next component. How can I do this?


Just put on your video tag (ended)="onEnd()"
Then in onEnd inside your component function you just do the router navigation


Add an event in video-tag
<div *ngIf='condition'>
<video autoplay (ended)='route()'>
<source src="videos/video.mp4" type="video/mp4">
</video>
</div>
<button (click)='OnClick()'>Play</button>
In controller.ts
condition = false;
onClick() {
this.condition = true;
}
In route() do the programmatic route.

Related

Angular 8 - When src changes programatically HTML video element does not change the video

I have a MP4 video playing in the background in my web app. However when I update the bindings and change the video source the video stays the same
<video autoplay loop>
<source [src]="videoSrc" type="video/mp4">
</video>
{{videoSrc}}
My TS code:
this.videoSrc = "video.mp4";
...
interval(10000).subscribe(x => {
this.videoSrc = "otherVideo.mp4";
});
Why aren't the bindings being updated?

You should bind the src property in the video tag instead of binding the source tag.
<video autoplay loop muted playsinline="true" webkit-playsinline="true" [src]="videoSrc" type="video/mp4">
</video>
Check this stakblitz https://stackblitz.com/edit/angular-ivy-hlqbza

Syntax in html to autoplay .mp3 files with a loop automatically

What is the syntax in html to autoplay ".mp3" files with a loop; automatically when start the web page?
I tried with this syntax;
<audio control loop autoplay>
<source src= "music.mp3" type="audio/mpeg">
</audio>
this syntax only loop the audio. it will not start the audio automatically

Alternatively you can try the basic thing to get your need,
<audio autoplay loop>
<source src="yoursource.mp3">
</audio>
thanx to Autoplay an audio with HTML5 embed tag while the player is invisible

You could add a small bit of javascript to auto-play it. Warning: Playing this snippet may be annoying!
var src = "https://www.w3schools.com/HTML/horse.ogg";
function loadaudio(src) {
var myaudio = document.getElementById("horse");
myaudio.autoplay = true;
myaudio.load(src);
};
<body onload="loadaudio();">
<audio id="horse" controls loop>
<source src= "https://www.w3schools.com/HTML/horse.ogg" type="audio/ogg">
</audio>
</body>

autoplay muted video background angular 5

I would like to add auto-play muted video at the top of the home page of my website, I am using angular 5.
Can anyone help please?
Thank you in advance!

You can do it only in HTML as well. Here is my working example:
<video [muted]="'muted'" autoplay="autoplay" loop="loop" playsinline id="video-start">
<!-- Dynamic Content -->
<source *ngIf="backgroundVideo?.Link?.Url" [src]="backgroundVideo.Link.Url" type="video/mp4">
<!-- Default Content, displaying when dynamic content has a problem -->
<source [src]="baseURL + '/SiteAssets/assets/videos/film_kpmg_home.mp4'" type="video/mp4">
Your browser does not support HTML5 video.
</video>
Be careful about that, if you write only muted="muted" instead of [muted]="'muted'", autoplay could not work fine in an angular project.
And, for autoplay property, you need also to use 'playsinline' attribute for only mobile browsers. It makes no difference for desktop.

you can write this code directly to your component.ts file
window.onload = function () {
var element = document.getElementById('video');
element.muted = "muted";}
this my html code..
<video id="video"><source src="assets/images/intro.mp4" type="video/mp4">
</video>

HTML 5 Video "autoplay" not automatically starting in CHROME

I have the following code:
<video controls autoplay>
<source src="video/myVideo.mp4" type="video/mp4">
<source src="video/myVideo.webm" type="video/webm">
<source src="video/myVideo.ogv" type="video/ogg"> </video>
The video:
displays well in both Chrome and Firefox
In Firefox it plays as expected
In Chrome it displays but not "autostarts". This is the problem.
If I click on it (in Chrome) it plays ok
Tried
<video controls autoplay>...</video>
<video controls autoplay="1">...</video>
<video controls autoplay="autoplay">...</video>
Nothing worked in Chrome
Then I also tried changing the codec, as recommended in https://en.wikipedia.org/wiki/HTML5_video, but it also did not work:
<source src="movie.webm" type='video/webm; codecs="vp8.0, vorbis"'>
<source src="movie.ogv" type='video/ogg; codecs="theora, vorbis"'>
<source src="movie.mp4" type='video/mp4; codecs="avc1.4D401E, mp4a.40.2"'>
So now I am at a dead end. Thanks for any pointers! Much appreciated.

You need to add playsinline autoplay muted loop because Chrome does not allow a video to autostart if it is not muted. Also, right now I don't know why it is not working in all Android devices. I'm trying to look if it's version specific, if I find something I'll let you know.
Chrome issue:
After some research I have found that it doesn't work on Chrome sometimes because in responsive you can activate the data saver, and it blocks any video to autostart.

Try this when i tried giving muted , check this demo in codpen
<video width="320" height="240" controls autoplay muted id="videoId">
<source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
script
function toggleMute() {
var video=document.getElementById("videoId");
if(video.muted){
video.muted = false;
} else {
debugger;
video.muted = true;
video.play()
}
}
$(document).ready(function(){
setTimeout(toggleMute,3000);
})
edited attribute content
autoplay muted playsinline
https://developers.google.com/web/updates/2017/09/autoplay-policy-changes

This may not have been the case at the time the question was asked, but as of Chrome 66, autoplay is blocked.
http://bgr.com/2018/04/18/google-chrome-66-download-auto-playing-videos-block/

I was just reading this article, and it says:
Important: the order of the video files is vital; Chrome currently has a bug in which it will not autoplay a .webm video if it comes after anything else.
So it looks like your problem would be solved if you put the .webm first in your list of sources. Hope that helps.

Try this:
<video src="{{ asset('path/to/your_video.mp4' )}}" muted autoplay loop playsinline></video>
And put this js after that:
window.addEventListener('load', async () => {
let video = document.querySelector('video[muted][autoplay]');
try {
await video.play();
} catch (err) {
video.controls = true;
}
});

These are the attributes I used to get video to autoplay on Chrome - onloadedmetadata="this.muted = true", playsinline, autoplay, muted, loop
Example:
<video src="path/to/video.mp4" onloadedmetadata="this.muted = true" playsinline autoplay muted loop></video>

This question are greatly described here
https://developers.google.com/web/updates/2017/09/autoplay-policy-changes
TL;DR You are still always able to autoplay muted videos
Also, if you're want to autoplay videos on iOS add playsInline attribute, because by default iOS tries to fullscreen videos
https://webkit.org/blog/6784/new-video-policies-for-ios/

Extremeandy has mentioned as of Chrome 66 autoplay video has been disabled.
After looking into this I found that muted videos are still able to be autoplayed. In my case the video didn't have any audio, but adding muted to the video tag has fixed it:
Hopefully this will help others also.

Here is it: http://www.htmlcssvqs.com/8ed/examples/chapter-17/webm-video-with-autoplay-loop.html
You have to add the tags: autoplay="autoplay" loop="loop" or just "autoplay" and "loop".

Audio autoplay not working and no errors in console

I have a website and I can't seem to figure out why the audio autoplay is not working.
I do not have errors in the console.
The code seems perfectly fine.
The website is www.galloautocenter.com.br
<audio class="audio" loop autoplay="autoplay" controls>
<source src="1.ogg" type="audio/ogg"/>
<source src="1.mp3" type="audio/mpeg"/>
</audio>

Your code looks fine but try it like this. Also, you don't specify what browser you're using. IE 8 and below do not support the <audio> tag or any attributes.
<audio class="audio" controls autoplay loop>
<source src="1.ogg" type="audio/ogg"/>
<source src="1.mp3" type="audio/mpeg"/>
</audio>

You can use this
<iframe class="audio" loop autoplay controls>
<source src="1.ogg" type="audio/ogg"/>
<source src="1.mp3" type="audio/mpeg"/>
</iframe>
or if you wanna play in background then,
<iframe class="audio" loop autoplay style = "display:none;">
<source src="1.ogg" type="audio/ogg"/>
<source src="1.mp3" type="audio/mpeg"/>
</iframe>

I had proper solution for you. You must do any of this two steps.
Check your browser as shown on images, you had blocked Autoplay in browser.
Auto-Play Policy Changes for macOS
Autoplay policy in Chrome
New Policies for iOS
Allow or block media autoplay in Firefox
Second thing you can add this code to you any button on page
<!-- Html part-->
<audio class="audio" loop autoplay="autoplay" controls id="audioelement">
<source src="1.ogg" type="audio/ogg"/>
<source src="1.mp3" type="audio/mpeg"/>
</audio>
// JavaScript part
var myAudio = document.getElementById("audioelement");
myAudio.play();
It will not work on window.onload = function () { } etc. It will work only on elements where you can interact (Buttons). Or you must allow it in the browser.
<!-- Html part-->
<button onclick="PlayAudio()">PlayAudio</button>
// JavaScript part
function PlayAudio(){
var audio = document.getElementById("audioelement");
audio.play();
}
Third thing you can make player elements visible and user can start or stop music by himself.