@Gagatyn
Самоучка

Как оптимизировать страницу состоящую из видео и картинок?

Здравствуйте!
Вот пример типа страницы с 42 видео.
Как сделать так, чтобы страница загружалась быстро?
Сначала я хотел оставить тег атрибут source пустым, а в poster тега video вставить картинку видео
и при клике вставлять ссылку на видео, но вышла ошибка, с которой я встречаюсь впервые.
  • Вопрос задан
  • 43 просмотра
Решения вопроса 1
Привет! Для видео из ютуба я делаю следующее:

HTML:
<div class="slider-videos__videos-item js-youtube-wrap">
    <div class="slider-videos__youtube js-youtube" id="B7_CMlUwiRI"></div>
</div>


CSS (stylus):
.slider-videos
    &__videos-item
        display block
        position relative
        height 154px
        overflow hidden
        background-color white
        width 260px
        transition all 1s ease

        &:focus
            outline none

    &__youtube
        background-position center
        background-repeat no-repeat
        background-size 110%
        position relative
        display inline-block
        overflow hidden
        transition all 200ms ease-out
        cursor pointer
        width inherit
        height inherit

    &__play
        background inline('play-icon.svg') no-repeat
        background-position center
        background-size 15%
        position absolute
        height 100%
        width 100%
        opacity .8
        transition all 0.2s ease-out

        &:hover
            opacity 1


JavaScript:
$(function() {
    $(".js-youtube").each(function() {
      $(this).css('background-image', 'url(http://i.ytimg.com/vi/' + this.id + '/sddefault.jpg)');
      $(this).append($('<div/>', {'class': 'slider-videos__play'}));

      $(document).delegate('#'+this.id, 'click', function() {
        var iframe_url = "https://www.youtube.com/embed/" + this.id + "?autoplay=1&autohide=1&enablejsapi=1";
        if ($(this).data('params')) iframe_url+='&'+$(this).data('params');
        var iframe = $('<iframe/>', {'id': this.id, 'class': 'youtube', 'frameborder': '0', 'allowfullscreen': 'allowfullscreen', 'src': iframe_url, 'width': $(this).width(), 'height': $(this).height() })
        $(this).replaceWith(iframe);
      });
    });
  });


Суть в том, что изначально вместо видео на странице отображаются пустые блоки нужного размера с фоновой картинкой видео и кнопкой "play". Заставка и кнопка подгружаются с помощью JS.
Далее при клике по блоку мы с помощью JS подгружаем iframe в этот блок и расставляем необходимые ссылки. ID для видео мы берем из атрибута id в HTML (пишем айдишник изначально в HTML).

Думаю в твоем случае реализовать можно таким же способом, стоит лишь подкорректировать JS.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через TM ID
Похожие вопросы
Reklama Guru Санкт-Петербург
от 50 000 до 60 000 руб.
Greencow Studio Москва
от 80 000 до 120 000 руб.
Biganto Москва
от 130 000 до 130 000 руб.
20 авг. 2018, в 21:21
30000 руб./за проект
20 авг. 2018, в 20:46
5000 руб./за проект
20 авг. 2018, в 20:38
700 руб./в час