Stylize the native HTML5 video player

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

I would not be able to make a functional example of this right away, but have this example here / a> for you to take a look.

$('#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 CSS, you edit the player ( .player ) and video ( .video ) classes. 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 , .player .v-change-X span:after , %code% and classes %code% where X ranges from 1 to 11 (both included). >

There are even more functions to do in jQuery.