Stylize the native HTML5 video player

Asked

Viewed 1,473 times

0

Is there any way to style the native HTML5 video player? If so, how? Note: I do not create my own player because it is only a basic change.

html5 css3

  • You can probably modify something basic via CSS (not my area), but if you really want to modify it, you need to use other HTML/JS elements to create a custom player.

  • Normally each browser has its own "css" style of player, here you can see an image https://www.htmlgoodies.com/imagesvr_ce/3437/Image1.png. if you are not clearer in what you need it is difficult to answer you. If possible put an image or explain better what you need.

1 answer

1

Yes, there are ways to style the HTML5 video/media player. You use CSS and Javascript for this.

I couldn’t make a functional example of this right away, but there’s this example here for you to take a look.

According to the link, you can create some very simple functions in Javascript/Jquery to be able to edit the player only with CSS, they are:

$('#seuvideo')[0].play(); // Iniciar visualização do video
$('#seuvideo')[0].pause(); // Pausar visualização
$('#seuvideo')[0].volume = 1; // Define o volume, valor deve ser entre 0 e 1.
$('#seuvideo')[0].currentTime; // Momento atual do video
$('#seuvideo')[0].duration; // Duração do video
$('#seuvideo')[0].buffered; // Quanto tempo, em segundos, que seu video está bufferizado
if($('#seuvideo')[0].canPlayType('video/mp4')) { ... // Se o video pode ser visto com esse formato
$('#seuvideo')[0].requestFullscreen; // (experimental) deixa o video ocupando a tela toda do computador.

Now the CSS, you edit the player classes (.player) and video (.video). You can also use the entries .video:hover .player, .player .progress, .player .progress-bar, .player .button-holder, .player .progress-button, .player [class^="buffered"], .player .play-pause, .player .play, .player .pause-button, .player .play .pause-button, .player .pause .play-button, .player .pause-button, .player .pause-button span, .player .pause-button span:first-of-type, .player .time, .player .stime .ttime, .player .play:hover, .player .play:active, .pause-button:active span, .player .pause-button:hover span, .player .volume, .player .volume-icon, .player .volume-icon-hover, .player .volume-holder, .player .valume-bar-holder, .player .volume-button, .player .volume-button-holder, .pplayer .volume-bar, .player .fullscreen, .player .fullscreen a, .player .volume-icon span, .player .volume-icon span:before, .player .volume-icon span:after, .player .volume-icon span:before, .player .volume-icon span:after and the classes .player .v-change-X span:after where X varies from 1 to 11 (both included).

There are even more functions to do in jQuery.

Browser other questions tagged html5 css3

You are not signed in. Login or sign up in order to post.