Как изменить воспроизводимое видео во встроенном плеере Youtube?
Вопрос
Я хотел бы сделать плейлист, где по клику на каждый <li>
изменю ссылку на видео чуть ниже.Список будет выглядеть следующим образом:
видео1
<li><a href="MzfAvHlIVjE&hl=en&fs=1&rel=0&color1=0x3a3a3a&color2=0x999999">">video1</a></li>
ббббб
- ccccc
видеоплеер здесь
Таким образом, нажатие на ааааа будет воспроизводить ааааа, нажатие на bbbbb будет воспроизводить bbbbb и т. д.
Я бы хотел сделать это ajax, без перерисовки, просто щелкнуть и играть.
Вот объект YouTube для редактирования
<object width="320" height="265">
<param name="movie" value="http://www.youtube.com/v/MzfAvHlIVjE&hl=en&fs=1&rel=0&color1=0x3a3a3a&color2=0x999999"></param>
<param name="allowFullScreen" value="true"></param>
<param name="allowscriptaccess" value="always"></param>
<embed src="http://www.youtube.com/v/MzfAvHlIVjE&hl=en&fs=1&rel=0&color1=0x3a3a3a&color2=0x999999" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="320" height="265"></embed>
</object>
Как изменить видео, воспроизводимое во встроенном плеере Youtube?
Решение
Если вам не нравится всплывающее окно, просто избавьтесь от него:
function play(id)
{
var html = '';
html += '<object >';
html += '<param name="movie" value="http://www.youtube.com/v/'+id+'"></param>';
html += '<param name="autoplay" value="1">';
html += '<param name="wmode" value="transparent"></param>';
html += '<embed src="http://www.youtube.com/v/'+id+'&autoplay=1" type="application/x-shockwave-flash" wmode="transparent" ></embed>';
html += '</object>';
return html;
};
<div id="button1" />
<div id="playvideo" />
$("#button1").click(function() { $("#playvideo").html(play("YOURVIDEOID")); });
Надеюсь это поможет
Другие советы
проверить Плагин jQuery TubePlayer --
плагин выполняет инициализацию плеера за вас, и вы сможете получить полный контроль над плеером.позволяя вам поставить jQuery("#player").tubeplayer("play", "[videoId]")
в обработчике событий на вашем li
х..
У меня есть кое-что, что сработало для меня:
В голове:
<script type="text/javascript" src="../../../Assets/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".button").click(function() {
$("#playvideo").html(play( $(this).find("a").attr("linkattr")));
return false;
});
});
function play(id) {
var html = '';
html += '<iframe width="671" height="495" src="'+id+'" frameborder="0" allowfullscreen></iframe>';
return html;
};
</script>
В теле:
<h2 class="button"><a linkattr="https://www.youtube.com/embed/uopXg6NxboQ?rel=0&showinfo=0" href="#"> video 1 </a></h2>
<h2 class="button"><a linkattr="https://www.youtube.com/embed/h-v1c2kNw70?rel=0&showinfo=0" href="#"> video 2 </a></h2>
<div id="playvideo">
<iframe width="671" height="495" src="https://www.youtube.com/embed/uopXg6NxboQ?rel=0&showinfo=0" frameborder="0" allowfullscreen></iframe>
</div>
См. эту страницу для получения результата: https://cllccavo.asc.ohio-state.edu/Public/Modules/help/howto.php
вот окончательное решение:
http://www.studioteknik.com/youtube/index2.html
вот окончательный код:
<script type="text/javascript">
$(document).ready( function(){
$(".button").click(function() {
console.log($(this).find("a").attr("href"));
$("#playvideo").html(play($(this).find("a").attr("href")));
return false;
});
});
</script>
</head>
<body>
<div>
<ul>
<li class="button"><a href="MzfAvHlIVjE&hl=en&fs=1">Video 1</a></li>
<li class="button"><a href="uN2OGjsLuY8&hl=en&fs=1">Video 2</a></li>
<li class="button"><a href="EZOTMcqaH98&hl=en&fs=1">Video 3</a></li>
<li class="button"><a href="PSTDZEZV72Q&hl=en&fs=1">Video 4</a></li>
<li class="button"><a href="QYlOaoqgMdw&hl=en&fs=1">Video 5</a></li>
<li class="button"><a href="GEcBhbXEFz8&hl=en&fs=1">Video 6</a></li>
<li class="button"><a href="cU6sJ0CQWAc&hl=en&fs=1">Video 7</a></li>
</ul>
</div>
Посмотрите на плагин jquery для YouTube: http://saidur.wordpress.com/2007/12/03/jquery-youtube-beta-plugin/
У вас есть демо здесь:
http://bijon.rightbrainsolution.com/youtube/video.html
Точно такой же интерфейс, какой вам нужен, после поиска видео.(Таким образом, вы можете избавиться от функции поиска)
Надеюсь это поможет.
$('#video-player object embed').attr('src', 'http://www.youtube.com/v/' + id + '&hl=en&fs=1&&autoplay=1');
это вроде тоже работает, хотя все равно вызывает перерисовку флешплеера, да
Марк-Андре Менар. Можете ли вы изменить сценарий, чтобы одно из видео автоматически загружалось при загрузке страницы?