How to remove HTML5 video player navigation button - css

I am using HTML5 video player to play video constantly.Every thing is fine except the video navigation button displaying at the last of the video screen as soon as the mouse cursor moves over the video. I want to remove or hide it but not getting how to do it ..
Here is the HTML for the Video used..
<video id='video-player' autoplay="autoplay" loop preload='metadata' controls>
<source src="Video/1.MP4" type="video/mp4">
</video>
Please help me to remove the navigation bar from the last ..Thanks..

You can disabled controls via Javascript:
document.getElementById('video-player').controls = false
Or simply remove controls attribute:
<video id='video-player' autoplay="autoplay" loop preload="metadata">
<source src="Video/1.MP4" type="video/mp4">
</video>

Related

Remove the big play button appears on <video> tag in firefox mobile

I've been struggeling with this one for a long time and haven't found a solution yet.
I have a preloader on my friend's website which I built (he insist of keeping it)
the preloader is applied with the video tag like so:
<video muted autoplay loop playsinline preload frameborder="0" width="100" height="100">
<source src="/media/preloader.webm#t=0.25" type="video/webm">
<source src="/media/preloader.mp4#t=0.25" type="video/mp4">
<source src="/media/preloader.mov#t=0.25" type="video/quicktime">
</video>
on all browser that's working great, but on firefox mobile before video is playing I see this play button(for half a second):
https://i.stack.imgur.com/YRpal.png
What can I do to remove this annoying button for good?

Problem with HTML 5 video, the video is not playing

I used this code but it only Run on Incognito.
video playing proper in private browser but not playing in chrome, mozila. how it can be solved please help me i tired in 8 days
<video controls muted>
<source src="https://www.w3schools.com/tags/movie.mp4" type="video/mp4">
<source src="https://www.w3schools.com/tags/movie.ogg" type="video/ogg">
Your browser does not support the video tag.

How to play videos of different formats in html using video tag

I have a page where I need to display videos with different extensions.
Example: .mp4, .wmv
<video width="100%" controls>
<source data-ng-src="{{video.url}}" type="video/*">
Your browser does not support this video.
</video>
I just put a star but it is not playing my video.Showing an empty screen.Can anyone please suggest me help.Thanks.
In case you need it to support multiple types of videos, you must add multiple source of those videos. The browser picks the appropriate one to play.
And moreover, your code doesn't contain the src attribute.
<video width="100%" controls>
<source src="http://www.educationalquestions.com/video/ELL_PART_5_768k.wmv" type="video/wmv">
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
<source src="https://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg">
Your browser does not support HTML5 video.
</video>

Add Video in sidebar layout wordpress

I am new to wordpress,I am using interface theme (http://themehorse.com/preview/interface/) ,I have downloaded a youtube video in mp4 format and uploaded it through Admin.Now i want to show this video in Widget Tab Business Page Section.
Goto your widgets and drag the text widget to your desired sidebar. Then inside your widget type this code in
<video width="320" height="240" controls>
<source src="http://yoursite.com/video.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
Replace the source link to yours and adjust the dimensions.

Remove Controls from JS Video

I'm looking to remove the controls from a JS player that I have embedded on a site. The idea is to have the video autoplay with no controls.. Here is my code:
<video id="Splash1" class="video-js vjs-default-skin"
controls="off" autoplay preload="auto" width="1280" height=""
="http://video-js.zencoder.com/oceans-clip.png"
data-setup='{"example_option":true}'>
<source src="movie/Splash1.mp4" type='video/mp4' />
<source src="movie/Splash1.webm" type='video/webm' />
<source src="movie/Splash1.ogv" type='video/ogg' />
</video>
I was following the instructions and I removed just controls - but then the autoplay and video does not work. However, if I put back in controls the autoplay works but I have the controller playing along the bottom.
Any tips on how to get rid of the controller? Thanks so much in advance!

Resources