Замена youtube плеера на картинку при завершении просмотра.

[Antonio4040]

Здравствуйте, ни как ни могу справится с задачей - на сайте raketa.pro на главной странице в самом начале стоит картинка при клике на которую проигрывается видео с youtube. Нужно что бы при завершении просмотра плеер менялся обратно на туже картинку. Распишу подробнее.

 

изменение изображения на видео и курсора

 

<script type="text/javascript"> 

$(window).load(function(){

 

$('img.demovideo').css('cursor', 'pointer');

 

$('body').delegate('img.demovideo','click', function(){

video = '<iframe class="demovideo" width="100%" height="551px" src="'+ $(this).attr('data-video') +'"></iframe>';

$(this).replaceWith(video);

}); 

 

}); 

</script>

 

смена изображения при наведении

 

<script type="text/javascript"> 

$(function() {

$("img.demovideo")

.mouseover(function() { 

var src = $(this).attr("src").match('http://raketa.pro/wp-content/uploads/2013/03/image_he..') + "_2.png";

$(this).attr("src", src);

})

.mouseout(function() {

var src = $(this).attr("src").replace("_2.png", ".png");

$(this).attr("src", src);

});

});

</script>

 

изображение в коде страницы

 

<img class="demovideo" src="http://raketa.pro/wp-content/uploads/2013/03/image_he.." data-video="http://www.youtube.com/embed/7hoqO36CVRM?&rel.." style="cursor: pointer;">

 

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

 

для этого необходимо каким-то образом привязать addeventlistener из youtube api и добавить событие, связанное с условием onStateChange === 0, никак не получается это сделать.

 

Буду благодарен если кто-то сможет помочь. Спасибо

 

 

[Great Rash]

Вот такой скрипт.

Как юзать:

{classPrefix: 'rYouTube', // префикс для классов в CSSvideo: {	id: null, // id видео (копируется с ютуба)	width: 640, // ширина видео	height: null, // высота (если не указана, то считается автоматом)	mute: false, // нужна ли кнопка выключения звука	volume: false, // нужна ли громкость	progress: false, // нужна ли полоска прогресса видео	flash_params: { // параметры флеш-плеера (лучше не трогать)		wmode: 'transparent',		allowScriptAccess: 'always'	},	onLoad: function() {} // событие срабатывает после загрузки плеера},splash: { // дополнительный html для сплешскрина (если нужен, в формате jquery)	html: ''},btnPlay: { // тоже самое для кнопки "плей"	html: ''},mute: { // тоже для выключателя звука	html: ''},volume_cont: {	view: 'vertical', // расположение регулятора звука (вертикально/горизонтально)	html: '' // доп. html для регулятора},volume_inner: { // доп. html для ползунка	html: ''},progress_cont: {	html: ''},progress_inner: { // доп. html для прогрессбара	html: ''}}

Пример использования:

 

$('#elem').rYouTube({	video: {		id: '2LIKdh8qRT0',		width: 273,		height: 170	}});

В комплекте с плагином идёт SWFObject (они в одном файле). Если SWFObject на странице уже есть, то просто можно выпилить всё до коммента (// rYouTube). Будут вопросы, отвечу в понедельник.

[Antonio4040]

Вот такой скрипт.

Как юзать:

 

{classPrefix: 'rYouTube', // префикс для классов в CSSvideo: {	id: null, // id видео (копируется с ютуба)	width: 640, // ширина видео	height: null, // высота (если не указана, то считается автоматом)	mute: false, // нужна ли кнопка выключения звука	volume: false, // нужна ли громкость	progress: false, // нужна ли полоска прогресса видео	flash_params: { // параметры флеш-плеера (лучше не трогать)		wmode: 'transparent',		allowScriptAccess: 'always'	},	onLoad: function() {} // событие срабатывает после загрузки плеера},splash: { // дополнительный html для сплешскрина (если нужен, в формате jquery)	html: ''},btnPlay: { // тоже самое для кнопки "плей"	html: ''},mute: { // тоже для выключателя звука	html: ''},volume_cont: {	view: 'vertical', // расположение регулятора звука (вертикально/горизонтально)	html: '' // доп. html для регулятора},volume_inner: { // доп. html для ползунка	html: ''},progress_cont: {	html: ''},progress_inner: { // доп. html для прогрессбара	html: ''}}

Пример использования:

 

$('#elem').rYouTube({	video: {		id: '2LIKdh8qRT0',		width: 273,		height: 170	}});

В комплекте с плагином идёт SWFObject (они в одном файле). Если SWFObject на странице уже есть, то просто можно выпилить всё до коммента (// rYouTube). Будут вопросы, отвечу в понедельник.

 

 

Большое спасибо! Будем пробовать, если возникнут вопросы - сообщим.

[Antonio4040]

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

[Great Rash]

Я собрал для вас пример на фидле - http://jsfiddle.net/8Qbbw/

[antonKar]

для этого необходимо каким-то образом привязать addeventlistener из youtube api и добавить событие, связанное с условием onStateChange === 0, никак не получается это сделать.

 

А не факт, что сработает при таком методе подключения. 

 

1) Цепляем видео

<div id="dropdownVideo__video">    Для просмотра видео необходимо установить Flash player и активировать JavaScript.</div><script type="text/javascript"> var ytplayer; var videoBox; var videoWidth = 1280; var videoHeight = 720; function onYouTubePlayerAPIReady() {     videoBox = document.getElementById('dropdownVideo__video');     videoBox.ytplayer = new YT.Player(videoBox, {         videoId: 'GlGBUPT6XKw',         playerVars: {             wmode: "transparent" },         height: videoHeight,         width: videoWidth     }); } </script><!-- да-да, не удивляйся, мой юный друг, library от YouTube надо вставлять после, спасибо Opera 12 --> <script type="text/javascript" src="//www.youtube.com/iframe_api"></script>

2) Получившемуся iframe делаем position: absolute; left: -9999px; top: -9999px (родительскому div, ясно дело, делаем position: relative).

 

3) Затем при клике на картинку скрываем её, а для iframe делаем в ноль левый и верхний отступы; затем 

ytplayer = document.getElementById("dropdownVideo__video"); //хз нужно ли это, но пускай будет, с этим API от YouTube с горя офигеешьvideoBox.ytplayer.playVideo();

И делаем setInterval, скажем, в 100 миллисекунд, в котором проверяем состояние воспроизведения видео videoBox.ytplayer.getPlayerState() (не помню какое числовое значение соответсвует окончанию воспроизведения, посмотрите документацию).

 

Как только воспроизведение закончилось, то скрываем iframe, показываем картинку, останавливаем setInterval.

Edited January 22, 2014 by antonKar

[Antonio4040]

Вот страница с экспериментом - http://raketa.pro/?page_id=1814&preview=true

 

если добавить jquery 1.10.1 - то видео вообще не видно, если оставить 1.8.3 - то не работает переключение с картинки на видео

 

div#video находится в contentwrapper>content_wrapper, на белом фоне. установка height не помогает.

[Great Rash]

У меня 404 по ссылке.

[Antonio4040]

У меня 404 по ссылке.

 

Попробуйте так http://raketa.pro/glavnaya_test/

[Great Rash]

Вы неверно подключили плагин. Вот ваш код:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.js"></script><script type="text/javascript" src="http://tanks.mail.ru/themes/default/js/jquery.rYouTube.min.js"></script><script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.js"></script>

Видите? Вы перезаписали jQuery, следовательно все плагины, подключенные ранее работать не будут, т.к. их больше нет в объекте $.fn, ибо новая версия jQuery затёрла старую.

[Antonio4040]

Вы неверно подключили плагин. Вот ваш код:

 

<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.js"></script><script type="text/javascript" src="http://tanks.mail.ru/themes/default/js/jquery.rYouTube.min.js"></script><script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.js"></script>

Видите? Вы перезаписали jQuery, следовательно все плагины, подключенные ранее работать не будут, т.к. их больше нет в объекте $.fn, ибо новая версия jQuery затёрла старую.

 

 

Не понятно, почему не работает на 1.8.3. на фидле работает на этой версии.

[Great Rash]

Уберите эту строку, должно заработать:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.js"></script>

[Antonio4040]

Уберите эту строку, должно заработать:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.js"></script>

Уже убрали - не помогает.

[Great Rash]

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

[Antonio4040]

Действительно, на чистой html работает http://raketa.pro/test.html

 

А на нашей странице http://raketa.pro/glavnaya_test/ в Event Listeners на событии click отсутствует нужный скрипт

Он как-то перезаписывается или в чем может быть причина?

[Great Rash]

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

UPD: возможно где-то событие click останавливается, поищите return false; или что-то в этом духе. Может клик перехватывается другим скриптом?

[Antonio4040]

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

 

Сами уже замучились с этим вопросом, поэтому предлагаем денежное вознаграждение за помощь.

 

Нужно сделать все точно также как на главной:

 

-Резиновая ширина видео 100%

-Widescreen (отсутствие черных полос сверху и снизу)

-Серая тема оформления и наличие элементов управления проигрывателем

-Отсутствие ссылки на youtube

 

Но что бы по окончании проигрывания возвращалась исходная картинка, как было описано изначально.

[antonKar]

-Отсутствие ссылки на youtube

 

По-моему это никак не сделать, по крайней мере при работе с YouTube Iframe API. Там либо информационная полоса сверху появляющаяся, либо логотип YouTube в правом нижнем углу. А без того и того никак.

[Antonio4040]

 

-Отсутствие ссылки на youtube

 

По-моему это никак не сделать, по крайней мере при работе с YouTube Iframe API. Там либо информационная полоса сверху появляющаяся, либо логотип YouTube в правом нижнем углу. А без того и того никак.

 

 

 Нас устраивает вариант ссылки как сейчас - в полосе элементов управления проигрывателя, а есть разновидности, когда здоровая пнг на сам видеоряд накладывается (этого хотелось бы избежать)

[Great Rash]

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

 

Кроме того, что true выставить нужно еще и реализовать громкость и строку состояния. Т.е. надо написать для них стили. Если посмотрите в инспекторе, то все необходимые элементы там уже есть. 

[Николя223]

возможно вам вот это плеер поможет? http://www.jwplayer.com/ под ютуб настраивается легко

[Antonio4040]

 

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

 

Кроме того, что true выставить нужно еще и реализовать громкость и строку состояния. Т.е. надо написать для них стили. Если посмотрите в инспекторе, то все необходимые элементы там уже есть. 

 

 

Grat Rash, как с вами можно связаться? Я что-то не понял как отправлять личные сообщения на форуме.

[Great Rash]

Пишите сюда.

[Antonio4040]

Пишите сюда.

 

Можете ли вы сделать то что нам требуется и сколько вы за это возьмете?

[Great Rash]

Денег за это я брать не буду. Да и делать у меня времени нет.

 

Я проапдейтил для вас фиддл: http://jsfiddle.net/8Qbbw/3/ (зеленая кнопка - вкл/выкл звук, синяя - громкость, оранжевая - прогресс видео). Если уж теперь будет непонятно, ну тогда я не знаю...

[Antonio4040]

Денег за это я брать не буду. Да и делать у меня времени нет.

 

Я проапдейтил для вас фиддл: http://jsfiddle.net/8Qbbw/3/ (зеленая кнопка - вкл/выкл звук, синяя - громкость, оранжевая - прогресс видео). Если уж теперь будет непонятно, ну тогда я не знаю...

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