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.

score 13 · Answer 1 · edited Feb 12 '16 at 14:29

13

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.

edited Feb 12 '16 at 14:29

Rahil Wazir

10,007
11
42
64

answered Jan 06 '12 at 00:59

Camilo Hoyos

131
1
3

score 8 · Answer 2 · edited Oct 29 '12 at 09:36

8

You have to combine those answers:

set
```
features: [],
```

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.

edited Oct 29 '12 at 09:36

j0k

22,600
28
79
90

answered Jan 05 '12 at 15:29

Robert

81
2

This accepted answer. Point 2 removes black seek shadow. – Vish Dec 29 '15 at 12:56

score 4 · Answer 3 · answered Dec 12 '12 at 11:12

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.

score 4 · Answer 4 · answered Nov 08 '11 at 20:34

4

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: [],
...

answered Nov 08 '11 at 20:34

dubvfan87

641
5
18

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. – user1034552 Nov 08 '11 at 22:18
i think you will have to go into the css supplied with mediaelement to remove it or make your own custom css skin. – dubvfan87 Nov 09 '11 at 15:11

score 1 · Answer 5 · answered Feb 01 '12 at 21:53

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 "".

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

5 Answers5