1. Главная
  2. Форумы
  3. Техподдержка Drupal
  4. Решение проблем

Как реализовать слайдер с видео и изображение

Главные вкладки

Аватар пользователя tehfoxen tehfoxen 31 марта 2020 в 16:55

Добрый день! Подскажите, как реализовать подобное - https://zagorodexpo.spb.ru/
Необходимо реализовать фон с возможностью выбора видео или изображения в качестве фона.

Лучший ответ

Аватар пользователя Selpi Selpi 1 апреля 2020 в 17:28
1

Загляните в youtube API или посмотрите как сделано на сайте-доноре. Вы можете запустить проигрывание ютуб видео при скрытом плеере с помощью JS.

Вот первый нагугленный пример вам в помощь: https://codepen.io/ccrch/pen/GgPLVW

Комментарии

Аватар пользователя Selpi Selpi 31 марта 2020 в 17:35

Берете на вооружение девтулзы любимого браузера, смотрите как сделано, повторяете на друпале- профит!

Аватар пользователя Selpi Selpi 31 марта 2020 в 19:07

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

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

Аватар пользователя tehfoxen tehfoxen 1 апреля 2020 в 17:20

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

Аватар пользователя Selpi Selpi 1 апреля 2020 в 17:28
1

Загляните в youtube API или посмотрите как сделано на сайте-доноре. Вы можете запустить проигрывание ютуб видео при скрытом плеере с помощью JS.

Вот первый нагугленный пример вам в помощь: https://codepen.io/ccrch/pen/GgPLVW

Аватар пользователя tehfoxen tehfoxen 6 апреля 2020 в 17:16

Проигрыватель реализовали, спасибо. Но вот подскажите,как правильно подключить этот скрипт к сайту. Через тему он не работает вообще,через вьюз, если делать скрипт в php все срабатывает, но возникает конфликт с другими скриптами на сайте. Ошибок в консоли нет, но скрипты не работают. Пробовали drupal_add_js тоже не работает.

Аватар пользователя Selpi Selpi 6 апреля 2020 в 17:45

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

Если скрипт в принципе отсутствует на нужной странице, значит неправильно подключили, читайте для друпала7: https://niklan.net/blog/39
или для 8: https://www.drupal.org/docs/8/theming/adding-stylesheets-css-and-javascr...

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

Типичная обвязка для кастомного скрипта:

(function ($) {
"use strict"

$(document).ready(function () {
что-то там делаем
});
})(this.jQuery);

Аватар пользователя tehfoxen tehfoxen 6 апреля 2020 в 19:23

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

Аватар пользователя Selpi Selpi 6 апреля 2020 в 19:29

>Пробовали через тему - не работает, хоть и подключен и и это видно.

Что значит "не работает"? Если скрипт виден в исходниках, значит подключен он верно и его неработа- следствие некорректного содержимого, которое не работает например потому, что скрипт срабатывает до появления обвязки плеера.

>Вот если его вставить в файл php и запихать во вьюшку, то работает, но перестают работать все остальные скрипты.

Ну так очевидно, что что-то там у вас не в порядке с этим скриптом, раз он ломает все остальное.

Аватар пользователя tehfoxen tehfoxen 6 апреля 2020 в 21:10
jQuery( document ).ready(function( $ ) {
// Grab data attributes from video-wrapper
var videoID = $(".video-wrapper").data("video-id");
var videoYouTubeLink = $(".video-wrapper").data("video-youtube-link");
var videoStart = $(".video-wrapper").data("video-start");
var videoEnd = $(".video-wrapper").data("video-end");
var videoWidthAdd = $(".video-wrapper").data("video-width-add");
var videoHeightAdd = $(".video-wrapper").data("video-height-add");

// Create video script element
var tag = document.createElement('script');
  tag.src = 'https://www.youtube.com/player_api';
var firstScriptTag = document.getElementsByTagName('script')[0];
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

// Setup the Youtube TV with player defaults
var tv,
  playerDefaults = {autoplay: 0, autohide: 1, modestbranding: 1, rel: 0, showinfo: 0, controls: 0, disablekb: 1, enablejsapi: 0, iv_load_policy: 3};
var vid = {'videoId': videoID, 'startSeconds': videoStart, 'endSeconds': videoEnd, 'suggestedQuality': 'hd720'};

function onYouTubePlayerAPIReady(){
  tv = new YT.Player('tv', {events: {'onReady': onPlayerReady, 'onStateChange': onPlayerStateChange}, playerVars: playerDefaults});
}

function onPlayerReady(){
  tv.loadVideoById(vid);
  tv.mute();
}

function onPlayerStateChange(e) {
  if (e.data === 1){
    $('#tv').addClass('active');
  } else if (e.data === 0){
    tv.seekTo(vid.startSeconds)
  }
}

function vidRescale(){
  var w = $(window).width() + videoWidthAdd,
    h = $(window).height() + videoHeightAdd;
  if (w/h > 16/9){
    tv.setSize(w, w/16*9);
    $('.tv .screen').css({'left': '0px'});
  } else {
    tv.setSize(h/9*16, h);
    $('.tv .screen').css({'left': -($('.tv .screen').outerWidth()-w)/2});
  }
}

$(window).on('load resize', function(){
  vidRescale();
});
  });

