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.
Related
I am using a laravel project and i have implemented a html5 video tag. Video starts streaming whenever i click on play button but the problem is whenever i try to forward the video player for some duration then video automatically starts from beginning.
I have also disabled all javascript and css files attached but still same problem exists and there is nothing wrong with the video as this problem does not appear on other PHP projects when i use the same video..
<video controls width="100%">
<source src="http://127.0.0.1:8000/storage/elearning/3/tutorial/62a0df6b1c38d.mp4" type="video/mp4">
</video>
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.
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...
I am having an issue with getting HTML5 video to autoplay on load into Fancybox.
I have an HTML5 video loaded into a div that is hidden and therefore can't have autoplay enabled in the tag. I then call it one an image click with a Fancybox inline and a ref to the div.
Everything works as it should except I just want the video to play when then Fancybox opens it?? Any ideas would be appreciated.
You can autoplay the video as soon as it is opened in fancybox. The problem with the inline video is that if you close it then it will pause and the next time you open it in fancybox, the video will be open in the same place/track it was when closed ... and it won't "auto-resume" (the action is autoplay on start).
Anyway, this option should do the trick:
'onComplete': function(){
$("#myVideo").find('video').attr('autoplay','autoplay');
}
#myVideo is the ID of the DIV, which contains the video tag.
Since you are using the inline method, it would worth to have a look at one existing bug and its workaround here.
Eventually, you may prefer to use the API option 'content' instead, to avoid the inline type issues:
'content': '<video autoplay="autoplay" preload="none" poster="path/image.jpg" width="640" height="360" controls="controls"><source autoplay="autoplay" src="path/video.ogg" type="video/ogg">your browser does not support the HTML 5 video tag</video>'