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

В статье описано использование метода media.canPlayType() Java Script, который позволяет получить от браузера ответ о поддержки им указанного MIME типа медиа файла и кодека. Приведены примеры использования метода и листинги JS кода.

 

.canPlayType()

var isSupp = myVideo.canPlayType ( mediaType );

Метод .canPlayType() проверяет поддерживает ли браузер клиента переданный тип медиа файла (MIME type) или нет. Метод ожидает в качестве параметра строку как MIME тип медиа файла, который может опционально содержать и кодек медиа файла.

 

Примеры параметров для метода .canPlayType():

Для демонстрации работы метода с примерами параметров - кликай ссылки.

Параметр, как общий MIME тип файла, примеры:

Параметр, как общий MIME тип файла с дополнительным параметром кодека, примеры:

 

Метод возвращает значения:

  •     "probably" - когда браузер, скорее всего, воспроизведет данный тип медиа файла. Такой ответ браузер сможет вернуть только если переданный ему тип медиа файла будет полный т.е. будет содержать опциональный параметр кодека. Пример: media.canPlayType('video/mp4; codecs="avc1.4D401E, mp4a.40.2"');
  •     "maybe" - когда браузер вероятно может воспроизводить данный тип медиа файла, но точно ответить не может т.к. переданный методу параметр MIME type не полный, например не содержит кодек. Пример: media.canPlayType('video/mp4');
  •     "" - пустая строка, когда браузер не поддерживает данный тип медиа файла.

 

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

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

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

Пример будет демонстрировать поддержку вашим браузером указанных выше MIME типов. Это можно использовать для динамического управления медиа объектом на странице. Например, если формировать плей лист динамически, то можно предварительно проверить какой из имеющихся у вас форматов файлов будет поддерживаться браузером. После такой проверки можно уже в контейнер видео или аудио подключать нужный файл и быть уверенным, что браузер его воспроизведет.

 

//JS функция для работы с примером:
//Будет выводить результат canPlayType()
//для переданного MIME типа
//Функцию будем вызвать по клику на ссылку
//с текстом MIME типа который хотим проверить
function isSupport(type) {

  var support = myVideo.canPlayType(type);
 
  if (support == "") {
    alert('результат - пустая строка');
  } else {
    alert('результат - ' + support);
  }
 
  return false;
}

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

Для демонстрации работы метода canPlayType() в описаниях параметров метода на этой странице примеры MIME типов сделаны в виде ссылок, по клику вызывающие проверку доступности данного типа через описанную в листинге кода JS функцию isSupport(type). Можете попробовать кликать ссылки и проверить какие MIME типы из представленных в примере поддерживает ваш браузер.

Пример HTML кода ссылки для демонстрации:

<a onclick="isSupport(this.innerHTML)" href="#">video/ogg</a>

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