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>
Related
Hy, I want to play videos automatically without controls. because I'm using it as a website banner background. Please point out what I have done wrong. I'm using chrome browser.
<video
autoPlay
// playsinline
autoplay
muted
loop
className="stakingNft"
>
<source src="\assets\video\landing.mp4" type="video/mp4" />
</video>
--------------------------------
<video
autoPlay
playsinline
autoplay
muted
loop
className="stakingNft"
>
<source src="\assets\video\landing.mp4" type="video/mp4" />
</video>
Here is the codesandbox
autoPlay might be defined twice and in small case that's the reason I think.
Looks like there's issue in path of video.
You used backward slash instead of forward slash.
Here is the reference: https://stackblitz.com/edit/react-xbfng5?file=src%2FApp.js
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".
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
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.
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".