Воспроизведение музыки и видео без Flash для мобильных устройст | Все что вы хотели знать о хостинге и сайтостроении

Воспроизведение музыки и видео без Flash для мобильных устройст


Рубрика: HTML, JavaScript

На многих сайтах есть возможность посмотреть видео или прослушать музыку с помощью Flash плеера, но этот плеер работает только на компьютере т.к. Android больше не поддерживает Adobe Flash и просмотреть что либо с помощью такого плеера на мобильных устройствах не получится.

Есть очень простое решение.

Обычно Flash плееры сейчас работают в связке с jQuery и для того что-бы вывести такой плеер на страницу пишется примено такой код:

$(#IdPlayer).myPlayer(settings);

<div id="IdPlayer">У вас нет поддержки Flash.</div>

Как видно из примера, сам плеер встраивается в определенный контейнер DIV, в котором и отображается плеер. Если поддержки Flash нет, то в таком контейнере ничего не происходит и будет отображаться то что внутри этого контейнера. В таком случае можно использовать следующий приём. Во внутрь DIV поместить HTML5 тэг AUDIO или VIDEO. И если поддержки Flash нет на устройстве  то выведется проигрователь HTML5, который работает на 99% устройствах.

Пример тэга AUDIO:

<audio controls>
    <source src="audio/music.mp3" type="audio/mpeg">
</audio>

Пример тэга VIDEO:

<video width="400" height="300" controls="controls" poster="video/duel.jpg">
   <source src="video/duel.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
</video>

В конечном итоге псевдокод будет таким:

$(#IdPlayer).myPlayer(settings);

<div id="IdPlayer">
  <audio controls>
    <source src="audio/music.mp3" type="audio/mpeg">
  </audio>
</div>

Описание параметров этих тегов можно найти в документации к HTML5.

Теги: , , , ,
Если вам понравилась статья или была полезна, поделитесь ею с друзьями: