Comentário: O objeto de vídeo é um novo objeto adicionado no HTML5. Ele suporta reprodução on -line de vídeos em vários formatos. Tem funções relativamente poderosas. O objeto de vídeo pode relatar o progresso atual de reprodução através do evento OnTimeUpdate. Abaixo está uma introdução ao problema do evento OnTimeUpdate do objeto de vídeo. Amigos interessados podem se referir a ele.
A data está em uma página de reprodução de vídeo, que usa o objeto de vídeo html5. Este é um novo objeto adicionado no HTML5. Ele suporta reprodução on -line de vídeos em vários formatos. Possui funções relativamente poderosas e expandiu muitos eventos. Ele pode controlar a reprodução de vídeo através de scripts JavaScript. Consulte os dois links a seguir:O objeto de vídeo pode relatar o progresso atual de reprodução através do evento OnTimeUpdate. Ao mesmo tempo, o evento também pode controlar outros elementos na página de acordo com a situação de reprodução de vídeo, como alternar os capítulos e exibir informações adicionais como o progresso da reprodução de vídeo. Aqui está um exemplo:
<! Doctype html>
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv = "x-ua compatível com" content = "ie = Edge" />
<Title> </title>
</head>
<Body>
<script type = "text/javascript">
função timeUpdate () {
document.getElementById ('time'). innerhtml = video.currenttime;
}
função durationChange () {
document.getElementById ('duração'). innerhtml = video.duration;
}
função seekvideo () {
document.getElementById ('video'). currentTime = document.getElementById ('SeekText').
}
window.onload = function () {
var videoPlayer = document.getElementById ("vídeo");
videoplayer.ontimeUpdate = function () {timeUpdate (); };
};
</script>
<div>
<Video Controls = "Controls"
poster = "./ imagens/videoground1.png"
src = "./ videosource/video1.mp4"
OfficeChange = "DurationChange ()" />
</div>
<div> Tempo: <span> 0 </span> de <span> 0 </span> segundos. </div>
<div>
<input type = "text" />
<input type = "button" value = "procure vídeo" />
</div>
</body>
</html>
Obviamente, você também pode adicionar dinamicamente atributos ou eventos pendurados ao objeto de vídeo, como usar outros elementos na página, como:
video.ontimeUpdate = function () {getCurrentVideoPosition (); };
No entanto, a linha de código acima parece ser inválida no Chrome, você pode usar o addEventListener:
videoplayer.addeventListener ("timeUpdate", function () {getCurrentVideoPosition ();}, false);
Não sei por que o Onchrome não pode pendurar diretamente o evento OnTimeUpdate no elemento de vídeo, mas deve adicionar eventos através do método AddEventListener. No entanto, o AddEventListener também é compatível com os navegadores do IE e do Firefox, por isso deve ser passado.