Воспроизведение мультимедиа на HTML5

{title}

Когда мы работаем в Интернете, мы должны убедиться, что каждый пользователь имеет удовлетворительный опыт работы на нашей странице, часто это подразумевает необходимость выполнения дополнительного или не очень эффективного кода, и все для того, чтобы наша страница не выходила из строя.
С новым стандартом HTML у нас появились новые мультимедийные элементы, такие как аудио и видео, поскольку оба имеют общее происхождение, мы можем оценить их форматы и, таким образом, узнать, может ли браузер воспроизводить указанные файлы.
Метод CanPlayType
Метод canPlayType позволяет нам знать или иметь представление о том, может ли браузер воспроизводить указанный нами мультимедийный файл.
Используя этот метод, мы можем получить 3 типа ответа:

  • «» Пусто Это означает, что вы не можете воспроизвести файл в указанном формате.
  • возможно, этот ответ говорит нам, что, возможно, формат можно воспроизвести.
  • вероятно, с этим ответом браузер указывает, что есть высокая вероятность того, что контент может быть воспроизведен в указанном формате.
Давайте посмотрим ниже код, где мы используем этот метод для мультимедийного файла:
 Пример таблицы {граница: тонкий сплошной черный; border-collapse: collapse;} th, td {padding: 3px 4px;} body> * {float: left; margin: 2px;} Невозможно отобразить видео 
собственностизначение
var mediaElem = document.getElementById ("media"); var tableElem = document.getElementById ("info"); var mediaFiles = ["timessquare.webm", "timessquare.ogv", "timessquare.mp4"]; var mediaTypes = ["video / webm", "video / ogv", "video / mp4"]; for (var i = 0; i <mediaTypes.length; i ++) {var playable = mediaElem.canPlayType (mediaTypes [i]); if (! playable) {playable = "no"; } tableElem.innerHTML + = " "+ mediaTypes [i] +""+ играбельно +""; if (playable ==" вероятно ") {mediaElem.src = mediaFiles [i];}}

Здесь мы просто делаем два массива, в первом мы помещаем имена файлов с разными расширениями, во втором мы помещаем имеющиеся у нас форматы, один раз, когда мы проходим через массив форматов, а затем оцениваем с помощью метода canPlaytype. чтобы получить ответ нам нужен.
Пока что все идет по рукам, как только мы получим оценку, мы просим ту, которая, вероятно, вернула ответ, и именно это мы и разместим для ее воспроизведения.
Давайте посмотрим, как это выглядит в браузере:


В этом конкретном примере мы используем Firefox, в этом случае браузер может воспроизвести формат webm, и он фактически показан в соответствующем элементе.
Как мы видим, этот метод позволяет нам установить несколько параметров, и если мы правильно разработаем наш алгоритм, мы сможем выполнить очень надежную функциональность, которая позволит нам пользоваться преимуществами HTML5 в обработке мультимедиа в нескольких браузерах, не беспокоясь о пользовательском опыте.,
На этом мы заканчиваем наш урок, имея теперь знания о том, как оценивать различные мультимедийные форматы и как браузеры могут относиться к каждому из них.

  • 0