Говорят, что создание сайта - очень длительный и трудоемкий процесс. Мы скажем - НЕТ! Ведь с новыми технологиями, такими как HTML5, CSS3, PHP и MySql можно быстро и легко научиться создавать сайты любой сложности.
Два сумасшедших веб-мастера покажут где что лежит и как этим пользоваться.
Авторизация
Новый
Забыл
Пожалуйста, заполните поля выше. Это нужно сделать обязательно, иначе ничего не получится.
HTML5 /

Воспроизведение аудио и видео без плагинов - HTML5

  • Среда, 6 октября 2011, 14:12 |
  • Автор: karpovi4 |
  • Просмотров: 2711 |
  • Комментарии: 1 |
  • В закладки:
Каждый вебмастер знает насколько сложно и муторно бывает оформление страницы на собственном сайте. А сколько затрачивается сил и времени - представить сложно. Но есть некоторые секреты и хитрости, способные сократить затраченные силы и время. Как запустить cron через wget в linux?, root wget и многие другие команды помогут сократить время на работу по-максимуму.

Воспроизведение аудио и видео без плагинов - HTML5На данный момент одной из самых обсуждаемых функций в HTML5 является возможность воспроизведения аудио и видеофайлов без использования сторонних плагинов. Данная функция действительно очень интересная! Именно поэтому мы ее сейчас и рассмотрим)

Еслии вы собираетесь использовать данную технологию, важно, чтобы вы сами были знакомы со следующими аудио/видео - кодеками. Вот они:
Аудио: ogg (ogg, oga), mp3, wav, AAC
Видео: ogg (ogv), H.264 (mp4)

Вот нескоолько советов, которые могут быть полезными для новичков:
Ваш веб-сервер должен поддерживать аудио / видео типы MIME для форматов файлов, которые вы собираетесь использовать. И вы просто обязаны знать и помнить это при использовании этого способа.
Если вы используете Safari для проверки HTML5 аудио/видео, необходимо также установить QuickTime Player. Safari не может проигрывать что-либо без QuickTime.

Пример кода: Аудио
1    <audio controls>
2        <source src="demo-audio.ogg" />
3        <source src="demo-audio.mp3" />
4    </audio>

Воспроизведение аудио и видео без плагинов - HTML5


Пример кода: Видео
1    <video width="320" height="240" controls preload="none" poster="videoframe.jpg">
2        <source src="demo-video.mp4" type="video/mp4" />
3        <source src="demo-video.ogv" type="video/ogg" />
4    </video>

Воспроизведение аудио и видео без плагинов - HTML5


Хоть это и большой шаг с момента использования флэш плееров на сайтах, приведенные выше примеры являются лишь отправной точкой. Так как каждый браузер предоставляет свой собственный внешний вид элементов управления, вы можете их изменить, чтобы соответствовать дизайну вашего сайта. Ниже приводится простой пример, как использовать DOM API для создания собственных пользовательских элементов управления.

Пример кода: Видео с пользовательскими элементами управления
01    <video width="320" height="240" preload="none" poster="videoframe.jpg">
02        <source src="demo-video.mp4" type="video/mp4" />
03        <source src="demo-video.ogv" type="video/ogg" />
04    </video>
05    
06    <script>
07        var video = document.getElementsByTagName('video')[0];
08        function toggleMute() {
09            video.muted = !video.muted;
10        }
11    </script>
12    <p>
13        <a href="javascript:video.play();">Play</a> |
14        <a href="javascript:video.pause();">Pause</a> |
15        <a href="javascript:toggleMute();">Sound On/Off</a>
16    </p>

Воспроизведение аудио и видео без плагинов - HTML5
Добавить комментарий