コメント:ビデオオブジェクトは、HTML5に追加された新しいオブジェクトです。さまざまな形式のビデオのオンライン再生をサポートしています。比較的強力な機能があります。ビデオオブジェクトは、OnTimeUpDateイベントを通じて現在の再生の進捗を報告できます。以下は、ビデオオブジェクトのオンタイムアップデートイベントの問題の紹介です。興味のある友達はそれを参照できます。
日付は、HTML5ビデオオブジェクトを使用するビデオ再生ページにあります。これは、HTML5に追加された新しいオブジェクトです。さまざまな形式のビデオのオンライン再生をサポートしています。比較的強力な機能を備えており、多くのイベントを拡大しています。 JavaScriptスクリプトを介してビデオ再生を制御できます。次の2つのリンクを参照してください。ビデオオブジェクトは、OnTimeUpDateイベントを通じて現在の再生の進捗を報告できます。同時に、このイベントは、章の切り替えやビデオ再生情報の進行時に追加情報を表示するなど、ビデオ再生の状況に応じてページ上の他の要素を制御することもできます。これが例です:
<!doctype html>
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<Meta http-equiv = "x-ua-compatible" content = "ie = edge" />
<title> </title>
</head>
<body>
<script type = "text/javascript">
function timeUpdate(){
document.getElementById( 'time')。innerhtml = video.currenttime;
}
関数durationchange(){
document.getElementById( 'duration')。innerhtml = video.duration;
}
関数SeekVideo(){
document.getElementById( 'Video')。現在のTime = document.getElementById( 'SeekText')。value;
}
window.onload = function(){
var videoplayer = document.getElementById( "ビデオ");
videoplayer.ontimeupdate = function(){timeupdate(); };
};
</script>
<div>
<ビデオコントロール=「コントロール」
poster = "./ images/videgogrund1.png"
src = "./ videosource/video1.mp4"
officechange = "durationchange()" />
</div>
<div>時間:<span> 0 </span> of <span> 0 </span>秒。</div>
<div>
<入力型= "text" />
<入力型= "button" value = "seek video" />
</div>
</body>
</html>
もちろん、次のようなページ上の他の要素を使用するなど、ビデオオブジェクトに属性やハンギングイベントを動的に追加することもできます。
video.ontimeUpdate = function(){getCurrentVideoposition(); };
ただし、上記のコード行はChromeで無効であるように見えます。代わりにAddEventListenerを使用できます。
videoplayer.addeventlistener( "timeupdate"、function(){getCurrentVideoposition();}、false);
Onchromeがビデオ要素にOntimeUpDateイベントを直接ハングすることができない理由はわかりませんが、AddEventListenerメソッドを介してイベントを追加する必要があります。ただし、AddEventListenerはIEおよびFirefoxブラウザとも互換性があるため、渡す必要があります。