- Практические приложения с HTML5 С появлением HTML5 у нас появилось много новых функций, несколько...
- TAG <видео>
- Полезные ссылки
Практические приложения с HTML5
С появлением HTML5 у нас появилось много новых функций, несколько концептуальных концепций , среди которых можно выделить создание трех новых тегов, <video>, <audio> и <canvas>. Первые два будут рассмотрены здесь в этой статье, узнайте больше о теге <Canvas> ,
Для тех, кто еще не знает, теги <audio> и <video> являются тегами мультимедиа, которые были созданы, среди прочего, для устранения зависимости плагинов для воспроизведения аудио и видео на страницах. Таким образом, на сайтах, на которых нам понадобится установить Flash, например на Youtube, мы больше не пойдем, просто эти новые теги реализованы и у нас есть браузер, совместимый с HTML5, что нередко в наши дни, так как все самые последние браузеры. IE8 выходит из этого списка, только IE9 поддерживает HTML5.
Как мы уже знаем, простота является одной из характеристик HTML5, для этих тегов это ничем не отличается, потому что теперь мы перейдем к манипулированию аудио и видео практически так же, как мы манипулируем вставкой изображений.
Зная это, давайте рассмотрим ниже некоторые характеристики и демонстрации того и другого, чтобы рассмотреть основные, но функциональные. Давайте начнем с тега <audio>.
Узнайте больше: Базовый курс HTML
Тег <audio>
Поскольку название уже предполагает, что этот тег служит для воспроизведения аудиофайлов, давайте посмотрим:
Листинг 1. Базовая демонстрация использования тега <audio>
HTML5 Audio </ title> </ head> <body> <body> <body> <body> Ваш браузер не поддерживает HTML5 </ audio> </ html> </ audio> </ audio>
В листинге 1 у нас есть базовый пример использования тега <audio>, в котором мы настраиваем автозапуск и элементы управления, которые служат для автоматического воспроизведения и включения элементов управления проигрывателя, соответственно. Он будет воспроизводить медиафайлы, которые ваш_musica.mp3 определяет в теге <source> внутри тега <audio> с помощью свойства "src". Посмотрите на изображение 1, как это будет выглядеть в вашем браузере:
Рисунок 1:
Плеер, созданный тегом <audio>
Если ваш браузер не поддерживает HTML5, вы увидите следующее: «ваш браузер не поддерживает HTML5»
Так как по своей природе это HTML-компонент, а не плагин, мы можем внести некоторые изменения в проигрыватель с помощью CSS, такие как цвет, размер, плавание и положение.
Его также можно настроить с помощью других элементов HTML, и с помощью Javascript мы можем управлять свойствами, такими как PLAY, PAUSE, VOLUME, а с помощью CSS мы создаем наш собственный проигрыватель.
Листинг 2: Управление аудиотэгом с помощью Javascript.
HTML5 Audio </ title> </ head> </ head> </ title> </ head> <title> Ваш браузер не поддерживает HTML5 </ audio> </ html> </ audio> </ audio> </ audio>
Приведенный выше код будет выглядеть более или менее как на рисунке 2:
Рисунок 2:
Управление аудио с помощью Javascript
Это просто базовый пример, но с небольшими знаниями в javascript и CSS можно сделать очень хороший игрок. Таким образом, мы можем отключить атрибут «controls», чтобы мы могли управлять только нашим собственным игроком.
Атрибуты тега <audio>:
Атрибут Значение Описание autoplay autoplay Устанавливает воспроизведение звука, как только оно будет готово. элементы управления элементы управления будут показаны. loop loop Устанавливает воспроизведение звука после завершения. preload preload Устанавливает звук для загрузки во время чтения страницы. Этот атрибут игнорируется, если установлен атрибут autoplay. URL-адрес src файла для воспроизведения.
Поддерживаемые форматы аудио:
Формат IE 8+ Firefox 3.5+ Opera 10.5+ Chrome 3.0+ Safari 3.0+ Ogg Vorbis Нет Да Да Да Нет MP3 Нет Нет Нет Да Да Wav Нет Да Да Нет Да
Теперь мы увидим тег <video>.
TAG <видео>
Здесь мы придерживаемся той же концепции <audio>, в том числе ее синтаксис очень похож. Давайте посмотрим на пример в листинге 3.
Листинг 3 : Тег <video>
Видео HTML5 </ title> </ head> <body> <HTML DOCUMENT> <HTML DOCUMENT> <HTML DOCUMENT> video source = "320" height = "240" controls = "controls"> <source src = "movie.mp4" type = "video / mp4"> <source src = "movie.ogg" type = "video / ogg" > Ваш браузер не поддерживает HTML5. </ video> </ body> </ html>
Обратите внимание, что практически ничего не отличается от того, что мы видели, кроме свойств width и height, которые мы не определили в теге <audio>. Но для видео это хорошая практика и чрезвычайно важно, потому что если мы не укажем размер, который должен занимать тег, браузер может быть потерян и привести к катастрофе в остальной части макета.
В настоящее время поддерживаются следующие форматы видео:
Веб-браузер MP4 Ogg Internet Explorer 9 ДА НЕТ НЕТ Firefox 4.0 НЕТ ДА ДА Google Chrome 6 ДА ДА ДА Apple Safari 5 ДА НЕТ НЕТ Opera 10.6 НЕТ ДА ДА
Как и в теге <audio>, тегом <video> также можно управлять с помощью Javascript.
В листинге 4 вы можете увидеть фрагмент кода Javascript, написанный для управления видео.
Листинг 4: Управление видео с помощью Javascript
<script> function playPause () {if (video.paused) video.play (); еще video.pause (); } function large () {/ * изменяет ширину тега, автоматически изменяется пропорционально высота * / video.width = 560; } function small () {/ * изменяет ширину тега, автоматически изменяется пропорционально высота * / video.width = 320; } function normal () {/ * изменяет ширину тега, автоматически изменяется пропорционально высота * / video.width = 420; } </ script>
Ну, ребята, я остаюсь здесь, я надеюсь, вам понравилось и особенно было любопытно узнать больше об этой теме, об этой независимости плагинов. Не стесняйтесь оставлять свой отзыв и обзор и видеть вас до конца.
Полезные ссылки
Узнайте больше о JavaScript;)
- Программирование в HTML5 :
Когда была объявлена 5-я версия стандарта HTML, изначально часть рынка не получала с большим энтузиазмом привычку получать несколько новых функций от одной версии к другой. Правда заключается в том, что с тех пор, как версия 4.0 была выпущена в 1997 году, в следующие десять лет был достигнут незначительный прогресс. - HTML5 команды и теги :
Если вам нужно знать HTML5 команды, советы и теги получить доступ к нашему бесплатному контенту. Все о HTML5 вы можете найти на самом большом сайте для программистов в Бразилии. Учись сейчас! - Что такое HTML5 :
Посмотрите в этой статье немного истории HTML, что такое HTML5 и его основные изменения по сравнению с предыдущими версиями.