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>
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/
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>
I am trying to buffer HTML 5 video on Page load using follow:
<video width="320" height="240" id="myVid" controls="controls" preload="auto">
<source src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" type="video/mp4">
<object data="" width="320" height="240"></object>
</video>
but Video gets buffer only 40 to 50% on page load without playing and get stuck. I want to buffer full video on page load and then play.
Link : http://codepen.io/anon/pen/XKNeYQ
The Browser itself decides how much to preload. You can not change that. Take a look at the table here for more information. Some browser have a time limit some other a size limit. The only other option is to use a custom video player that supports your needs.
I am using bootstrap to build my website and I would like a little bit of flare added to it. I have read some stuff on here but couldn't find exactly what I want.
glyphicon-volume-up to right of the navbar-header.
music autoplay once site visited
volume default to 50%
switches between glyphicon-volume-off/glyphicon-volume-up (unmute and mute)
You should use the HTML audio tag
<audio controls autoplay>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio tag.
</audio
You can try it here. Add the autoplay I have above when you go to the link and refresh.
Note: You can also use CSS to hide the audio player and write custom javascript to control the audio with your own buttons.
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.