[X] Помощник

[ShowPrint Topic Starter]

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

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

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

Насколько я понимаю напрямую выяснить возможность воспроизведения браузером видео - отсутствует, соответственно нужно идти каким-то "сложным путём"
[offtopic]Купец перед отплытием в заморские страны созывает всех своих многочисленных дочек с вопросом, какие подарки им привезти.
Старшая дочка просит привезти ей платок шелковый красоты неописуемой, вторая дочка просит ковер ручной работы с живым орнаментов, третья дочка просит подыскать ей принца и т.д.
Доходит очередь до младшенькой дочери. 
Она говорит: «Привези мне, папенька, чудище страшное для утех сексуальных с извращениями».
Отец застывает в изумлении, потом напускается на дочку с обвинениями ее во всех смертных грехах.
Младшая дочка покорно опускает голову, делает послушный вид и произносит елейным голоском:
«Хорошо, папенька. Пойдем сложным путем. Привези мне тогда Аленький Цветочек»[/offtopic]
Подозреваю что логичнее всего было бы использовать для данных целей 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:

[ol3gran1]

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

В частности:
 

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

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


Сообщение отредактировал ol3gran1 - 27.2.2016, 17:24

[ShowPrint Topic Starter]

Есть такая библиотека Modernizr

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

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

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

[ol3gran1]

Не совсем понял задумку.
Но по моим предположениям будет примерно так:
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. могут быть ошибки, печатал второпях)

[ShowPrint Topic Starter]

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

Ваши предположения - проще, мои более мудрёные... ;)

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

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

[ol3gran1]

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

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

[ShowPrint Topic Starter]

Ну тут палка о двух концах

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

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

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

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

[ShowPrint Topic Starter]

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

Замечание модератора: Эта тема была закрыта автоматически ввиду отсутствия активности в ней на протяжении 100+ дней. Если Вы считаете ее актуальной и хотите оставить сообщение, то воспользуйтесь кнопкой или обратитесь к любому из модераторов.