Комментарий: видео -объект - это новый объект, добавленный в HTML5. Он поддерживает онлайн -воспроизведение видео в различных форматах. Он имеет относительно мощные функции. Video Object может сообщить о текущем прогрессе воспроизведения через событие OutimeUpdate. Ниже приводится введение в проблему события OutmeupDate видео объекта. Заинтересованные друзья могут ссылаться на это.
Дата находится на странице воспроизведения видео, которая использует видео -объект HTML5. Это новый объект, добавленный в HTML5. Он поддерживает онлайн -воспроизведение видео в различных форматах. Он имеет относительно мощные функции и расширил много событий. Он может управлять воспроизведением видео через сценарии JavaScript. Обратитесь к следующим двум ссылкам:Видео объект может сообщить о текущем прогрессе воспроизведения через событие OutimeUpdate. В то же время, событие может также контролировать другие элементы на странице в соответствии с ситуацией воспроизведения видео, такой как переключение глав и отображение дополнительной информации в качестве прогресса воспроизведения видео. Вот пример:
<! Doctype html>
<html xmlns = "http://www.w3.org/1999/xhtml">
<голова>
<meta http-equiv = "x-ua-совместимый" content = "ie = edge" />
<title> </title>
</head>
<тело>
<script type = "text/javascript">
функция timeUpdate () {
document.getElementbyId ('Time'). innerHtml = video.currenttime;
}
функция durationChange () {
document.getElementById ('продолжительность'). innerHtml = video.duction;
}
функция seekVideo () {
document.getElementbyId ('video'). currentTime = document.getElementById ('eakeText'). Value;
}
window.onload = function () {
var videoOplayer = document.getElementById ("Видео");
VideoPlayer.ontimeupdate = function () {timeupdate (); };
};
</script>
<div>
<видео Controls = "Controls"
Poster = "./ Images/VideoGround1.png"
src = "./ VideoSource/Video1.mp4"
OfficeeChange = "durationChange ()" />
</div>
<div> Время: <pan> 0 </span> из <pan> 0 </span> секунд. </div>
<div>
<input type = "text" />
<input type = "button" value = "seek video" />
</div>
</body>
</html>
Конечно, вы также можете динамически добавить атрибуты или висящие события в видео объект, такие как использование других элементов на странице, например:
video.ontimeupdate = function () {getCurrentVideoPosition (); };
Тем не менее, вышеуказанная строка кода, по -видимому, неверна на Chrome, вы можете использовать AddEventListener вместо этого:
VideoPlayer.addeventListener ("TimeUpdate", function () {getCurrentVideoPosition ();}, false);
Я не знаю, почему онкром не может напрямую повесить событие OuttimeUpdate на видео -элементе, но должен добавить события через метод addeventListener. Тем не менее, AddEventListener также совместим с браузерами IE и Firefox, поэтому его следует пройти.