I have a video background, which works fine - I have specified 3 different formats so the video background works in different browsers, however it appears my page is loading all 3 of the video backgrounds at the same time. This is slowing down my page massively!
Just wondering is there a way (using Javascript or jQuery) to detect the browser and load only 1 video background based on what browser is being used?
<div class="header-unit">
<div id="video-container">
<video autoplay loop muted class="fillWidth" id="bgvideo">
<source src="backgroundvideo.mp4" type="video/mp4">
<source src="backgroundvideo.ogv" type="application/ogg">
<source src="backgroundvideo.webm" type="video/webm">
</video>
</div>
</div>
Related
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/
how to make html5 video controls always on/show (without mouse hover) .? currently the video controls show only on mouse hover while playing video. i have tried "controls:true" attribute but which does not help in video tag. looking for latest Chrome and Fire fox browsers implementation.
<video width="320" height="240" controls="true">
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
I have a pop-up modal React component that renders tabs. At the top of the modal are tabs where users can select to show certain information within that tab. One of the tabs render a video via this snippet of code.
<video autoPlay loop muted playsInline>
<source src="some-video-file.webm" type="video/webm" />
<source src="some-video-file.mp4" type="video/mp4" />
</video>
My problems are:
When a user first clicks on the tab with this video, there will not be a video and instead, will end up with a blank spot where the video is suppose to be for a few seconds.
When a user clicks on another tab and clicks back to this video, the same thing will happen and the same request for that video is made.
I was wondering if it were possible to:
Preload the video so when the component is rendered, there will be no flash
Prevent subsequent, redundant request for the same video
React is taking the video out of the DOM when you switch tabs most likely. If you could just hide it on tab switch, it would not have to re-fetch the files.
Also, you could try this to stop the flash, as it would load much faster since it only loads the first frame as well as some other meta data.
<video autoPlay loop muted playsInline>
<source src="some-video-file.webm" type="video/webm" preload="metadata" />
<source src="some-video-file.mp4" type="video/mp4" preload="metadata" />
</video>
I've a list of video's in a page. The videos are fetched from Server via Rest API and are used in html as below. The first video plays well but later video's wont play. The resolution are same for all video. This works well in other browsers and platform.
<video width="645" height="425" id="myvideo" class ='video' controls controlsList="nodownload">
<source id="source" src="" type="video/mp4">
</video>
In my source tag, I've mentioned type="video/mp4"
In JS Side I do the below
$("#source")[0].src = <path-to-the-video>;
This works great on all browers and platform except for windows 7 and ie 11.
The error I get is
MEDIA12899: AUDIO/VIDEO: Unknown MIME type.
I've checked over the net
to add the type="video/mp4" which is already there and does not solve the problem.
The video resolutions are correct because the same video works in the same IE and Window when played in a separate HTML file.
What am I missing?
Error Screen Shot
Same Video working in same browser when added to a html file
<video width="645" height="425" class="video" id="myvideo" style="display: inline-block;" controls="" controlslist="nodownload">
<source id="source" src="http://hostname.com1/video2" type="video/mp4">
</video>
Screenshot
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.