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

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>

Related

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>

HTML5 video with controls but customize it: disable play/pause button and seekbar

Very simple question almost described in the title.
I want to have controls on HTML5 video (mainly for loader, audio, and fullscreen), but I want to disable pausing and changing position.
How can I hide the play/pause button and seekbar completely? JS solution is also applicable from my side, but it needs to be browser-independent.
Note: I'm not using any libraries. It's a plain html video tag:
<video controls>
</video>

HTML video player time to hide controlls

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!

Disable the HTML5 information from YouTube Embedded Video [duplicate]

I have a small project of doing some html5 videos embed on a site.
I use a simple HTML video embed code
<video width="560" height="340" controls>
<source src="path/to/myvideo.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
<source src="path/to/myvideo.ogv" type='video/ogg; codecs="theora, vorbis"'>
</video>
so my question is that possible to disable the copy URL when you right click on the video?
I know if they really want to get the video link there are ways to do so.
but just at least if I can do that one.
Thanks
You can catch right-clicks via JavaScript and thus prevent the right-click menu.
As you correctly noted though, it’s only a hindrance rather than prevention. HTML5 video is about direct integration into the browser and thus can also be saved like images, for example.

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