Да, да, это очередная статья про html5 и тэг < video >. Раньше, если вы хотели добавить видео на веб-страницу, вам приходилось использовать элемент <object>, представляющий собой универсальный . Любой, кто посещал YouTube.com за последние четыре года знает, что можно вставить видео на веб-страницу. До HTML5 не . Firefox поддерживает кодек WebM начиная с версии 4.0. HTML5 · Видео . Тег <video> появился в HTML5, он позволяет добавлять и проигрывать видео на HTML-странице. Конечно, пока это будет работать только в некоторых . Тег video управляет проигрыванием видеозаписи на HTML5 странице. HTML5 видео как фон страницыevent. Делал недавно промо- страничку для сайта Дельфина, для книги стихов, которая скоро выйдет. После обсуждения, предложил сделать это в форме видео, чтобы было красивые анимации. По ходу дела кое какие нюансы вылезли. Форматы видео. Как известно, браузеры разделились на 2 лагеря - те, которые поддерживают H. OGG/Theora и Web. M. Соответственно, нужно хотябы 2 версии видео. В итоге я сделал видео в H. Web. M. H. 2. 64 поддерживают на данный момент: Web. M поддерживают: Что интересно, Firefox поддерживает H. Mac OS X. В общем, 2 версии видео, обе указываем как src - и охватили все современные браузеры. HTML и CSSКод видео: < div id=. Можно ещё для #trailer > video поменять CSS, чтобы их не было: min- width: 1. Тогда мы получим видео на всю ширину: Всё хорошо.. Пока мы не изменим размер окна. Внезапно: Тут нам на помощь приходят CSS Media Queries для управления пропорциями. Убираем добавленный на предыдущем шаге CSS- код и добавляем: @media (min- aspect- ratio: 1. Теперь главную часть, текст, увидят все. Мобильные браузеры. С мобильными браузерами сложности. Internet Explorer на Windows Phone всё показывает и играет без нареканий, проигрывание стартует автоматически. На i. OS в Safari автопроигрывание отключено. Такая вот позиция Apple - чтобы батарейку не жрало. Поэтому там показывается видео со значком Play, на который надо нажать, после чего видео начинает играть на полный экран. С Android тяжелее всего. Автопроигрывание не работает. Кнопка Play появляется только если добавить для тэга video аттрибут controls, чтобы появились стандартные контролы управления. Это, увы, не так уже красиво. Но это ещё не всё. Для того, чтобы видео начало играть, нужно ещё добавить дополнительно Javascript- обработчик, который принудительно скажет video, чтобы оно играло: var video = document. Element. By. Id(element); video. Event. Listener('click',function(). Итог с прелоадером тут. Ну и пока что на dolphinmusic.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. Archives
February 2018
Categories |