English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Событие timeupdate срабатывает при обновлении currentTime. Частота срабатывания этого события определяется системой, но гарантируется, что оно будет срабатывать 4-66 раз в секунду (при условии, что обработка события не займет более 250 мс). Рекомендуется代理 пользователей изменять частоту событий в зависимости от нагрузки системы и среднего значения затрат на обработку событий, чтобы обновление UI не влияло на декодирование видео.
Справочник по DOM аудио/видео HTML
После изменения положения воспроизведения видео текущая позиция отображается в секундах:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Использование события ontimeupdate аудио/видео в HTML - базовый учебник (oldtoolbag.com)</title>
</head>
<body>
<p>В этом примере мы используем HTML DOM для добавления события "ontimeupdate" к элементу video.
Функция вызывается при начале воспроизведения видео пользователем или перемещении положения воспроизведения видео, и показывает положение воспроизведения видео.</p>
<video id="myVideo" width="320" height="176" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Ваш браузер не поддерживает тег HTML5 video.
</video>
<p>Позиция воспроизведения: <span id="demo"></span></p>
<script>
// Получить элемент video с id="myVideo"
var vid = document.getElementById("myVideo");
// Добавление события ontimeupdate к элементу video, если положение воспроизведения изменяется, выполняется функция
vid.ontimeupdate = function() {myFunction()};
function myFunction()
{
// Показать положение воспроизведения видео в элементе p с id="demo"
document.getElementById("demo").innerHTML = vid.currentTime;
}
</script>
</body>
</html>Проверьте, посмотрите ‹/›Событие timeupdate срабатывает при изменении положения воспроизведения аудио/видео.
Это событие может быть вызвано в следующих случаях:
Воспроизведение аудио/видео
Перемещение положения воспроизведения аудио/видео
Совет: Событие timeupdate обычно используется с объектами Audio/Video:currentTime Свойство, используемое вместе с атрибутом, возвращает положение воспроизведения аудио/видео (в секундах).
IEFirefoxOperaChromeSafari
В HTML:
<audio|video ontimeupdate="myScript">Попробуйте:
В JavaScript:
audio|video.ontimeupdate=function(){myScript};Попробуйте:
В JavaScript, для использования метода addEventListener():
audio|video.addEventListener("timeupdate", myScript);Попробуйте:
Внимание: Microsoft Internet Explorer 8 и более ранние версии не поддерживают addEventListener() Методы.
Технические детали| Поддерживаемые теги HTML: | <audio> и <video> |
|---|---|
| Поддерживаемые объекты JavaScript: | Audio, Video |
Когда положение воспроизведения аудио изменяется, показывается текущее положение воспроизведения аудио (в секундах):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Использование события ontimeupdate аудио/видео в HTML - базовый учебник (oldtoolbag.com)</title>
</head>
<body>
<p>В этом примере мы используем HTML DOM для добавления события "ontimeupdate" к элементу audio.</p>
Функция вызывается при начале воспроизведения видео или перемещении позиции воспроизведения аудио, и отображает позицию воспроизведения видео.</p>
<audio id="myAudio" controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Ваш браузер не поддерживает элемент audio.
</audio>
<p>Позиция воспроизведения: <span id="demo"></span></p>
<script>
// Получить элемент audio с id="myAudio"
var aud = document.getElementById("myAudio");
// Добавить событие ontimeupdate для элемента audio и выполнить функцию при изменении позиции воспроизведения
aud.ontimeupdate = function()
{
myFunction();
};
function myFunction()
{
// Показать позицию воспроизведения аудио в элементе <p> с id="demo"
document.getElementById("demo").innerHTML = aud.currentTime;
}
</script>
</body>
</html>Проверьте, посмотрите ‹/›Используйте атрибут currentTime для установки позиции воспроизведения на 5 секунд:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Использование события ontimeupdate аудио/видео в HTML - базовый учебник (oldtoolbag.com)</title>
</head>
<body>
<video id="myVideo" width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Ваш браузер не поддерживает тег video.
</video><br>
<button onclick="setCurTime()" type="button">Установить позицию воспроизведения на 5 секунд</button>
<p id="demo"></p>
<script>
// Получить элемент video с id="myVideo"
var vid = document.getElementById("myVideo");
// Добавить событие "timeupdate" для элемента video
vid.addEventListener("timeupdate", getCurTime);
// Показать положение воспроизведения видео в элементе p с id="demo"
function getCurTime()
{
document.getElementById("demo").innerHTML = "Текущая позиция воспроизведения: " + vid.currentTime + " секунд.";
}
// Установить положение воспроизведения на 5 секунд
function setCurTime()
{
vid.currentTime = 5;
}
</script>
</body>
</html>Проверьте, посмотрите ‹/›