I tried this code to implement the autoplay video feature without the control bars but the issue that I faced was, the video was not autoplaying after refreshing the page. this project is in react. even after adding an autoplay attribute, the video is not autoplaying. what's the mistake am I doing?
I expect it to be autoplaying even after refreshing the page
I tried this code to implement the autoplay video feature without the control bars but the issue that I faced was, the video was not autoplaying after refreshing the page. this project is in react. even after adding an autoplay attribute, the video is not autoplaying. whats the mistake am I doing?
<video id="coinSaverIcon" autoPlay playsInline>
<source src={coinsaverIcon} type="video/webm" />
</video>
You can add muted property
<video id="coinSaverIcon" autoPlay playsInline muted>
<source src={coinsaverIcon} type="video/webm" />
</video>
In some browsers autoplay (Chromium for example) is not allowed anymore.
Furthermore you shouldn't implement this kind of features for accessiblity issues.
https://www.w3schools.com/tags/att_video_autoplay.asp
https://www.a11yproject.com/posts/never-use-auto-play/
Related
Alright Ive looked at the other autoplay video issues however my setup does not resemble theirs, and their solutions dont work.
I have a video that USED to autoplay just fine with this-
<video preload = 'auto' autoplay muted false data-depth="0.16">
<source src="../src/images/intro2.mp4" type="video/mp4"> <!--The first video-->
</video>
the data depth is because its parallax and after checking this is not the issue. On page load,
I do not change anything in JS regarding this video and I just want it to autoplay like it used to.
I have it muted and preloaded - is this a performance issue? How can I fix/investigate this?
I'm developing a site in which I want to play video in background. Following is my code, video is playing in Internet explorer but not in Chrome. I'm using 2.2.4 version of jquery and I cannot change it because my all site is developed and If I change jquery than my whole site stops working.
<video id="vid" width="110%" height="100%" autoplay controls loop muted="muted">
<source src="../img/led.mp4" type="video/mp4" />
</video>
Thanx in advance.
Im trying to display some static HTML5 video in my Angular app. It plays without issues in Chrome but not on Safari or Firefox.
<video class="masthead-video w100 m-w100" autoplay loop muted>
<source src="public/img/test.mp4" type="video/mp4">
<source src="public/img/test.webm" type="video/webm">
<source src="public/img/test.ogv" type="video/ogg">
Your browser does not support the video tag.
</video>
Loading this markup into a browser as simple HTML (no angular or any other markup) allows it to play on Safari and Firefox normally without issues.
Ive tried using ng-src instead (even though I shouldnt have to since Im not using dynamic paths) but it didnt help.
Does anyone know of any issues when using HTML5 video with Angular.js?
Use $sce for trust source url .
$scope.trustSrc = function (src) {
return $sce.trustAsResourceUrl(src);
};
$scope.src= public/img/test.mp4;
Html Content
<video class="masthead-video w100 m-w100" autoplay loop muted>
<source ng-src="{{trustSrc(src)}}" type="video/mp4">
Your browser does not support the video tag.
</video>
appy this way for your code.
<video autobuffer controls autoplay>
<source id="mp4" src="../vid/coolvideo.mp4" type="video/mp4">
</video>
Is there anyway to autoplay a .mp4 video file on page load for iPhone and Android Smart Mobile Devices. The above works great in the browser, but struggles hard on smart mobile. Is there any other HTML5 or even If I must JS solutions for iPhone (without loading a bloated third-party resource, ideally). Plain javaScript or plain jQuery, HTML5 solutions ideal.
It works only if you add muted and playsinline attributes
<video autoplay playsinline muted loop>
<source src="cover.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video>
Check this link
which says:"autoplay is disabled to prevent unsolicited cellular download"
What I would like is to have a video play in full screen once and then disappear leaving the web page behind. is this possible using Javascript, HTML and possibly CSS?
The video in question is called Website Opening.mp4
<video width="100%" autoplay="autoplay">
<source src="movie.mp4" type="video/mp4" />
</video>
Edit: When autoplay attribute is present, the video will automatically start playing as soon as it can i.e. when the page loads.