Develop Reference

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.

Change video source with Javascript in html without refreshing the page just the video

My team and I are making a custom html video player and I'm working on a setting panel
And the first option we are mainly worried about so I'm adding first is the video quality option.
<video id="video" class="nm" poster="the poster url">
<source src="video source url of the video at 480p" type="video/mp4" size="480">
<source src="video source url of the video at 720p" type="video/mp4" size="720">
<source src="video source url of the video at 1080p" type="video/mp4" size="1080">
</video>
And now what we want to do is when the user toggles on an option it will change the video source to the source that has the quality specified by the size attribute
Image reference here
PS: We are making a video player from scratch as It is on its own built with no APIs (e.g. Video.js, JWPlayer, Plyr) We are making all the things needed from scratch with pure javascript and html... and as we're making a website for streaming, and my team and I want to make a video player made by us for the website, and "maybe" later for distribution but for now we want to make a brand new video player and were just been putting this part off as we aren't sure of the best way to do this!
Edit
Also, we want the video to pause and change the quality and pick up off where it was paused

Note that for the native video the browser will decide which <source> to show and choose the first element it supports/understands (e.g. the first supported video file format): https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video#Usage_notes
To circumvent that and force the browser to show a certain video source url, put in only one <source> element and manipulate the source property with javascript.
To pause and play the video in the native HTML5 video player you may use the API of the HTMLMediaElement: https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement
It has the play and pause functions you're looking for.

How to add video in parallax Slider?

I have a parrallax slider, I have put just image and description on slider, and I want to add a video, this is my code:
{ <div id="da-slider" class="da-slider">
<div class="da-slide">
<h2>Vidéo PUB</h2>
<p>loading</p> <!--wanna put the video here -->
</div>
<div class="da-slide">
<h2>Affréteurs</h2>
<p></p>
<div class="da-img"><img src="" alt="" /></div>
</div> }
My problem is the video is static.
I'm currently using this slider:
Yii2 Da-Slider
I want to:
Add it to the first slide
Set it so it autoplays
After the video finishes playing I want the slider to automatically resume and move to the next slide.
How can I do this?

I would recommend setting up a YouTube account to host your video on.
If the site is popular then it offloads the strain of serving the video file over to YouTube's fast, dedicated servers.
Once you have got your YouTube video uploaded you can add it to the slide by clicking the Share button beneath the video and then clicking Embed. This will give you a snippet of code like this which you can use in your slider code above:
<iframe width="560" height="315" src="https://www.youtube.com/embed/_dJCLaoBZvM?rel=0" frameborder="0" allowfullscreen></iframe>
Notice the rel=0 on the end. That stops it suggesting other videos once yours has finished playing which makes the whole thing more professional. You can also add autoplay=1 if you want it to start playing straight away. There are also more advanced integrations that you can do where you control the chrome of the video player (the skin around the edge).

I've done this before with parallax and it comes out looking amazing.
I prefer this method to a service like Youtube or Vimeo because you have more control and be able to style it how you want more effectively.
You want to get your video in mp4 and ogg format. You can do this with VLC media player. It's free.
Then I used the html5 <video> tag (Link Here). here is a sample. You will want to style for position, etc... in your CSS.
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>

AngularJS ngInclude Html5 Video doesn't get replaced

My issue: ngIncluding a video source doesn't replace the video.
My page has a feed and a preview, each time I click on a post in the the feed, its preview gets injected (ngInclude) to the preview area.
It works fine for youtube video, for images and for text but when it gets to html5 videos, the same video keeps showing and it seems the source doesn't get replaced in the page.
Weirdest thing is when I enter chrome debugger and inspect the element, I see its source gets replaced with a different url, but the video in the preview doesn't change.
I even tried enabling autoplay and when I move through posts the video continues to play on smoothly.
Here are the relevant code bits:
The preview that gets ngIncluded:
<div ng-if="postInfo.Media.type == 'video'">
<video name="media" width="582" height="582" controls autoplay>
<source src="{{postInfo.Media.videoStandardResolution}}" type="video/mp4">
</video>
</div>
The main page including bit:
<div id="preview-panel">
<ng-include src="htmlInclude" onload="responsiveCalc()"/>
</div>
And in my javascript when I get an event of post changed in the feed, I just re-initialize the $scope.htmlInclude
Anyone came across anything like it? Should I somehow refresh the video source? And if so how.
Thanks!

Try using ng-src instead of src in the video source tag
<source ng-src="{{postInfo.Media.videoStandardResolution}}" type="video/mp4">
This lets angular know that the src will be replaced and to fetch the result

What ended up solving this was removing the source tag inside the video tag and changing directly the 'src' attribute of the video.
Came across this: http://www.w3.org/html/wg/drafts/html/master/embedded-content.html#the-source-element
and from there it was pretty obvious.
so my html now looks like this:
<video name="media" width="582" height="582" controls autoplay src="{{postInfo.Media.videoStandardResolution}}">
Your browser does not support the video tag.
</video>

Displaying a video onLoad

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.