Вот скрипт, в песочнице все работает. Если он подгружается раньше, то как его подгрузить правильно? Сейчас подгрузка идет через тему в файле info

Аватар пользователя tehfoxen tehfoxen 6 апреля 2020 в 21:10
jQuery( document ).ready(function( $ ) {
// Grab data attributes from video-wrapper
var videoID = $(".video-wrapper").data("video-id");
var videoYouTubeLink = $(".video-wrapper").data("video-youtube-link");
var videoStart = $(".video-wrapper").data("video-start");
var videoEnd = $(".video-wrapper").data("video-end");
var videoWidthAdd = $(".video-wrapper").data("video-width-add");
var videoHeightAdd = $(".video-wrapper").data("video-height-add");

// Create video script element
var tag = document.createElement('script');
  tag.src = 'https://www.youtube.com/player_api';
var firstScriptTag = document.getElementsByTagName('script')[0];
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

// Setup the Youtube TV with player defaults
var tv,
  playerDefaults = {autoplay: 0, autohide: 1, modestbranding: 1, rel: 0, showinfo: 0, controls: 0, disablekb: 1, enablejsapi: 0, iv_load_policy: 3};
var vid = {'videoId': videoID, 'startSeconds': videoStart, 'endSeconds': videoEnd, 'suggestedQuality': 'hd720'};

function onYouTubePlayerAPIReady(){
  tv = new YT.Player('tv', {events: {'onReady': onPlayerReady, 'onStateChange': onPlayerStateChange}, playerVars: playerDefaults});
}

function onPlayerReady(){
  tv.loadVideoById(vid);
  tv.mute();
}

function onPlayerStateChange(e) {
  if (e.data === 1){
    $('#tv').addClass('active');
  } else if (e.data === 0){
    tv.seekTo(vid.startSeconds)
  }
}

function vidRescale(){
  var w = $(window).width() + videoWidthAdd,
    h = $(window).height() + videoHeightAdd;
  if (w/h > 16/9){
    tv.setSize(w, w/16*9);
    $('.tv .screen').css({'left': '0px'});
  } else {
    tv.setSize(h/9*16, h);
    $('.tv .screen').css({'left': -($('.tv .screen').outerWidth()-w)/2});
  }
}

$(window).on('load resize', function(){
  vidRescale();
});
  });

Вот скрипт, в песочнице все работает. Если он подгружается раньше, то как его подгрузить правильно? Сейчас подгрузка идет через тему в файле info

Аватар пользователя Selpi Selpi 7 апреля 2020 в 11:52

Надо дебаггером в браузере смотреть что происходит при работе скрипта.

Вьюз, я надеюсь, полную разметку выводит и не с помощью ajax?

Аватар пользователя Selpi Selpi 7 апреля 2020 в 12:03

Так не бывает. Если скрипт не производит ошибок в консоли, но при этом не работает, значит что-то в нем все-таки не срабатывает, например инициализация плеера.

Аватар пользователя charOFF charOFF 7 апреля 2020 в 12:08

Попробуйте функцию onYouTubePlayerAPIReady вынести на верхний уровень, т.е. это

function onYouTubePlayerAPIReady(){
  tv = new YT.Player('tv', {events: {'onReady': onPlayerReady, 'onStateChange': onPlayerStateChange}, playerVars: playerDefaults});
}

заменить на:

window.onYouTubePlayerAPIReady = function() {
  tv = new YT.Player('tv', {events: {'onReady': onPlayerReady, 'onStateChange': onPlayerStateChange}, playerVars: playerDefaults});
};
Аватар пользователя tehfoxen tehfoxen 1 апреля 2020 в 17:22

не подходит модуль, так как он вешает фон на весь боди, а мне необходимо только на хедар по сути, а так интересный, спасибо.