주석 : 비디오 객체는 HTML5에 추가 된 새로운 객체입니다. 다양한 형식의 비디오 재생을 지원합니다. 비교적 강력한 기능이 있습니다. 비디오 객체는 ontimeupdate 이벤트를 통해 현재 재생 진행 상황을보고 할 수 있습니다. 아래는 비디오 객체의 ontimeupdate 이벤트 문제에 대한 소개입니다. 관심있는 친구들이 그것을 언급 할 수 있습니다.
날짜는 HTML5 비디오 객체를 사용하는 비디오 재생 페이지에 있습니다. 이것은 HTML5에 추가 된 새로운 객체입니다. 다양한 형식의 비디오 재생을 지원합니다. 비교적 강력한 기능을 가지고 있으며 많은 이벤트를 확장했습니다. JavaScript 스크립트를 통해 비디오 재생을 제어 할 수 있습니다. 다음 두 링크를 참조하십시오.비디오 객체는 ontimeupdate 이벤트를 통해 현재 재생 진행 상황을보고 할 수 있습니다. 동시에, 이벤트는 비디오 재생 상황에 따라 페이지의 다른 요소를 제어 할 수 있으며, 예를 들어 챕터를 전환하고 비디오 재생 진행으로 추가 정보를 표시하는 것과 같은 추가 정보를 제어 할 수 있습니다. 예는 다음과 같습니다.
<! doctype html>
<html xmlns = "http://www.w3.org/1999/xhtml">
<헤드>
<meta http-equiv = "x-ua compatible"content = "ie = edge" />
<제목> </title>
</head>
<body>
<script type = "text/javaScript">
함수 TimeUpdate () {
document.getElementById ( 'time'). innerHtml = video.currentTime;
}
함수 durationchange () {
document.getElementById ( 'duration'). innerhtml = video.duration;
}
함수 SeekVideo () {
document.getElementById ( 'video'). currenttime = document.getElementById ( 'seekText'). 값;
}
Window.onload = function () {
var videoplayer = document.getElementById ( "비디오");
videoplayer.ontimeupdate = function () {timeupdate (); };
};
</스크립트>
<div>
<video controls = "Controls"
포스터 = "./ 이미지/videoground1.png"
src = "./ videoSource/video1.mp4"
OfficeChange = "durationchange ()" />
</div>
<div> 시간 : <span> 0 </span> of <span> 0 </span> 초. </div>
<div>
<입력 유형 = "텍스트" />
<입력 유형 = "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 브라우저와도 호환되므로 전달해야합니다.