Develop Reference

auto play video element in html reactJs

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/

html5 video: once the video is loaded, a flash is appeared. how to remove it?

I am using html5 and while the video is downloading I am using a fallback image in poster attribute. but the problem is once the video is downloaded a flashy screen is showing for a short period of time. how can I remove this, so that the flash will not visible?
<video class="bg-video" loop="" muted="" autoplay="" playsinline="" poster="https://i3.ytimg.com/vi/Zs0bsagDzw8/maxresdefault.jpg">
<source />
</video>
live site:
https://nordic.dnscheck.io/

If you mean the black frame, it's in your video so you should edit it out from there.
If you really can't edit that file anymore you can still kind of workaround that by using the media fragment syntax and make your video automatically seek to after that black frame:
<video muted loop autoplay
poster="https://nordic.dnscheck.io/bilder/poster.webp"
src="https://nordic.dnscheck.io/nordic.webm#t=0.8"
></video>
However beware that the black frame will still be here at the next loop.
Also, while it's not an issue for you since you do autoplay the video, one should note that (currently) setting the seeking time through the media fragment syntax will disable the poster once the video has loaded.

How to play iframe video using JavaScript (not youtube)? [duplicate]

This question already has answers here:
Chrome video autoplay
(6 answers)
Closed 10 months ago.
How can I play an video element inside an iframe. The iframe is automatically creating the video element and controls. There are many answers here pointing to add &autoplay to the src address but this is not a youtube iframe.
My HTML code:
<button #click="playVideo(item.name)">play</button>
<iframe :ref="item.name" autoplay :src="item.video_link" :title='item.name'></iframe>
JS
playVideo(itemName) {
this.$refs[itemName] <--- this give me the iframe DOM element I want to play
},
Rendered HTML:

Since you have the source MP4, you should be using <video> instead of an iframe. You'll then have full access to autoplay, controls and other features.
Based on your code, this would look something like:
<video :ref="item.name" autoplay :title='item.name'>
<source :src="item.video_link" type="video/mp4">
</video>
And since IPFS can be a bit slow for first load, you can also specify poster to show a thumbnail while the content is loading. Here's an example using an IPFS source:
<h3>IPFS Embeded Video Demo</h3>
<!-- 👇 required for autoplay in Chrome -->
<video autoplay muted autopictureinpicture controls poster="https://i.stack.imgur.com/O9qG3.jpg?s=256&g=1" height="200">
<source src="https://ipfs.io/ipfs/QmbGtJg23skhvFmu9mJiePVByhfzu5rwo74MEkVDYAmF5T" type="video/webm">
</video>

HTML5 video flashes and makes additional requests for the same 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>

HTML 5 Video not buffer fully on Page Load

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.