Руководство по HTML

Полный список HTML-тегов

Событие seeked DOM аудио/видео HTML

Когда завершается операция поиска, текущая позиция воспроизведения изменяется, и свойство поиска изменяется на false, происходит событие поиска.

Руководство по DOM аудио/видео HTML

Онлайн-пример

После того как пользователь завершает перемещение/прыжок к новому положению в видео, напомните текст:

Пример

<!DOCTYPE　html>
<html>
<head>
<meta charset="utf-8">
<title>Использование события onseeked в HTML аудио/видео - базовый учебник (oldtoolbag.com)</title>
</head>
<body>
<p>Перемещение положения воспроизведения видео</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>
<script>
var　vid = document.getElementById("myVideo");
vid.onseeked　=　function()　
{
　　　　alert("Операция адресации завершена!");
};
</script>　
</body>
</html>

Проверьте ‹/›

Определение и использование

Событие search происходит, когда пользователь завершает перемещение/прыжок к новому положению в аудио/видео.

Совет: 　Противоположным событием для seeked являетсяseeking события.

Совет: Использование объекта Audio/Video currentTime Свойство для получения положения воспроизведения видео.

Совместимость браузеров

IEFirefoxOperaChromeSafari

Грамматика

В HTML:

<audio|video onseeked="myScript">Попробуйте это

В JavaScript:

audio|video.onseeked=function(){myScript};Попробуйте это

В JavaScript, используя метод addEventListener():

audio|video.addEventListener("seeked", myScript);Попробуйте это

Внимание: Microsoft Internet Explorer 8 и более ранние версии IE не поддерживают addEventListener() Методы.

Технические детали

Поддерживаемые теги HTML:	<audio> и <video>
Поддерживаемые объекты JavaScript:	Audio, Video

Онлайн-пример

Этот пример демонстрирует событие seeking и Различие между событием seeked:

Пример

<!DOCTYPE　html>
<html>
<head>
<meta charset="utf-8">
<title>Использование события onseeked в HTML аудио/видео - базовый учебник (oldtoolbag.com)</title>
</head>
<body>
<p>Этот пример демонстрирует различие между событиями <strong>seeking</strong> и <strong>seeked</strong>:</p>
<p>Событие <strong>seeking</strong> срабатывает каждый раз, когда пользователь начинает перемещение/прыжок видео/аудио (audio/video) к новому положению.</p>
<p>Событие <strong>seeked</strong> срабатывает, когда пользователь завершает перемещение/прыжок видео/аудио (audio/video) к новому положению.</p>
<p>Перемещение положения воспроизведения видео. <strong>Совет:</strong> Попробуйте установить кнопку мыши и переместить видео.
<video onseeking="myFunction()" onseeked="mySecondFunction()" width="320" height="176" controls>
　　<source src="mov_bbb.mp4" type="video/mp4">
　　<source src="mov_bbb.ogg" type="video/ogg">
　　Ваш браузер не поддерживает тег HTML5 video.
</video>
<p>Триггер seeking:　<span　id="demo"></span>　раз.</p>
<p>Триггер seeked:　<span　id="demo2"></span>　раз.</p>
<script>
x = 0;
function　myFunction()　
{
　　　　document.getElementById("demo").innerHTML = x += 1;
}
y = 0;
function　mySecondFunction()　
{
　　　　document.getElementById("demo2").innerHTML = y += 1;
}
</script>
</body>
</html>

Проверьте ‹/›

Онлайн-пример

При перемещении пользователя к новому положению в видео используйте свойство currentTime объекта Video для отображения текущей позиции воспроизведения:

Пример

<!DOCTYPE　html>
<html>
<head>
<meta charset="utf-8">
<title>Использование события onseeked в HTML аудио/видео - базовый учебник (oldtoolbag.com)</title>
</head>
<body>
<p>В этом примере мы добавили "seeked" событие для элемента video.　Свойство currentTime возвращает текущую позицию воспроизведения.</p>
<p>Переместитесь в новое положение в видео.</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");
//　Добавление事件的 seeked для video, выполнение функции после завершения операции поиска
vid.addEventListener("seeked",　myFunction);
function　myFunction()　
{
　　　　//　　Отображается в элементе с id="demo"　p　video　текущая позиция воспроизведения
　　　　document.getElementById("demo").innerHTML = vid.currentTime;
}
</script>
</body>
</html>

Проверьте ‹/›

Онлайн-пример

Появляется всплывающее сообщение при завершении перемещения/прыжка пользователя к новому положению воспроизведения аудио:

Пример

<!DOCTYPE　html>
<html>
<head>
<meta charset="utf-8">
<title>Использование события onseeked в HTML аудио/видео - базовый учебник (oldtoolbag.com)</title>
</head>
<body>
<p>Перемещение позиции воспроизведения аудио</p>
<audio id="myAudio" controls>
　　<source src="horse.ogg" type="audio/ogg">
　　<source src="horse.mp3" type="audio/mpeg">
　　Ваш браузер не поддерживает элемент audio.
</audio>
<script>
var aud = document.getElementById("myAudio");
aud.onseeked = function()　
{
　　　　alert("Операция адресации завершена!");
};
</script>　
</body>
</html>

Проверьте ‹/›

Руководство по DOM аудио/видео HTML

HTML: <template> тег