Mediaelement.js - Would like to Remove ALL Controls - Only Display Video

Question

I am trying to replace my swf header in my webpage with mp4. I like MediaElement.js but I can't remove the controls. I don't want to hide the controls, I want to remove them completely... and just display the looping video.

Any suggestions would be greatly appreciated.

Solution 1

I think a better solution is:

Set features property:

features: []

Insert this in your css:

.mejs-container .mejs-controls { visibility:hidden !important; }

That way you can pause-play by clicking the video.

Solution 2

You have to combine those answers:

1. set

   features: [],
   

2. insert this in your css:

   .mejs-container .mejs-controls {
     display: none !important;
   }
   

Important

When you do this, you can't pause the video by clicking on it.

Solution 3

when you set up the MediaElement options you can set features:

to remove everything just set it to an empty array

...
features: ['playpause','progress','current','duration','tracks','volume','fullscreen'],
...

becomes
...
features: [],
...

Solution 4

Remove the "controls" attribute out of the video tag completely.

Generally in the video tag, any attribute that you want to set to false, should be removed completely instead of setting it to "false" or "".

Careful with removing attributes from within the video tag. Removing the "controls" attribute from the video tag renders a bug in Safari : Safari doesn't play the video anymore. It has something to do with Safari waiting for the controls to be loaded -wether native or not- before authorizing the video to be played.

Solution 5

Remove the "controls" attribute out of the video tag completely.

<video id="my-video" preload="auto" width="860" height="650">

Generally in the video tag, any attribute that you want to set to false, should be removed completely instead of setting it to "false" or "".

View more solutions

Comments

[Admin]

This just removes the options within the bar but does not remove the bar. The bar displays with no options in it. I am trying to remove the bar completely.

[dubvfan87]

i think you will have to go into the css supplied with mediaelement to remove it or make your own custom css skin.

[Vish]

This accepted answer. Point 2 removes black seek shadow.