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".
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
All is in the title. When i access a page with a video tag, autoplay works fine.But when i reload the page, the video dont start.
What can i do to auto start the video ?
<video autoplay loop poster="the_poster.jpg" id="bgvid">
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
<source src="video.ogv" type="video/ogg">
</video>
i try to add a ?ts=timestamp.
i try also to start the video with JS but i get a "promise error"
I've had same issue here and it solved by adding muted attribute to video tag.
For Google Chrome, according to this update note, autoplay with sound needs some conditions. However, Muted autoplay is always allowed.
I have been looking into how to implement HTML5 videos as a
background
video on web and mobile, below is the following code-
it displays but not autostarts, this is the problem
<video width="100%" controls autoplay>
<source src="video/342125205.mp4" type="video/mp4">
<source src="video/342125205.ogg" type="video/ogg">
</video>
Depending on your Chrome version you might get the new implementation of video autoplay rules:
Muted autoplay is always allowed.
Autoplay with sound is allowed if:
User has interacted with the domain (click, tap, etc.).
On desktop, the user's Media Engagement Index threshold has been crossed, meaning the user has previously play video with sound.
On mobile, the user has added the site to his or her home screen.
Top frames can delegate autoplay permission to their iframes to allow autoplay with sound.
Taken from: https://developers.google.com/web/updates/2017/09/autoplay-policy-changes
So you can try it muted:
<video width="100%" controls autoplay muted>
<source src="video/342125205.mp4" type="video/mp4">
<source src="video/342125205.ogg" type="video/ogg">
</video>
I had similar issues with autoplay not having any effect regardless of usage of muted. Unexpectedly I had success when specifying autoplay as camel case autoPlay
In React you need to add the attributes of tags in camelCase. So in this case It has to be autoPlay.
It's too old thread now. But still I have a suggestion if you want to use.
Instead of the autoplay attribute(because other told it's only work always if it also has muted) you could use one thing:-
function playVideo()
{
document.getElementById("vid").play();
}
a very simple function in javascript. Make sure to give your video Id 'vid' or change it here. Video Example
<video id="vid" loop controls>
<source src="Videos/vid.mp4" type="video/mp4">
</video>
and in body tag write this:-
<body onpageshow="playVideo()">
It worked for me. Maybe for you too
Make sure you check browser permissions. If the site is not secure (http), then autoplay on websites will be disabled.
To make changes you can click on the left side of the Address Bar of the browser and click Allow audio and video.
Just change autoplay as camel case autoPlay
<video controls autoPlay loop muted>
<source src={myvideo} type="video/mp4"/>
<source src={myvideo} type="video/ogg"/>
Your browser does not support the video tag.
</video>
Had a similar issue. The fix is to camelCase autoPlay.
So the following should work:
<video autoPlay muted>
<source src="video/342125205.mp4" type="video/mp4">
<source src="video/342125205.ogg" type="video/ogg">
</video>
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'm looking to place a video in an HTML5 page that will begin playing on page-load, and once completed, loop back to the beginning without a break. The video should also NOT have any controls associated with it, and either be compatible with all 'modern' browsers, or have the option of a polyfill.
Previously I would have done this via Flash and FLVPlayback, but I would prefer to steer clear of Flash in the HTML5 sphere. I'm thinking I could use javascript's setTimeout to create a smooth loop, but what should I use to embed the video itself? Is there something out there that will stream the video the way FLVPlayback would?
The loop attribute should do it:
<video width="320" height="240" autoplay loop muted>
<source src="movie.mp4" type="video/mp4" />
<source src="movie.ogg" type="video/ogg" />
Your browser does not support the video tag.
</video>
The addition of the unintuitive muted attribute is required by Chrome as documented on their dev site.
Should you have a problem with the loop attribute (as we had in the past), listen to the videoEnd event and call the play() method when it fires.
Note1: I'm not sure about the behavior on Apple's iPad/iPhone, because they have some restrictions against autoplay.
Note2: loop="true" and autoplay="autoplay" are deprecated
As of April 2018, Chrome (along with several other major browsers) now require the muted attribute too.
Therefore, you should use
<video width="320" height="240" autoplay loop muted>
<source src="movie.mp4" type="video/mp4" />
</video>
For iPhone it works if you add also playsinline so:
<video width="320" height="240" autoplay loop muted playsinline>
<source src="movie.mp4" type="video/mp4" />
</video>
You can do this the following two ways:
1) Using loop attribute in video element (mentioned in the first answer):
2) and you can use the ended media event:
window.addEventListener('load', function(){
var newVideo = document.getElementById('videoElementId');
newVideo.addEventListener('ended', function() {
this.currentTime = 0;
this.play();
}, false);
newVideo.play();
});