megasoft-portal

Создаем пользовательский HTML5 видео плеер при помощи CSS3 и jQuery

 Элемент HTML5 <video> уже поддерживается большинством современных браузеров, и даже IE поддерживает начиная с версии 9. Есть много преимуществ в том, что видео проигрывается в самом браузере без использования плееров сторонних производителей, поэтому многие разработчики пытаются начать использовать эту возможность как можно скорее. Но есть несколько препятствий к этому,  в первую очередь, это проблемы с поддержкой  кодеков в каждом браузере, тут разногласия между Opera / Firefox и IE / Safari. Но это не может быть серьезной проблемой в течение длительного времени, Google не так давно выпустил кодек VP8, и Opera, Firefox, Chrome и IE9 уже имеют поддержку этого формата, да и Flash также может проигрывать VP8. Это означает, что в скором времени мы сможем создать единую версию видео, которое будет проигрываться при помощи тега <video> в большинстве браузеров и Flash Player.

 Другим серьезным препятствием для использования является создание пользовательского HTML5 <video> плеера - это то, где flash на данный момент единственное решение и в настоящее время имеет преимущество, с мощным IDE, Flash обеспечивает простой интерфейс для создания пользовательского компонента видеоплеера. Если мы хотим создать собственный плеер для элемента HTML5 <video>, то мы должны писать все это на HTML5, CSS3, JavaScript и т.д.

И это то, о чем будет статья. Мы рассмотрим как создать легкий пользовательский HTML5 <video> плеер, включая создание для этого простого плагина jQuery, выбор элементов управления и настройка внешнего вида при помощи CSS.

В этой статье мы рассмотрим:

• Элементы управления видео
• Основы разметки элементов управления
• Создание плагина JQuery
• Внешний вид плеера
• Создание тем для плеера

Мы будем использовать jQuery для упрощения манипуляций DOM, и jQuery UI для создания ползунков управления, которые мы будем использовать для перемотки видео и изменения уровня громкости.

-->