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


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

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы