Создаём видео плеер для нашего сайта

В позапрошлом месяце у нас на сайте был опубликован урок по созданию аудио плеера. На этот раз, мы будем делать видео плеер, основанный на HTML5 элементе <video>. Практически каждый браузер, поддерживающий HTML, будет поддерживать его работу.

Вот что у нас должно получиться. В качестве альтернативы, если браузер не поддерживает HTML5, то вы можете вывести пользователю версию на Flash-е.

Подготовка

Для начала, нам нужно подготовить исходные материалы: видео возьмём с Youtube. Для обеспечения большей совместимости, загрузим видео в двух форматах: MP4 и OGV. Для преобразования видео из одного формата в другой, можем воспользоваться каким-то конвертером.

Также нам понадобится изображение, которое будет отображаться в качестве обложки. Иконки возьмём с Font Awesome. Ну и конечно, нам понадобятся библиотеки jPlayer, jQuery. Поместите все эти файлы в папки:

HTML

Для начала, подключим файлы библиотек и таблицы стилей в разделе <head>:

<link type="text/css" href="/css/style.css" rel="stylesheet" />
<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript" src="/js/jquery.jplayer.min.js"></script>

HTML структура будет очень похожа на ту, что мы писали при создании аудио плеера:

<div id="jp_container_1" class="jp-video">
    <div class="jp-title">
      <h1>Kelli Anderson - Disruptive Wonder for a Change</h1>
    </div>
    <div class="jp-type-single">
      <div id="jquery_jplayer_1" class="jp-jplayer"></div>
      <div class="jp-gui">
        <div class="jp-video-play">
          <a href="javascript:;" class="jp-video-play-icon" tabindex="1">?</a>
        </div>
        <div class="jp-interface">
          <div class="jp-controls-holder">
            <ul class="jp-controls">
              <li><a href="javascript:;" class="jp-play" tabindex="1">?</a></li>
              <li><a href="javascript:;" class="jp-pause" tabindex="1">?</a></li>
              <li><a href="javascript:;" class="jp-mute" tabindex="1" title="mute">?</a></li>
              <li><a href="javascript:;" class="jp-unmute" tabindex="1" title="unmute">?</a></li>
            </ul>
            <div class="jp-volume-bar">
              <div class="jp-volume-bar-value"></div>
            </div>
            <ul class="jp-toggles">
              <li><a href="javascript:;" class="jp-full-screen" tabindex="1" title="full screen">?</a></li>
              <li><a href="javascript:;" class="jp-restore-screen" tabindex="1" title="restore screen">?</a></li>
          </div>
          <div class="jp-progress">
            <div class="jp-seek-bar">
              <div class="jp-play-bar"></div>
            </div>
          </div>
          <div class="jp-current-time"></div>
        </div>
      </div>
      <div class="jp-no-solution">
        <span>Update Required</span>
        To play the media you will need to either update your browser to a recent version or update your <a href="http://get.adobe.com/flashplayer/" target="_blank">Flash plugin</a>.
      </div>
    </div>
</div>

Активируем видео

Тут всё будет так же, как и в предыдущем примере. Только тут, помимо перечисления ссылок на видео, нам нужно указать адрес изображения-постера.

<script>
	$(document).ready(function(){
      $("#jquery_jplayer_1").jPlayer({
        ready: function () {
          $(this).jPlayer("setMedia", {
            m4v: "vid/TEDxPhoenix-KelliAnderson-DisruptiveWonderforaChange.mp4",
            ogv: "vid/TEDxPhoenix-KelliAnderson-DisruptiveWonderforaChange.ogv",
            poster: "vid/TEDxPhoenix-KelliAnderson-DisruptiveWonderforaChange.png"
          });
        },
        swfPath: "/js",
        supplied: "m4v,ogv"
      });
    });
</script>

На данный момент результат должен выглядеть примерно так:

Добавляем стили

Теперь, давайте добавим css правил, чтобы исправить отображение.

Открываем/создаём файл style.css.

Во-первых, убираем нижнее подчёркивание у всех ссылок:

@font-face {
  font-family: "FontAwesome";
  src: url('fonts/fontawesome-webfont.eot');
  src: url('fonts/fontawesome-webfont.eot?#iefix') format('eot'),
  	   url('fonts/fontawesome-webfont.woff') format('woff'),
  	   url('fonts/fontawesome-webfont.ttf') format('truetype'),
  	   url('fonts/fontawesome-webfont.svg#FontAwesome') format('svg');
  font-weight: normal;
  font-style: normal;
}
a {
	text-decoration: none;
}

Ширина видео

Задаём определённые размеры контейнеру:

.jp-video {
	margin: 0 auto;
	position: relative;
	font-family: Arial, sans-serif;
}
.jp-video-270p {
	width: 480px;
}

Заголовок

Заголовок окрасим в тёмно-серый цвет, позиционируя его по центру.

.jp-title h1 {
	font-size: 1em;
	text-align: center;
	color: #555;
}

Кнопка проигрывания

Для кнопки проигрывания воспользуемся иконкой из FontAwesome:

.jp-video-play {
	font-family: "FontAwesome";
	position: absolute;
	top: 45%;
	left: 46%;
}
.jp-video-play a {
	font-size: 2em;
	color: rgba(255,255,255,.7);
	display: inline-block;
	width: 50px;
	height: 50px;
	line-height: 55px;
	text-align: center;
	background-color: rgba(0,0,0,.8);
	border-radius: 5px;
}

Интерфейс плеера

Интерфейс видео плеера будет очень похож на интерфейс аудио плеера. Цветовая схема будет та же - оранжевая. Кнопки воспроизведения, паузы и громкости сделаем белыми:

