Comentário: O HTML5 fornece novas tags de vídeo, que podem reproduzir o vídeo diretamente sem programação. Você só precisa escrever algumas linhas de código simples para personalizar o jogador.
Página da web html<Body>
<Section>
<Video>
<fonte src = "Videos/Introdução.MP4">
</video>
<MAV>
<div>
<button type = "button"> play </button>
</div>
<div>
<div> </div>
</div>
<div> </div>
</Arn>
</seção>
</body>
estilo CSS
corpo{
Alinhamento de texto: centro;
}
cabeçalho, seção, rodapé, de lado, navegação, artigo, HGroup {
exibição: bloco;
}
#pele{
Largura: 700px;
margem: 10px automático;
preenchimento: 5px;
Antecedentes: vermelho;
borda: 4px preto sólido;
Radio de fronteira: 20px;
}
NAV {
margem: 5px 0px;
}
#buttons {
flutuar: esquerda;
Largura: 70px;
Altura: 22px;
}
#defaultBar {
Posição: relativa;
flutuar: esquerda;
Largura: 600px;
Altura: 14px;
preenchimento: 4px;
borda: 1px preto sólido;
Antecedentes: amarelo;
}
/*ProgressBar está dentro do DefaultBar*/
#ProgressBar {
Posição: Absoluto;
Largura: 0px; /*Controle muda com JavaScript*/
Altura: 14px; /* e DefaultBar são a mesma altura*/
Antecedentes: azul;
}
Código JavaScript
função dofisrt ()
{
barsize = 600; // Tenha cuidado para não usar unidades PX e não use VAR, é uma variável global
myMovie = document.getElementById ('myMovie');
PlayButton = document.getElementById ('PlayButton');
bar = document.getElementById ('defaultBar');
ProgressBar = document.getElementById ('ProgressBar');
playbutton.addeventListener ('click', playorpause, falso); // O terceiro parâmetro é sempre falso, registre o manipulador de eventos para a fase de bolhas.
bar.addeventListener ('clique', clickedbar, false);
}
// Controle de reprodução de filmes e pare
function playorpause () {
if (! myMovie.Paised &&! mymovie.end) {
myMovie.Pause ();
playbutton.innerhtml = 'play';
window.clearInterval (UPDATEDBAR);
}outro{
myMovie.Play ();
playbutton.innerhtml = 'pausa';
UpdateBar = setInterval (atualização, 500);
}
}
// Controle a exibição dinâmica da barra de progresso
função update () {
if (! myMovie.end) {
Var size = parseint (mymovie.currenttime*barsize/mymovie.draturation);
ProgressBar.style.width = size+'px';
}outro{
ProgressBar.style.width = '0px';
playbutton.innerhtml = 'play';
window.clearInterval (UPDATEDBAR);
}
}
// Método do controle da barra de progresso do mouse clique
função clickedbar (e) {
if (! myMovie.Paised &&! mymovie.end) {
var mousex = e.pagex-Bar.offsetLeft;
var newTime = mousex*mymovie.duration/barsize; // novo horário de partida
myMovie.CurrentTime = newTime;
ProgressBar.style.width = mousex+'px';
window.clearInterval (UPDATEDBAR);
}
}
window.addeventListener ('load', dofisrt, false);
Ainda bem, eu peguei a parte do código