HTML5 video hide controls javascript

Question

I have an html video element applied as code in a text field, I have omitted the ‘controls’ attribute.

Table of Contents Show

How to hide HTML video controls in JavaScript?
How do I hide controls in HTML video tag?
How do I hide video player controls?

I have also added a jquery script in the X-Theme Pro global js panel, to show and hide controls on hover.

$(document).ready(function(){

$(’#video-one’).hover(function toggleControls() {
if (this.hasAttribute(“controls”)) {
this.removeAttribute(“controls”)
} else {
this.setAttribute(“controls”, “controls”)
}
})

});

However this is not working on the site.
Is this the correct place to put the js code?

Is there a way I can just add the js code into a js file? I can’t see how I can link to my own js file.

How to display video controls in HTML5 ?

Improve Article

Save Article

Like Article

Last Updated : 06 Apr, 2021

Read

Discuss

Courses

Practice

Video

Improve Article

Save Article

The HTML <video> controls attribute is used to display video controls in HTML5. It is the Boolean value. HTML5 most commonly uses ogg, mp4, ogm and ogv as a video formats in the video tag because the browser support for them differs.

Syntax

<video controls>
  <source>
</video>

From above Syntax controls attribute adds video controls like volume, pause, and play and <source> element allows you to specify alternative video files. The video control should include:

Play
Pause
Volume
Full-screen Mode
Seeking
Captions/Subtitles(if available)
Track(if available)

Attributes: Video tag supports mainly 5 attributes as mentioned below:

autoplay : Makes the video start playing automatically, without waiting for the entire video file to finish downloading.
loop : Through loop you can play the video again and again.
muted : Makes the player muted by default.
preload : This can be set to following value.
- auto : This implies whether the video should be load as soon as the page loads.
- metadata : This implies whether only the video metadata should be loaded.
- none : This implies browser should not load the video when the page loads.
src : This defines the URL of the video that should be played by the video tag.

Note: Always specify the width and height of the video else web page will be confused that how much space the video will be required due to the reason the web page becomes slow down.

Example 1: Using src attribute in below code.

HTML

<!DOCTYPE html>

<html>

<body>

<<!DOCTYPE html>1>

<!DOCTYPE html>3<<!DOCTYPE html>5 <!DOCTYPE html>6<!DOCTYPE html>7<!DOCTYPE html>8<!DOCTYPE html>9<!DOCTYPE html>5>

<!DOCTYPE html>3<<5<6<5>

<!DOCTYPE html>3<html2 html3<!DOCTYPE html>7html5 html6<!DOCTYPE html>7html8 <!DOCTYPE html>90<!DOCTYPE html>91<!DOCTYPE html>7

fiik

Posts: 18Joined: Tue Jun 12, 2018 10:47 am

Quote

by fiik » Fri Oct 16, 2020 9:50 pm

Hi Smiles

here is a link to w3 schools on the HTML 5 player
https://www.w3schools.com/html/html5_video.asp

the option is to have controls or no controls, there is no selecting individual controls
there is an option to set to no controls, and then create your own control buttons using javascript, see same w3schools link for how

Perhaps you should use Plyr extension instead, this gives options for turning various controls on and off.
here is the link to the extension
http://www.wysiwygwebbuilder.com/plyr.html
(note you need to be a full registered member to use extensions)

BaconFries

Posts: 4657Joined: Thu Aug 16, 2007 7:32 pm

Quote

by BaconFries » Sat Oct 17, 2020 12:04 am

As already mentioned there is no standard way to disable individual buttons in the HTML 5 Video / Audio objects. There are ways to use custom scripts (jQuery / JavaScript) to do so which you can implement yourself if you know and understand how to.
On a personal note disabling mute or hiding it from the user is a big no no. Why? well if I enter / visit a site with audio or video playing then I should be able to control it by either pausing or muting it. I shouldn't be forced to listen to it and in most cases if it is forced then I would leave.

With this said most if not all "Modern Browsers" disable auto play back if audio is detected as it was deemed to be annoying (pain in the a**) to users when entering a site with the likes playing.

This is just my two cents worth the user should have control and not forced to listen it like the annoying pop-ups you get when you try to leave a site / web page forcing you to click close to exit...

smile

Posts: 141Joined: Tue Oct 13, 2020 8:22 pmLocation: EUContact:

Website

Quote

by smile » Sat Oct 17, 2020 9:09 pm

fiik wrote: Fri Oct 16, 2020 9:50 pm Hi Smiles

here is a link to w3 schools on the HTML 5 player
https://www.w3schools.com/html/html5_video.asp

the option is to have controls or no controls, there is no selecting individual controls
there is an option to set to no controls, and then create your own control buttons using javascript, see same w3schools link for how

Perhaps you should use Plyr extension instead, this gives options for turning various controls on and off.
here is the link to the extension
http://www.wysiwygwebbuilder.com/plyr.html
(note you need to be a full registered member to use extensions)

While I do not have access to extensions as I have trial version I however asked my friend to test this and indeed the Plyr would be the easy way to do it. However I was told that the extension has errors in chrome dev tools.

