最近、私はビデオ再生イベントの監視とログログを印刷できるプロジェクトに取り組んでいます。いくつかの考えの後、私はJavaScriptを使用してこの関数を実装しましたが、コードは次のとおりです。
HTML：
コードコピーは次のとおりです。
<！doctype html>
<html>
<head>
<meta http-equiv = "content-type" content = "text/html; charset = utf-8">
<title>マルチソース</title>
</head>
<body>
<ビデオsrc = "http://www.w3school.com.cn/i/movie.mp4" Controls autoplay> </video>
<ビデオsrc = "http://www.w3school.com.cn/i/movie.mp4" Controls autoplay> </video>
<ビデオsrc = "http://www.w3school.com.cn/i/movie.mp4" Controls autoplay> </video>
<ビデオsrc = "http://www.w3school.com.cn/i/movie.mp4" Controls autoplay> </video>
<ビデオsrc = "http://www.w3school.com.cn/i/movie.mp4" Controls autoplay> </video>
<ビデオsrc = "http://www.w3school.com.cn/i/movie.mp4" Controls autoplay> </video>
<ビデオsrc = "http://www.w3school.com.cn/i/movie.mp4" Controls autoplay> </video>
<ビデオsrc = "http://www.w3school.com.cn/i/movie.mp4" Controls autoplay> </video>
<ビデオsrc = "http://www.w3school.com.cn/i/movie.mp4" Controls autoplay> </video>
<ビデオsrc = "http://www.w3school.com.cn/i/movie.mp4" Controls autoplay> </video>
<ビデオsrc = "http://www.w3school.com.cn/i/movie.mp4" Controls autoplay> </video>
</body>
</html>
JS：
コードコピーは次のとおりです。
<script type = "text/javascript">
window.addeventlistener（ "load"、getVideoevent）;
関数getVideoevent（）{
var videos = document.getElementsByTagname（ "ビデオ"）;
for（var i = 0; i <videos.length; i ++）{
showeventlog（ "video"+（i+1）、video [i]）;
}
}
function showeventlog（videonum、media）{
eventTester = function（e）{
media.addeventlistener（e、function（）{
console.log（videonum+"："+e）;
}）;
}
EventTester（ "LoadStart"）; //クライアントはデータの要求を開始します
EventTester（ "Progress"）; //クライアントはデータを要求しています
EventTester（ "Suspend"）; //ダウンロードの遅延
EventTester（ "Abort"）; //クライアントはダウンロードを積極的に終了します（エラーによるものではありません）、
EventTester（ "エラー"）; //データのリクエスト中にエラーが発生しました
EventTester（ "Stalled"）; //ネットワーク速度を停止します
EventTester（ "Play"）; // play（）と自動再生が再生を開始するとトリガーされます
EventTester（ "Pause"）; //一時停止（）トリガー
EventTester（ "LoadedMetadata"）; //リソースの長さを正常に取得します
EventTester（ "LoadedData"）; //
EventTester（ "Waiting"）; //エラーではなく、データを待っています
EventTester（ "Playing"）; //再生を開始します
EventTester（ "Canplay"）; //遊ぶことができますが、中央にロードされるために一時停止される可能性があります
EventTester（ "Canplaythrough"）; //プレイでき、すべての曲がロードされます
EventTester（ "Seeking"）; //検索
EventTester（ "Seeced"）; //検索完了
EventTester（ "TimeUpDate"）; //再生時間の変更
EventTester（ "Ended"）; //再生は終了します
EventTester（ "Ratechange"）; //再生率が変更されます
EventTester（ "DurationChange"）; //リソースの長さの変更
EventTester（ "Volumechange"）; //ボリュームの変更
}
</script>
友達、この記事のアイデアを読んでください、私はそれがあなたに役立つことを願っています