Материалы для WEB разработки на LAMP
JS метод .play() HTML элементов Audio и Video

В статье описано использование метода media.play() Java Script, который запускает воспроизведение медиа файла для HTML5 меда элемента video или audio. Приведены примеры использования метода и листинги JS кода.

 

.play()

myVideo.play();

Метод .play()  запускает проигрывание медиа фала  для выбранного HTML5 элемента video или audio. Метод применяется к медиа объекту и не имеет входных параметров и возвращаемого значения. При вызове метода play() происходит: установка свойства paused медиа элемента в FALSE; выполняется загрузка медиа файла и начинается его воспроизведение. Если меда файл к этому моменту был полностью проигран (свойство media.ended = TRUE), то вызов метода play() начнет воспроизведение файла сначала. Для остановки воспроизведения нужно применять противоположный метод .pause() к проигрываемому медиа объекту.

Пример использования .play() метода:

Для работы с примером видео на этой странице использовано присвоение объекта видео в переменную JS с именем "myVideo", поэтому в консоли вы можете использовать эту переменную для обращения к JS объекту примера видео.

var myVideo = document.getElementById("video-example-1");

Пример демонстрирует применение JS метода .play() к видео примера на этой странице. Для остановки воспроизведения используется противоположный метод .pause(). Вызов методов реализован через событие клик, отслеживаемое для соответствующих кнопок под примером видео на странице.

JS код демонстрации примера:

//JS функции для работы с примером:
//запуск воспроизведения видео примера
function playClip(media) {
  media.play();
}

//стоп воспроизведения видео примера
function stopClip(media) {
  media.pause();
}

//Использование и демонстрация:
//получим медиа объект в переменную
var myVideo = document.getElementById("video-example-1");

//запуск по onclick для кнопок:
playClip(myVideo); //для кнопки "Play"
stopClip(myVideo); //для кнопки "Stop"

HTML код кнопок примера:

<input onclick="playClip(myVideo);" type="button" value="Play" />
<input onclick="stopClip(myVideo);" type="button" value="Stop" />

Также смотри примеры на странице: "Демонстрация JS управления HTML5 video и audio.