Как реализовать автоматическое воспроизведение видео по нажатию на ссылку?

Question

[doktorpull]

Всем привет, появилась необходимость сделать авто воспроизведение видео с ютуб или просто видео добавленного через плеер html. Решил сделать просто передачу нужного параметра в код к видео но не знаю как это сделать. Вот пример кода

<div class="sl">
    	
    	<div class="imgbox" onclick='divdf.style.display="block"'><img src="img/003.jpg" width="640" height="360"></div>
        <div class="buttom" id="divdf">
        	<iframe width="560" height="315" src="http://www.youtube.com/embed/CgBcloPdJjg" frameborder="0" allowfullscreen></iframe>
        </div>
    </div>
< a id="nextbutton" href="" >Переключить</a>

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

<div class="imgbox" onclick='divdf.style.display="block"'><img src="img/003.jpg" width="640" height="360"></div>

Нужно чтобы по нажатию на него не только появлялся div с видео но и к iframe в ссылку добавлялся параметр ?rel=0&autoplay=1

Вот сюда должен дописываться www.youtube.com/embed/CgBcloPdJjg?rel=0&autoplay=1

Так же нужно чтобы при нажатие на ссылку "Переключить" видео переставало воспроизводиться.
Буду очень благодарен вам если поможете решить эту задачку. Сам в java script-e очень плох.

Answer 1

[Юрий Лобанов]

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

Comments

[doktorpull]

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

[doktorpull]

@iiil а ты можешь за это взяться готов заплатить 500-800 рублей.

[Юрий Лобанов]

@doktorpull см. ниже.

[Юрий Лобанов]

@doktorpull, если ближе к ночи будет актуально - возьмусь. Пока думаю найдутся желающие, может и так код напишут.

Answer 2

[Юрий Лобанов]

Подсказываю:
1. измените ссылку, чтобы была рабочая.
2. При клике по картинке скрывайте саму картинку и открывайте блок с айфреймом. можно сделать очень удачный переход, используя css анимацию, к примеру.
3. Потом с помощью js ищите свой айфрейм и изменяйте его атрибут scr: scr = scr + '?rel....'. Однако не факт, что видео начнет автоматически воспроизводиться. Если что - см. п.4.
4. Что касается остановки - читайте API js для ютуба, оно есть. Там даже есть такой параметр enablejsapi
https://developers.google.com/youtube/js_api_refer...
Уверен, что изменять атрибут и не понадобится. Можно все сделать с помощью API, читайте по ссылке.
Это именно подсказка. Писать код - это уже работа.

Comments

[doktorpull]

@iiil спасибо первых два пункта сделал осталось с остальным разобраться.

[Юрий Лобанов]

@doktorpull изменил ответ, добавил ссылку на API

[Юрий Лобанов]

@doktorpull ну как продвигается, реализовали?

Answer 3

[doktorpull]

@iiil нашел решение ну может немного костыльное но все же свое. Но столкнулся с новой проблемой

<div class="slide">
       
       <div id="sales1"><div class="imgbox" onclick="buy2()"><img src="http://cs312728.vk.me/v312728349/81f5/5oSO-UZdqDQ.jpg" width="640" height="360"></div></div>
  
  		
			<script>
            var sales_div = document.getElementById("sales1");
            function buy2(){
            sales1.innerHTML = '<div class="imgbox"><iframe width="640" height="360" src="http://www.youtube.com/embed/CgBcloPdJjg?rel=0&autoplay=1" frameborder="0" allowfullscreen></iframe></div>';
            }
            function cancel(){
            sales1.innerHTML = '<div class="imgbox" onclick="buy2()"><img src="http://cs312728.vk.me/v312728349/81f5/5oSO-UZdqDQ.jpg" width="640" height="360"></div>';
            }
            </script>
      </div>
      
      
      <div class="slide">
        <div id="sales2"><div class="imgbox" onclick="buy()"><img src="http://cs312728.vk.me/v312728349/81fd/rNsbgmc8tEs.jpg" width="640" height="360"></div></div>
  
  		
			<script>
            var sales_div = document.getElementById("sales2");
            function buy(){
            sales2.innerHTML = '<div class="imgbox"><iframe width="640" height="360" src="http://www.youtube.com/embed/CgBcloPdJjg?rel=0&autoplay=1" frameborder="0" allowfullscreen></iframe></div>';
            }
            function cancel(){
            sales2.innerHTML = '<div class="imgbox" onclick="buy()"><img src="http://cs312728.vk.me/v312728349/81fd/rNsbgmc8tEs.jpg" width="640" height="360"></div>';
            }
            </script>
      </div>

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

Comments

[Юрий Лобанов]

При замене содержимого через sales1.innerHTML у Вас скрипт из этого блока не удаляется?
Зачем Вы вообще скрипты пихаете в тело, вынесите в head/ Вы можете оформить пример на jsfiddle.com ?

[doktorpull]

@iiil Вот что у меня получается. jsfiddle.net/doktorpull/UBCKR

[doktorpull]

@iiil Я просто нашел решение и применил его.

[Юрий Лобанов]

@doktorpull, так. И вот в этом примере что не устраивает? я жму на картинку - появляется видео, нажимаю выкл - останавливается, появляется картинка.