HTML video player time to hide controlls - javascript

I'm trying to add short video (less than 3 seconds) to html page via <video> tag. Is there any possibility to decrease controls hide time?

Are you trying to hide the controls completely?
If you omit the "controls" attribute from the video tag it will not render them on the video, try removing it here: https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_video_controls
If you would like to still have the controls, then I would add some custom buttons/links and use JS to toggle play/pause. Not sure if that's what you need though, could you be more specific? :-)

Welcome to StackOverflow! I hope this code helps you. Be sure to change the width and height in the <video> tag to suit your needs and keep in mind you have to correctly call to the paths of your videos in the src= and keep them in those quotation marks so it works correctly!
By not including "controls" in the <video> tag then those controls should not appear. the autoplay="autoplay automatically plays your videos.
HTML
<video width="320" height="240" autoplay="autoplay">
<source src="yourpathherepath/videofilename.mp4" type="video/mp4" />
<source src="yourpathherepath/videofilename.ogg" type="video/ogg" />
Sorry! Your browser isn't compatible with the Videos on our website!
</video>
CSS
Here I put a little CSS on it so a user can't even click the videos to possibly control them. You can experiment with this and see if you want to use it!
video{
pointer-events: none; /* Disable any user interaction at all */
}
Best of luck and in the future it's best to use websites like codepen.io to try out your code and then people here can see a live demo and help you find a solution!

Related

How to make HTML audio tag work in Opera?

i'm trying to add autoplay audio in my html page and i already tried embed and audio with and without controls and optional attributes, and absolute path. Tried different formats, though i know that Opera supports .ogg. My last try is here:
<audio controls id="music1">
<source src="./models/laughing.ogg" type="audio/ogg"/>
</audio>
html page and audio file are located like this:
if i press play button audio is played, but when i start my entire project the button is covered (as should be). And anyway i want it to be autoplay so
My Opera is the last version, Windows
Autoplay doesn't typically work. You need some sort of user interaction, like a click.
There is nothing you can really do about this. It's a browser "feature" to prevent ads from playing audio in the background.
<audio controls autoplay>
Try adding "autoplay" inside the voice tag.

Disabling fullscreen button on HTML5 video tag

When googling for 'disable HTML5 video fullscreen' most of the answers suggest that I disable custom controls of the <video> tag and build myself custom ones but right there on the MDN site, there's an article on <video> tag with all the examples having disabled just that one button (enter full screen mode): https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video. My question is: how is it done?
The controlslist attribute, when specified, helps the browser select what controls to show on the media element whenever the browser shows its own set of controls (e.g. when the controls attribute is specified).
The allowed values are nodownload, nofullscreen and noremoteplayback.
<video controls controlsList="nofullscreen">
https://googlechrome.github.io/samples/media/controlslist.html
I don't know how your exemple works, but you can try this
<video controls controlslist="nofullscreen">
<source src="video.mp4" type="video/mp4">
</video>

Video background not displaying properly on some computer

I am meeting an error on my website and I can't put my finger on it, the custom video background I'm trying to implement works on some computers and doesn't on the some other.
It is not a problem of browser version since I tried it on 5 computers with the same versions and there is still 2 computer who fail to run the javascript on this specific area (it either works on all browser or the javascript goes off on all plateforms).
I think it is a problem of computer but what should I in order to make the JS of the video background work ? (If you can't pause or play the video, or if it launch as soon as you enter the page then you also have this issue)
Here is the website : www.fyz.ch/VR
Any thoughts ?
Maybe you need to convert the video in multiple file formats (mp4, webm and ogv).
I think you made a wrong structure for it and put a source tag outside of the video tag.
Add them like this :
<video>
<source src="video.mp4" type="video/mp4" />
<source src="video.webm" type="video/webm" />
<source src="video.ogv" type="video/ogg" />
Your browser doesn't support the video tag
</video>
Moreover, it seems like you added the autoplay attribute to the video tag. So it's the normal behavior for the video to launch itself as soon as the user enters the site.
Could you provide some code to be sure of what your problem is ?

Showing HTML5 Video Controls but not allowing user to change anything?

Is it possible to show the user an HTML5 Video player's controls but not allowing them to change anything, like seeking any part of the video, changing volume, etc?
An easy way would be to just absolutely position a transparent element above the video.
You could also create custom video controls which only show the timeline for example but allow no interaction.
Native HTML5 <video> element does not allow this behavior. But, as Andy said, you are free to provide your own controls and make them read-only.
Take a look at MediaElementJS, a javascript library that wraps around HTML5 video and provide skinable controls. You could for example extract the source code of the progress bar, and modify it to remove the click handler.
There are many ways of doing it.
First way is to use video{pointer-events:none;},in which user cannot click or use default control bar.But here user also cannot play/pause the video.So,you have to add play/pause button(as I added in snippet).
Second way is here.But you have to add progress bar and timings.(progressbar)
and
Third way is to use library or frameworks which are comfortable to do this.
For eg. Use Youtube to embed videos without controles.This can be the best way but your video should be on Youtube.If not,upload it..:)
var vid = document.getElementById("vid");
function play() {
if (vid.paused)
vid.play();
else
vid.pause();
}
video{pointer-events:none;}
<div>
<video id="vid" width="320" height="240" controls>
<source src="http://www.w3schools.com/html/movie.mp4" type="video/mp4">
<source src="http://www.w3schools.com/html/movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
</div>
<br>
<button onclick="play()">Play/Pause</button>

How to disable/enable HTML5 Video tag using JavaScript

Below code is not working, How can disable HTML5 video tag
document.getElementById("vidEle").disabled=true;
If I use
document.getElementById("vidEle").controls=false;
Still I am able to play using right click.
It would be nice if we knew the browser you are using, but here are some workarounds:
You can set a new block element on top of it with the same size as the video player with a translucent background using css.
Or you could set the style of your element to display none:
document.getElementById("vidEle").style.display="none";
And lastly you can also unload the content of the vidEle element. One last thing, make sure the video is not playing if you choose to use the "display:none" method.
You can remove the video source so the video won't be able to play :)
Another way to do it is to disable the context menu like this:
<video oncontextmenu="return false;" controls>
<source src="somedir/somevideo.mp4" type="video/mp4"/>
</video>

Categories