CODEWITHSUNDEEP
javascriptcustom-controlshtml5-video
Vettan Maximillion
Vettan Maximillion

Reputation: 167

Modify default HTML5 video controls

I have a rather unusual question for you all; it might be foolish but I am new to this area and I would really appreciate some help.

As the title suggests I was wondering if there is a way to disable a specific button from the default browser controls for the HTML5 video.

I know that each browser has its own somewhat unique looking set of controls so I don't think that I can overlay the button with CSS. If it is impossible is it maybe possible to somehow tie via Javascript the event of the video going full screen to another event?

I was looking into making the custom controls or using the pre-made players but if at all possible I would like to get away without using either.

I appreciate any help.

Upvotes: 1

Views: 9110

Answers (1)

okcoker
okcoker

Reputation: 1349

You can't hide specific native controls. You can either use them or hide them via the controls attribute.

As far as using listening to fullscreen events along with other events the video API provides, longtail does extensive research on compatibilities or lack thereof within different browsers and devices.

You can make your own css controls on top of the video element and control different actions via the html5 media api demonstrated here.

For fullscreen type things, I'd recommend looking through the code here as it was written for the Vimeo HTML5 player specifically.

It's kind of a nightmare dealing with the Video API depending how much support you're trying to achieve.

Upvotes: 3

Related Questions