Среда, 28 Ноября 2012 16:47

Стилизация HTML5 video для WebKit

Written by 
Оцени эту запись
(12 Голоса)

Рассмотрим возможность стилизации стандартного HTML5 тега <video> при помощи CSS.

 

Полный CSS файл для HTML5 video можно посмотреть здесь - http://code.google.com

 

HTML5 video добавляется на страницу таким образом:

 

 

<video autoplay="autoplay"  controls="controls"  preload="auto" width="566">
            <source src="/adds/nice_cats.mp4">
</video>
 
Тегу video можно добавить такие атрибуты:
 
 
  • autoplay - автоматическое воспроизведение видел при загрузке страницы
  • controls  - наличие элементов управления - кнопки play/pause, timeline и volume
  • preload - загрузка видео при загрузке страницы

 

У элемента video нет внутренних элементов. Все элементы управления реализованы при помощи псевдоэлементов. И при помощи них мы можем достучаться до стилизации.

 

Рассморим основные псевдоэлементы:

 

-webkit-media-controls-panel - оболочка видео элемента 

-webkit-media-controls-enclosure - оболочка панели элементов управления, она появляется только при наведении на видео

-webkit-media-controls-play-button - кнопка play/pause

-webkit-media-controls-timeline - полоса проигрывания

-webkit-media-controls-timeline::-webkit-media-slider-thumb - бегунок на полосе проигрывания

-webkit-media-controls-volume-slider::-webkit-media-slider-thumb - бегунок на полосе громкости

-webkit-media-controls-volume-slider - полоса громкости

-webkit-media-controls-current-time-display - текущее время проигрывания ролика

-webkit-media-controls-mute-button - кнопка отключения звука

-webkit-media-controls-fullscreen-button - кнопка перехода в полноэкранный режим

 

Работая с этими всевдоэлементами HTML5 <video>, я получила вот такой вид элемента:

 

 

 

Если поточнее, здесь были использованы такие стили:

 

 

      <style>
            video {
                width: 566px;
                height: 333px;
                background: blueviolet;
                -webkit-box-shadow: 0px 0px 1px 1px violet;
            }
            video::-webkit-media-controls-panel {
                -webkit-box-align: end;
                background: blueviolet;
                border-radius: 0;
                display: -webkit-box!important;
                position: relative;
                padding: 0;
                height: 50px;
            }
            video::-webkit-media-controls-enclosure {
                width: 100%;
                bottom: 0;
                text-indent: 0;
                box-sizing: border-box;
                border: none;
                padding: 0;
                height: 50px;
            }
            video::-webkit-media-controls-play-button {
                box-sizing: border-box;
                width: 50px;
                height: 50px;
            }
            video::-webkit-media-controls-timeline {
                height: 20px;
                background-image: -webkit-linear-gradient(top, blueviolet, blue);
                width: 400px;
                border-radius: 15px;
                margin: 0 15px 15px 0;
            }
            video::-webkit-media-controls-timeline::-webkit-media-slider-thumb,
            video::-webkit-media-controls-volume-slider::-webkit-media-slider-thumb{
                background: violet;
                border-radius: 20px;
            }
            video::-webkit-media-controls-volume-slider {
                background-image: -webkit-linear-gradient(top, blueviolet, blue);
                width: 50px;
                min-width: 50px;
                border-radius: 10px;
                margin: 0 15px 20px 0;
            }
            video::-webkit-media-controls-current-time-display,
            video::-webkit-media-controls-mute-button,
            video::-webkit-media-controls-fullscreen-button {
                margin-bottom: 10px;
            }
            video::-webkit-media-controls-current-time-display {
                color: violet;
            }
        </style>

 

 

 

 

 

Additional Info

You have no rights to post comments

верстка | CSS | верстка сайтов | HTML | верстальщик | блочная верстка | JavaScript | css верстка | профессиональная верстка сайтов