I wonder why is that? Can't the extension be made withut this error? Is it artificial stupid limitation of chrome?

Pablo Posts: 18603Joined: Sun Mar 28, 2004 12:00 pmLocation: EuropeContact:

Website

Quote

by Pablo » Sun Oct 18, 2020 7:18 am

Please note that 'plyr' is a third party script. It is provided "AS IS".
However, if it does not work then it most likely related to the local security setting of the browser.
It should work when the player is online.

smile

Posts: 141Joined: Tue Oct 13, 2020 8:22 pmLocation: EUContact:

Website

Quote

by smile » Sun Oct 18, 2020 9:35 am

BaconFries wrote: Sat Oct 17, 2020 9:27 pm As a trial user there is no support as previously mentioned. Also note there is no support on Free extensions they are provided "asis" Also if your friend has access to the extension as a registered user he should report this to Pablo for his attention.

He never uses the extension why he should bother to reprot anything?
Sad that this forum community is with sutch attitude that bugfixing is called support.

Pablo Posts: 18603Joined: Sun Mar 28, 2004 12:00 pmLocation: EuropeContact:

Website

Quote

by Pablo » Sun Oct 18, 2020 9:41 am

This has nothing to do with bugs in the software. The extension is not an official part of the software. This extension was created for my own personal use and I have shared it in case someone else finds it useful, that is why there is no support on (free) extensions. See also the license agreement that came with the extension.

Also note that (reproducible) bugs in the software are usually solved within hours. I do not think you will find a better service anywhere else.

andyp

Posts: 223Joined: Fri Aug 08, 2014 8:56 amLocation: Brighton UKContact:

Website

Quote

by andyp » Sun Oct 18, 2020 10:51 am

smile wrote: Sun Oct 18, 2020 9:35 am
BaconFries wrote: Sat Oct 17, 2020 9:27 pm As a trial user there is no support as previously mentioned. Also note there is no support on Free extensions they are provided "asis" Also if your friend has access to the extension as a registered user he should report this to Pablo for his attention.
He never uses the extension why he should bother to reprot anything?
Sad that this forum community is with sutch attitude that bugfixing is called support.

As you are a potential new user I really must state that WB has what must be the best support there is with issues being resolved within a very short time frame.

You will also get good advice from the forum community.... stick around and brows through the posts...

Making mistakes....and still learning as I go along.. and very grateful to those who know far more than me... :)
http://www.apgraphx.co.uk

BaconFries

Posts: 4657Joined: Thu Aug 16, 2007 7:32 pm

Quote

by BaconFries » Sun Oct 18, 2020 11:14 am

He never uses the extension why he should bother to reprot anything?

If he never uses the extension then how did you get the screenshot?

Sad that this forum community is with sutch attitude that bugfixing is called support.

Where did I say that this was a "Bug"? when I mentioned "Support" it is to your questions of use of the software and of the extension....
Notes:
Extensions are only available for registered users of actively supported versions of WYSIWYG Web Builder!
Extensions are not officially supported, they are made available as an extra service for the users of WYSIWYG Web Builder that find them useful and the software is provided "AS IS"

wwonderfull

Posts: 846Joined: Fri Aug 21, 2020 8:27 amContact:

Website

Quote

by wwonderfull » Sun Oct 18, 2020 12:50 pm

@smile
Our regards on not giving you the proper solution...

WWB#16 is the most advanced and progressive web builder out there on the market. Every year it brings new feature not just reformations or bug fixing. Bug fixing is just the basic and the best service Pablo provides the quickest out there I can dare at that and guarantee. We have a good community here. Some will do anything to help you and some won't help you at all. But Pablo here helps us dedicated each and every one individually and he tries his best.

Nothing to overcome your desires but if you find the product and our communities effort on path I would recommend you to buy a license and try to use the product with its full potentials. This product's value is insignificant when it comes to the passion and dedication Pablo has put to make it top-notch.

We all have a list of feature which we also want in our website but patience is the key.

If you need an awesome website contact
https://needsimplewebsite.com

BaconFries

Posts: 4657Joined: Thu Aug 16, 2007 7:32 pm

Quote

by BaconFries » Sun Oct 18, 2020 2:55 pm

Your are missing one point wwonderful this community or forum it is for registered users who have paid for the software. When you buy a license it helps to contribute to the development of the software and it's support from Pablo on its use. Without paying users there would be no software, no forum, no support... also by being a registered user and providing your order number like what has been asked previously it proves you are not using a illegal version and getting help when not entitled to so it not about who helps and who doesn't...

Note no actuation is being made in anyway here on use of the software.

How to hide HTML video controls in JavaScript?

To hide a video on a web page, use yourVariableName. style. display='none'.

How do I hide controls in HTML video tag?

By setting the controls attribute of the video element to false , we are able to hide the controls but for some reason, when entering full-screen mode they reappear, despite being hidden in normal screen mode. (Why?) The custom controls were hidden below the video in the full-screen mode.