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

Question

[Gagatyn]

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

Comments

[ThunderCat]

Возможно вы не первый столкнулись с такой ошибкой, в гугле ошибку искать пробовали?

[Gagatyn]

ThunderCat, еще не смотрел, думаю придется (хотелось быстрее узнать как решить данную проблемку или проблему)

Answer 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.

Comments

[Gagatyn]

Дмитрий Дербенев тоже решил (придется) сделать подобным способом. На странице картинка и playback, *click* и картинка удалилась, видео загрузилось и играет