The video I posted on the home page of my website did not play on the first load or after refreshing, while it was played after I went from other pages to the home page. The problem could be solved if I added the muted attribute to the video element, but I do want the background music to play. Below is my code:
componentDidMount() {
document.getElementById("opening").play();
}
......
<video autoPlay id="opening">
<source src={opening} type="video/mp4"></source>
</video>
Thanks!
I faced the similar problem. then I did this. Though it's not user friendly but after this it worked
<video
src={require('../../resources/sampleVid.mp4')}
autoPlay = {false}
controls = {true}
loop = {true}
muted = {false}
className="flex justify-center mw7-ns"
/>
I am afraid, but there is no way to play audio in the HTML 5 video automatically.
It is clarly mentioned here https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video
Last modified: May 16, 2020, by MDN contributors
Sites that automatically play audio (or videos with an audio track)
can be an unpleasant experience for users, so should be avoided when
possible. If you must offer autoplay functionality, you should make it
opt-in (requiring a user to specifically enable it). However, this can
be useful when creating media elements whose source will be set at a
later time, under user control. See our autoplay guide for additional
information about how to properly use autoplay.
In some browsers (e.g. Chrome 70.0) autoplay doesn't work if no muted attribute is present.
Related
I want to add a video that plays by itself and loops, without showing controls. When I add 'controls' to my code, the controls show and the video plays just fine. When I change 'controls' to 'autoplay' and refresh the testing page, the video doesn't play. Here is the code:
<video src="./images/Kusko Enterprise Catering Services - Google Chrome 2021-10-03 16-30-57_Trim.mp4" class="kusko_catering_video" autoplay></video>
Please could I get help on trying to figure out my mistake?
If you have put the autoplay option in element. It will not play on refresh unless you put muted too. This is a special case in browsers which allows to prevent the video to be played out loud in case of just refresh.
so change your element to:
<video id="video-field" src="files/video" loop autoplay muted></video>
and for angular as someone asked in the comments.
<video [muted]="'muted'" loop autoplay [src]="videoSource"></video>
I think this is what you want.
<video src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/h264.mov" autoplay loop></video>
Your code seems good, you have to just add loop attribute for continuous play. I think the problem is in your source.
You have to have first interaction on your page before that your player plays.
So I've looked over the apple docs and checked that my video will play inline (I am storing the video on s3).
My video on https://themobilecigarlounge.com will play on all devices and browsers with the exception of apple. It will play but not until you click a link and then go back to the homepage.
<video class="video-background" id="backgroundVideo" playsinline="playsinline" autoplay="autoplay" muted="muted"
loop="loop">
<source src="https://cigarlounge.s3.amazonaws.com/Cigar-Rolling-Suit-medium-new.mp4" type="video/mp4" />
<source src="https://cigarlounge.s3.amazonaws.com/Cigar-Rolling-Suit-medium.mov" type="video/mp4" />
</video>
Is the code I am inserting it with. What am I missing here? I have all the tags, I stripped the video of its audio track and I have it muted.
This turned out to be an issue with the Meteor framework I was using. I do not understand the root of the problem but it is some sort of rendering issue. I noticed where in one site this function was working perfectly the <video> tag was within a {{#if}} helper.
So I experimented and put the video within an if block that became true 100ms after the page rendered.... This solved the problem but seems hacky. Seems to be some sort of issue with the blaze templates rendering.
HTML5 video player has been showing controls only in iOS 12.x.x even when the controls are set to false in video tag but all other browsers are working fine and don't show the controls.
The scenario is that whenever page loads we autoplay the video on banner but if battery saver feature is turned on then it will not autoplay the video shows the play button with initial thumbnail (only in iOS 12.x.x) while in other browsers it shows the initial thumbnail of the video without any play button.
My code looks like this:
<video id="header-video" autoplay="true" controls="false" playsinline="true" muted="true" loop="true">
// sources here
</video>
I am looking for the solution to hide this play icon (shown in attached image) but if that's not possible then is there any solution through which I can know that power saving mode is turned on and hide the video (because I have a background for backward compatibility).
I've given a look as well, and it seems as many CSS and JavaScript solutions out there don't work anymore, because since iOS 12 there is a new way of handling videos (https://www.reddit.com/r/apple/comments/8p4tpm/ios_12_to_include_custom_html_video_player/).
Now I came up with this idea, which as a purist I don't like, but it might do the trick: A video thumbnail (as image) overlayed over the video, that gets hidden, once the video is started.
You could have a standard thumbnail with title, or dynamically generate it (see http://usefulangle.com/post/46/javascript-get-video-thumbnail-image-jpeg-png as an idea).
Hope this helps!
I know this was asked over one year ago but I wanted to share the solution for others.
What I did was, I removed the autoplay attribute from the video-element and because I still wanted it to behave as with the attribute I added following js.
const video = document.getElementById('video-input');
video.play();
Setting autoplay to false and controls to false did work for me:
<video
src='xxxx'
muted
className='landing__empty-video'
loop
playsInline
autoPlay={false}
controls={false}
preload='auto'
type='video/mp4'
/>
Bear in mind this was React, in html case it would be "false".
After trying several solutions on the internet and without success, I eventually managed to hide the video interface elements in autoplay when the save mode is enabled.
document.getElementById("hello").setAttribute("autoplay", "autoplay");
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<video id="hello" playsinline preload muted loop>
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
</video>
</body>
</html>
https://jsfiddle.net/joelsilvaaaaaa/yb5s23xq/3/
In our website coverr.co we offer free stock videos for any commercial use.
One of the coolest things in Coverr is allowing our users to see the video running as a background video in our site. As an example: https://coverr.co/videos/Beach
If you'll access this page using FF or Safari the video will autoplay, no problem. However since Chrome's latest policy change on April 2018, autoplay has been inconsistant on Chrome.
We've added the "autoplay" and "muted" flags (although all of our video footage is sound-less), as required by the new spec, but with no luck. It would sometimes play and sometimes just stay frozen until the user actively start playback.
Can someone please help us solve this mystery?
Thanks in advance!
(1) Cannot reproduce your issue (on Chrome version 69.0.3497.100):
This autoplays and loops correctly:
<!DOCTYPE html>
<html>
<body>
<video width="100%" autoplay loop>
<source src="https://storage.googleapis.com/coverr-main/mp4/Beach.mp4" type="video/mp4">
</video>
</body>
</html>
(2) Your cover/poster image is blocking the video (which may be playing underneath).
Try removing the cover image. Your frozen frame (not playing) is actually the poster image. Test by removing cover image code (eg: <div class="poster hidden"> and related).
PS: If you right click poster image and choose "show controls", the displayed "play" button will start playback.
Found the problem, and it was related to the fact we've used angular 2.
Apparently Angular 2 has a problem to add the muted meta tag properly.
The full answer can be found here, but basically you need to use Angular's onloadedmetadata attribute:
onloadedmetadata="this.muted = true"
and in general, this is how it should look like:
<video onloadedmetadata="this.muted=true" autoplay>
<source src="myVideo.mp4" type="video/mp4" />
</video>
Important comment:
We've also added oncanplay="this.play()" for additional playback robustness.
So in the future we can handle play() promise and show play button if autoplay was rejected by some another reason
Additional important comment:
Following #VC.One's question, just wanted to clarify that there is a way to verify or at least get notified of playback (taken from the article in my question):
var promise = document.querySelector('video').play();
if (promise !== undefined) {
promise.then(_ => {
// Autoplay started!
}).catch(error => {
// Autoplay was prevented.
// Show a "Play" button so that user can start playback.
});
}
but it doesn't make sure that the video actually plays, and so you might get and error even though everything is legit. And of course, adding a play button can work, but it really takes out the "sting" of what we're trying to do - autoplay a muted video in the site's background.
Basically all you need it to have both autoplay and muted injected properly, and apparently in Angular 2 it's not such a trivial task...
Anyone does have the idea of how apply the html5 code for video and allow autoplay in Ios10 or latest? Cause seems like Ios10 do have the latest update and it couldn't allow Autoplay. Following are the tag that im using.
<video preload="auto" id="lady_vid">
<source src="vid/lady.mp4" type="video/mp4"></source>
</video>
I was able to enable autoplay by using the following code:
<video autoplay muted playsinline>
<source src="http://example.com/video.mp4">
</video>
You need autoplay to enable autoplay.
You need muted, because only videos without audio track or with disabled audio track can be autoplayed.
You need playsinline, because only inlined videos can be autoplayed. This will also cause your video to be displayed inside the page itself and not be opened in fullscreen video view.
I was only able to enable it after specifying full url to the video, e.g. http://example.com/video.mp4 (this is a fake url obviously). It was not working with relative url, such as
<source src="video.mp4">
or
<source src="folder/video.mp4">
===========
Update:
After testing video on iOS10 for a while, I've realized that iOS10 fails to play a lot of videos. It's not a codec problem: if you encode two videos with exactly the same parameters, one might play and the other one won't.
What's even more intresting, is that most videos that cannot be played on iOS10 play perfectly well on iOS9 and iOS8.
So if your video isn't playing, try opening it with iOS Safari browser via direct link - maybe it doesn't work at all on iOS10.