.jp-interface {
	width:100%;
	bottom: 0;
	position: relative;
	background: #f34927;
	background: -moz-linear-gradient(top,  #f34927 0%, #dd3311 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f34927), color-stop(100%,#dd3311));
	background: -webkit-linear-gradient(top,  #f34927 0%,#dd3311 100%);
	background: -o-linear-gradient(top,  #f34927 0%,#dd3311 100%);
	background: -ms-linear-gradient(top,  #f34927 0%,#dd3311 100%);
	background: linear-gradient(to bottom,  #f34927 0%,#dd3311 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f34927', endColorstr='#dd3311',GradientType=0 );
	overflow: hidden;
	-webkit-box-shadow: inset 0px 1px 0px 0px rgba(255, 255, 255, 0.1);
	box-shadow: inset 0px 1px 0px 0px rgba(255, 255, 255, 0.1);
}

.jp-interface a {
	color: #fff;
	text-shadow: 1px 1px 0 rgba(0,0,0,0.3);
}
.jp-controls, .jp-toggles {
	padding: 0;
	margin: 0;
	font-family: "FontAwesome"
}
.jp-toggles {
	position: absolute;
	top: 14px;
	right: 14px;
}
.jp-controls li, .jp-toggles li {
	display: inline;
}
.jp-play,.jp-pause {
    width: 55px;
    height: 40px;
    display: inline-block;
    text-align: center;
    line-height: 43px;
}
.jp-mute,.jp-unmute {
    position: absolute;
    right: 85px;
    top: 0;
    width: 20px;
    height: 40px;
    display: inline-block;
    line-height: 43px;
}
.jp-progress {
    background-color: #992E18;
    border-radius: 20px 20px 20px 20px;
    overflow: hidden;
    position: absolute;
    left: 55px;
    top: 14px;
    width: 55%;
    -webkit-box-shadow: 0 1px 1px 0 rgba(0,0,0,0.2) inset;
    box-shadow: 0 1px 1px 0 rgba(0,0,0,0.2) inset;
}
.jp-play-bar {
    height: 12px;
    background-color: #fff;
    border-radius: 20px 20px 20px 20px;
}
.jp-volume-bar {
    position: absolute;
    right: 40px;
    top: 16px;
    width: 45px;
    height: 8px;
    border-radius: 20px 20px 20px 20px;
    -webkit-box-shadow: 0 1px 1px 0 rgba(0,0,0,0.1) inset;
    box-shadow: 0 1px 1px 0 rgba(0,0,0,0.1) inset;
    background-color: #992E18;
    overflow: hidden;
}
.jp-volume-bar-value {
    background-color: #fff;
    height: 8px;
    border-radius: 20px 20px 20px 20px;
}
.jp-current-time {
    color: #FFF;
    font-size: 12px;
    line-height: 14px;
    position: absolute;
    right: 115px;
    top: 13px;
    text-shadow: 1px 1px 0 rgba(0,0,0,0.3);
}

На данный момент, плеер должен выглядеть следующим образом.

Полноэкранный режим

Также у нас есть возможность полно-экранного просмотра. Именно поэтому нам нужно создать стили для кнопок, которые будут применяться в расширенном режиме отображения. С помощью z-index, мы сможет правильно спозиционировать все нужные нам элементы:

.jp-video-full {
	/* правило для IE6 (full-screen) */
	width:480px;
	height:270px;
	/* правило для IE7 (full-screen) */
	position:static !important;
	position:relative;
}

.jp-video-full div div {
	z-index:1000;
}
.jp-video-full .jp-jplayer {
	top: 0;
	left: 0;
	position: fixed !important;
	position: relative; /* правило для IE6 (full-screen) */
	overflow: hidden;
}
.jp-video-full .jp-interface {
	position: absolute !important;
	position: relative; /* правило для IE6 (full-screen) */
	bottom: 0;
	left: 0;
}
.jp-video-full .jp-gui {
	position: fixed !important;
	position: static; /* правило для IE6 (full-screen) */
	top: 0;
	left: 0;
	width:100%;
	height:100%;
	z-index:1001; /* на 1 уровень выше, чем остальные */
}

.jp-video-full .jp-video-play a {
	font-size: 3em;
	height: 80px;
	width: 80px;
	line-height: 95px;
}
.jp-video-full .jp-progress {
	width: 83%;
}

Результат:

Добавляем тени

Этот финт уже не обязателен, однако лишним не будет. Добавим тень к нашему плееру для того, чтоб он выглядел лучше.

.jp-video-270p .jp-type-single {
	-webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.5);
	-moz-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.5);
	box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.5);
}

Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/oKFNYQfF-y4/lessons.php

Читать комменты и комментировать

Добавить комментарий / отзыв



Защитный код
Обновить

Создаём видео плеер для нашего сайта | | 2013-05-15 03:18:21 | | Статьи Web-мастеру | | В позапрошлом месяце у нас на сайте был опубликован урок по созданию аудио плеера. На этот раз, мы будем делать видео плеер, основанный на HTML5 элементе . Практически каждый браузер, поддерживающий | РэдЛайн, создание сайта, заказать сайт, разработка сайтов, реклама в Интернете, продвижение, маркетинговые исследования, дизайн студия, веб дизайн, раскрутка сайта, создать сайт компании, сделать сайт, создание сайтов, изготовление сайта, обслуживание сайтов, изготовление сайтов, заказать интернет сайт, создать сайт, изготовить сайт, разработка сайта, web студия, создание веб сайта, поддержка сайта, сайт на заказ, сопровождение сайта, дизайн сайта, сайт под ключ, заказ сайта, реклама сайта, хостинг, регистрация доменов, хабаровск, краснодар, москва, комсомольск |
 
Поделиться с друзьями: