Перейти к содержимому



Подскажите по вёрстке видеороликов

#1 ShowPrint

ShowPrint
  • Пользователь PRO
  • 1 729 сообщений
  • Репутация: 408
0

Отправлено 27 Февраль 2016 - 13:21

ПАМАГИТЕ кто/чем может, плз...

 

Есть задача размещения видеороликов с использованием тега <video>, без использования Flash. Сами ролики размещены на хостинге, сайт html5.

 

Поскольку видео используется в виде "плюшек" (вспомогательный материал), то есть следующая идея: при загрузке страницы сделать анализ на способность браузера воспроизводить видео, и в зависимости от этого формировать код вывода видео или пропускать его.

В идеале хочется чтоб этот процесс не оказывал сильного влияния на время загрузки страниц.

 

Насколько я понимаю напрямую выяснить возможность воспроизведения браузером видео - отсутствует, соответственно нужно идти каким-то "сложным путём"

Оффтопик

Подозреваю что логичнее всего было бы использовать для данных целей Ajax, но беда в том, что с ним совсем не знаком  :( Ламмерски владею лишь html, css, php и js, плюс jquery в зачаточном состоянии...  :blush:

 

Может кто уже реализовывал такую задачу и сможет поделиться материалами , в которых можно было бы разобраться, или ссылками которые доступны для понимания ламеру?

 

Понятно что видео "заготовлю" в разных форматах и выводить собираюсь следующим образом:

<video controls poster='/video/video.jpg' preload='none' class='videos'>
    <source src='/video/video.ogv' type='video/ogg; codecs="theora, vorbis"'>
    <source src='/video/video.mp4' type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
    <source src='/video/video.webm' type='video/webm; codecs="vp8, vorbis"'>
    <p>
        Воспроизведение видео не поддерживается вашим браузером<br>
        <a download href='/video/video.mp4'>Скачать видео</a>
    </p>
</video>

но, на мой взгляд, вывод сообщения о невозможности показа видео не совсем по феншую, логичнее было бы вообще не выводить этот блок (или скрыть его)...

 

Прошу дать эзотерического "пинка" чтоб направить мысли в нужную сторону...

Если что, то готов даже ajax ковырять (подскажите только "место проведения раскопок")

 

Many thanks!  :blink:


 

 

  • 0
MasterWEBS: третий дом - моё хобби и увлечение... Второй дом: работа - не меньше 12 часов в день...
Первый дом - под охраной: "Осторожно - злая жена!" (дрессировалась долго и надёжно) /*ссылку не просите - не дам!*/


#2 ol3gran1

ol3gran1
  • Пользователь
  • 51 сообщений
  • Репутация: 16

Отправлено 27 Февраль 2016 - 16:24

Есть такая библиотека Modernizr, вполне подходящая под вашу задачу =)
 
Документация

В частности:
 

if (Modernizr.video) {
  // supported
} else {
  // not-supported
}

Если "not-supported" ставим блоку display:none;


Сообщение отредактировал ol3gran1: 27 Февраль 2016 - 16:24

  • 1

#3 ShowPrint

ShowPrint
    Topic Starter
  • Пользователь PRO
  • 1 729 сообщений
  • Репутация: 408

Отправлено 27 Февраль 2016 - 17:21

Есть такая библиотека Modernizr
Судя по мануалу - прикольная вещица...

Особенно приятная штука - формирование библиотеки при скачивании "на лету", только с необходимыми функциями... Так скрипт проверки html5-video весит чуть больше 2К, и это при наличии копирайт-коммента в начале...

 

По сути наверное правильно было-бы при загрузке страницы объявлять пустой div и индефикатором, а к нонце страницы грузить скрипт - раз; проверять возможность видео - два; вставлять внутрь дива по id код видео - три...

 

Правильно я понимаю что это будет оптимальный вариант с точки зрения скорости загрузки страницы и нагрузки на сервак?


  • 0
MasterWEBS: третий дом - моё хобби и увлечение... Второй дом: работа - не меньше 12 часов в день...
Первый дом - под охраной: "Осторожно - злая жена!" (дрессировалась долго и надёжно) /*ссылку не просите - не дам!*/


#4 ol3gran1

ol3gran1
  • Пользователь
  • 51 сообщений
  • Репутация: 16

Отправлено 27 Февраль 2016 - 19:38

Не совсем понял задумку.

Но по моим предположениям будет примерно так:

1. Вызываем Modernizr.

2. Объявляем класс с display:none;

.no-visible {
display:none;
}

3. Для всех div c видео задаём определенный класс или вообще без него.

4. Если условие сработало на "Не отображать" выбираем все классы с видео (или просто элемент video).

5. Добавляем к выбранному ранее созданный класс.

Для класса:

$(document).ready(function() {
      $('.video-class').addClass('no-visible');
});

или для элемента

$(document).ready(function() {
      $('video').addClass('no-visible');
});

P.S. могут быть ошибки, печатал второпях)


  • 1

#5 ShowPrint

ShowPrint
    Topic Starter
  • Пользователь PRO
  • 1 729 сообщений
  • Репутация: 408

Отправлено 27 Февраль 2016 - 20:01

Не совсем понял задумку. Но по моим предположениям будет примерно так:
Ваши предположения - проще, мои более мудрёные... ;)

 

Я думаю вывести всю страницу изначально без видео (с пустым <div>), чтоб не загаживать код, не трать лишние ресурсы, не тормозить загрузку...

Потом уже, в конце страницы, перед </body>, загрузить Modernizr и если сработало условие "отображать" js-том засунуть нужное содержимое внутрь нужного div-а...

Соответственно если сработало на "не отображать" - ничего не делать...

 

Да, путь более сложный... Ваш подход - спрятать если не нужно, мой - показать если нужно... Результат почти одинаков... Эммм... Это как врачи бывают разные: одни - борятся с болезнью, другие - с причиной ее возникновения... ;)


  • 1
MasterWEBS: третий дом - моё хобби и увлечение... Второй дом: работа - не меньше 12 часов в день...
Первый дом - под охраной: "Осторожно - злая жена!" (дрессировалась долго и надёжно) /*ссылку не просите - не дам!*/


#6 ol3gran1

ol3gran1
  • Пользователь
  • 51 сообщений
  • Репутация: 16

Отправлено 27 Февраль 2016 - 21:49

Я думаю вывести всю страницу изначально без видео (с пустым
), чтоб не загаживать код, не трать лишние ресурсы, не тормозить загрузку...

Ну тут палка о двух концах, с одной стороны старые браузеры, с другой новые.
Если основываться на статистике использования устаревших браузеров, то скрывать содержимое для них нужно будет гораздо реже, чем наоборот показывать для новых.
  • 0

#7 ShowPrint

ShowPrint
    Topic Starter
  • Пользователь PRO
  • 1 729 сообщений
  • Репутация: 408

Отправлено 27 Февраль 2016 - 22:15

Ну тут палка о двух концах
Согласен с тем что чаще надо будет показывать, чем нет, но... Сначала загрузить блок, показать его посетителю, а потом убрать со страницы на его изумленных глазах, всё-таки меньше "по феншую", чем его потом "до"-открыть... ;)

 

Аналогия с врачами в данном случае: с одной стороны - "здесь видео, но у тебя лох-браузер и ты его недостоин", а с другой стороны - "опа, у тебя современный браузер? посмотри видео в качестве бонуса!"  B)

 

ЗЫ. Это не спор, а дискуссия =)

 

@ol3gran1, большое "спа" за ссыль, плюс пока тока в карму (из-за ограничений), надеюсь у меня будет еще не одна возможность исправиться


  • 0
MasterWEBS: третий дом - моё хобби и увлечение... Второй дом: работа - не меньше 12 часов в день...
Первый дом - под охраной: "Осторожно - злая жена!" (дрессировалась долго и надёжно) /*ссылку не просите - не дам!*/


#8 ShowPrint

ShowPrint
    Topic Starter
  • Пользователь PRO
  • 1 729 сообщений
  • Репутация: 408

Отправлено 28 Февраль 2016 - 21:42

Hi All!

Работоспособность библиотеки проверена, рекомендуется к использованию, работает зачётно!


  • 0
MasterWEBS: третий дом - моё хобби и увлечение... Второй дом: работа - не меньше 12 часов в день...
Первый дом - под охраной: "Осторожно - злая жена!" (дрессировалась долго и надёжно) /*ссылку не просите - не дам!*/


robot

robot
  • Пользователь PRO
  • 2 652 сообщений
  • Репутация: 85


Оформление форума – IPBSkins.ru