Jump to content
  • 0
Sign in to follow this  
antiblef

Как сделать автозапуск и автостоп видео при прокрутке в Muse?

antiblef    0

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

Код нашел Здесь ссылка, но видят ее только участники клуба. Вступите в клуб по этой ссылке.

Сам код ниже.

<!-- div в котором будет проигрываться наш видеоролик -->
<div id="video-placeholder"></div>

<script type="text/javascript">
//соединяемся с API Youtube
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

function checkPosition(){
//функция проверки видимости элемента на jquery
var div_position = $('#video-placeholder').offset();
var div_top = div_position.top;
var div_left = div_position.left;
var div_width = $('#video-placeholder').width();
var div_height = $('#video-placeholder').height();
var top_scroll = $(document).scrollTop();
var left_scroll = $(document).scrollLeft();
var screen_width = $(window).width();
var screen_height = $(window).height()+600;
var see_x1 = left_scroll;
var see_x2 = screen_width + left_scroll;
var see_y1 = top_scroll;
var see_y2 = screen_height + top_scroll;
var div_x1 = div_left;
var div_x2 = div_left + div_height;
var div_y1 = div_top;
var div_y2 = div_top + div_width;
if( div_x1 >= see_x1 && div_x2 <= see_x2 && div_y1 >= see_y1 && div_y2 <= see_y2 ){
//если элемент видим на экране, запускаем видео Youtube
player.playVideo();
}else{
//если не видим, ставим видео на паузу
player.pauseVideo();
}
}

$(document).ready(function(){
//запускаем функцию проверки видимости элемента
$(document).scroll(function(){
checkPosition();
});
$(window).resize(function(){
checkPosition();
});
});

function onYouTubeIframeAPIReady() {
//рисуем видеопроигрыватель Youtube
player = new YT.Player('video-placeholder', {
width: 600, height: 400, //размеры окна видео
playerVars: { 'autoplay': 0, 'controls': 0, 'showinfo': 0, 'rel': 0}, //тонкие настройки видеопроигрывателя
videoId: 'fqesxT90x8g', //здесь id ролика
});}
</script>

Прошу помочь с этим вопросом, как его можно заставить работать в muse? Может разделить его на части и в разные собственно части вставить? Буду очень благодарен если поможете. Заранее спасибо.

Share this post


Link to post
Share on other sites

Recommended Posts

  • 0
1 час назад, antiblef сказал:

Прошу помочь с этим вопросом, как его можно заставить работать в muse? Может разделить его на части и в разные собственно части вставить? Буду очень благодарен если поможете. Заранее спасибо.

Поместите файл на страницу (ctrl+D)

Здесь ссылка, но видят ее только участники клуба. Вступите в клуб по этой ссылке.

Share this post


Link to post
Share on other sites

Новая статья

Как бесплатно получить специализированный хостинг для Adobe Muse сайта. Читайте новую инструкцию по этой ссылке.
  • 0
antiblef    0
В 05.02.2018 в 22:54, Павел Хомерики сказал:

Поместите файл на страницу (ctrl+D)

Здесь ссылка, но видят ее только участники клуба. Вступите в клуб по этой ссылке.

Спасибо огромное! Прямо очень сильно помогли!

Share this post


Link to post
Share on other sites
Sign in to follow this  

×
×
  • Create New...