Сегодня статья посвящена HTML5 видеоплеерам. Мы рассмотрим десять решений для кроссплатформенного показа видео на сайтах.
Все рассмотренные HTML5 плееры умеют использовать не только HTML5, но подключать флеш версии тогда, когда это необходимо. Почти все из них бесплатные, и подходят для коммерческого использования.
Когда браузеры стали поддерживать Javascript, за ним быстро закрепились две основные задачи: эффекты при наведении мышью и улучшения для веб-форм. Потом в CSS появился псевдо-класс :hover и необходимость в скриптах для многих ситуаций первого плана отпала.
Эта история постоянно повторяется. Как только определенный шаблон или задача становятся достаточно популярными, они почти непременно в конце концов упрощаются в техническом плане и делаются более доступными. Именно так в CSS3 появилось много функций для создания простых анимаций, для которых прежде требовался Javascript.
Говоря о формах, тут возможности CSS довольно ограничены. И теперь на сцену снова выходит HTML5. Следуя тому же принципу, он вводит новые функции, которые на самом деле вовсе не новые, но сделаны проще и удобнее.
Нетрудно догадаться, что прежде они были частью отдельной спецификации WHATWG под названием Web Forms 2.0.
Да, да, это очередная статья про html5 и тэг < video >. Но главным ее отличием будет то, что здесь будут рассмотрены самые базовые понятия и теории. Так что приготовились внимательно читать и записывать, let html5 rocks!
Итак, чтобы видео появилось на вашей веб-страничке пишем следующий код:
<video>
<source src="movie.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
<source src="movie.webm" type='video/webm; codecs="vp8, vorbis"' />
</video>>
Сразу обратим внимание на тэг < source >, который позволяет включать видео разных форматов, что важно в тех случаях когда один из них не поддерживается тем или иным браузером.
Read more...
Эта статья о трансформации и вращении в javascripte. Матрица трансформаций, на первый взгляд, штука непонятная и многие ею пользуются даже не осознавая, что она делает на самом деле, используя готовые значения из интернета. На MDC об этом рассказано скудненько, а информацию в английской Википедии тяжело назвать общедоступной. Постараемся разобраться в этом вместе.
Read more...
Аж в 2003 году Mozilla представила новый механизм для оптимизации загрузки страниц. И существует большой шанс, что технология войдет в HTML5.
Суть же метода в том, что на любой странице браузеру можно указать документы (страница, файл стилей, картинка), которые в скором времени могут понадобиться пользователю. И он заранее их закэширует.
Пометить документы можно тегом link с аттрибутом rel='prefetch':
