Recentemente, estou trabalhando em um projeto que requer monitoramento de eventos de reprodução de vídeo e poder imprimir logs de logs. Depois de pensar um pouco, implementei essa função usando o JavaScript, e o código é o seguinte:
Html:
A cópia do código é a seguinte:
<! Doctype html>
<html>
<head>
<meta http-equiv = "content-type" content = "text/html; charset = utf-8">
<title> Multi Source </title>
</head>
<Body>
<video src = "http://www.w3school.com.cn/i/movie.mp4" Controla a AutoPlay> </video>
<video src = "http://www.w3school.com.cn/i/movie.mp4" Controla a AutoPlay> </video>
<video src = "http://www.w3school.com.cn/i/movie.mp4" Controla a AutoPlay> </video>
<video src = "http://www.w3school.com.cn/i/movie.mp4" Controla a AutoPlay> </video>
<video src = "http://www.w3school.com.cn/i/movie.mp4" Controla a AutoPlay> </video>
<video src = "http://www.w3school.com.cn/i/movie.mp4" Controla a AutoPlay> </video>
<video src = "http://www.w3school.com.cn/i/movie.mp4" Controla a AutoPlay> </video>
<video src = "http://www.w3school.com.cn/i/movie.mp4" Controla a AutoPlay> </video>
<video src = "http://www.w3school.com.cn/i/movie.mp4" Controla a AutoPlay> </video>
<video src = "http://www.w3school.com.cn/i/movie.mp4" Controla a AutoPlay> </video>
<video src = "http://www.w3school.com.cn/i/movie.mp4" Controla a AutoPlay> </video>
</body>
</html>
JS:
A cópia do código é a seguinte:
<script type = "text/javascript">
window.addeventListener ("load", getVideoEvent);
função getVideoEvent () {
var videos = document.getElementsByTagName ("vídeo");
for (var i = 0; i <videos.length; i ++) {
showEventLog ("Video"+(i+1), Videoes [i]);
}
}
função showeventlog (videonum, mídia) {
EventTester = function (e) {
Media.addeventListener (e, function () {
console.log (videonum+":"+e);
});
}
EventTester ("loadstart"); // O cliente começa a solicitar dados
EventTester ("Progresso"); // O cliente está solicitando dados
EventTester ("Suspender"); // download atrasado
EventTester ("aborto"); // O cliente encerra ativamente o download (não causado por um erro),
EventTester ("Erro"); // foi encontrado um erro ao solicitar dados
EventTerster ("paralisado"); // Pare a velocidade da rede
EventTester ("Play"); // desencadeado quando o play () e o AutoPlay começam a jogar
EventTester ("Pausa"); // pausa () gatilhos
EventTester ("LoadEdMetadata"); // obtenha com sucesso o comprimento do recurso
EventTester ("LoadEdData"); //
EventTester ("Waiting"); // esperando por dados, não um erro
EventTerster ("tocando"); // Inicie a reprodução
EventTester ("Canplay"); // pode tocar, mas pode ser pausado devido ao carregamento no meio
EventTester ("CanPlaythrough"); // pode ser reproduzido, todas as músicas são carregadas
EventTester ("Buscando"); // pesquisando
EventTester ("procurado"); // Pesquisa concluída
EventTester ("TimeUpdate"); // mudanças no tempo de reprodução
EventTester ("Ended"); // A reprodução termina
EventTester ("Ratechange"); // A taxa de reprodução muda
EventTester ("DurationChange"); // alterações de comprimento de recurso
EventTester ("Volumechange"); // alteração de volume
}
</script>
Amigos, por favor, leia as idéias neste artigo, espero que seja útil para você