최근에 비디오 재생 이벤트를 모니터링하고 로그 로그를 인쇄 할 수있는 프로젝트를 진행하고 있습니다. 어떤 생각 후에, 나는 JavaScript를 사용 하여이 기능을 구현했으며 코드는 다음과 같습니다.
HTML :
코드 사본은 다음과 같습니다.
<! doctype html>
<html>
<헤드>
<meta http-equiv = "content-type"content = "text/html; charset = utf-8">
<title> 멀티 소스 </title>
</head>
<body>
<video src = "http://www.w3school.com.cn/i/movie.mp4"autoplay> </video>
<video src = "http://www.w3school.com.cn/i/movie.mp4"autoplay> </video>
<video src = "http://www.w3school.com.cn/i/movie.mp4"autoplay> </video>
<video src = "http://www.w3school.com.cn/i/movie.mp4"autoplay> </video>
<video src = "http://www.w3school.com.cn/i/movie.mp4"autoplay> </video>
<video src = "http://www.w3school.com.cn/i/movie.mp4"autoplay> </video>
<video src = "http://www.w3school.com.cn/i/movie.mp4"autoplay> </video>
<video src = "http://www.w3school.com.cn/i/movie.mp4"autoplay> </video>
<video src = "http://www.w3school.com.cn/i/movie.mp4"autoplay> </video>
<video src = "http://www.w3school.com.cn/i/movie.mp4"autoplay> </video>
<video src = "http://www.w3school.com.cn/i/movie.mp4"autoplay> </video>
</body>
</html>
JS :
코드 사본은 다음과 같습니다.
<script type = "text/javaScript">
window.addeventListener ( "로드", getVideoEvent);
함수 getVideoEvent () {
var videos = document.getElementsByTagName ( "비디오");
for (var i = 0; i <videos.length; i ++) {
showeventLog ( "비디오"+(i+1), 비디오 [i]);
}
}
함수 showEventLog (Videonum, Media) {
EventTester = function (e) {
media.addeventListener (e, function () {
console.log (videonum+":"+e);
});
}
EventTester ( "loadStart"); // 클라이언트가 데이터 요청을 시작합니다
EventTester ( "진행"); // 클라이언트가 데이터를 요청하고 있습니다
EventTester ( "삭제"); // 지연된 다운로드
EventTester ( "Abort"); // 클라이언트는 다운로드를 적극적으로 종료합니다 (오류로 인해 발생하지 않음).
EventTester ( "오류"); // 데이터를 요청하는 동안 오류가 발생했습니다
EventTester ( "Stalled"); // 네트워크 속도를 중지합니다
Eventtester ( "Play"); // play ()와 자동 재생이 재생 될 때 트리거되었습니다
EventTester ( "일시 중지"); // pause () 트리거
EventTester ( "LoadedMetadata"); // 자원 길이를 성공적으로 얻습니다
EventTester ( "loadedData"); //
EventTester ( "대기"); // 오류가 아니라 데이터를 기다리고 있습니다
Eventtester ( "재생"); // 재생을 시작합니다
EventTester ( "Canplay"); // 재생할 수 있지만 중간에 로딩되어 일시 중지 될 수 있습니다.
EventTester ( "canplaythrough"); // 재생할 수 있고, 모든 노래가로드됩니다
EventTester ( "찾기"); //수색
Eventtester ( "Seeked"); // 검색이 완료되었습니다
EventTester ( "TimeUpdate"); // 재생 시간이 변경됩니다
EventTester ( "종료"); // 재생이 끝납니다
EventTester ( "RateChange"); // 재생 속도가 변경됩니다
EventTester ( "DurationChange"); // 리소스 길이가 변경됩니다
EventTester ( "VolumeChange"); // 볼륨 변경
}
</스크립트>
친구,이 기사의 아이디어를 읽어주세요. 도움이되기를 바랍니다.