Привет, я реализовал пользовательский плейлист для видео по адресу http://jsfiddle.net/Barzi/Jzs6B/9/ Все работает отлично, за исключением того, что я не могу воспроизводить видео на YouTube, на моем сайте приведен код ниже
HTML
<video id="videoarea" controls="controls" poster="" src=""></video>
<ul id="playlist">
<li movieurl="VideoURL1.webm" moviesposter="VideoPoster1.jpg">First video</li>
<li movieurl="VideoURL2.webm">Second video</li>
...
...
</ul>
Javascript через jquery
$(function() {
$("#playlist li").on("click", function() {
$("#videoarea").attr({
"src": $(this).attr("movieurl"),
"poster": "",
"autoplay": "autoplay"
})
})
$("#videoarea").attr({
"src": $("#playlist li").eq(0).attr("movieurl"),
"poster": $("#playlist li").eq(0).attr("moviesposter")
})
})
и css
#playlist {
display:table;
}
#playlist li{
cursor:pointer;
padding:8px;
}
#playlist li:hover{
color:blue;
}
#videoarea {
float:left;
width:640px;
height:480px;
margin:10px;
border:1px solid silver;
}
любая помощь, чтобы получить правильный URL-адрес для воспроизведения этого видео, будет оценена по достоинству
В настоящее время Youtube использует iframe для встраивания своего видеопроигрывателя. Взгляните на эту статью.
Что вам нужно сделать, так это получить список VIDEO_ID с youtube (уникальный идентификатор для каждого видео - что-то вроде M7lc1UVf-VE) и обновить src iframe при переключении видео. Основной пример:
<iframe id="ytplayer" width="560" height="315" src="//www.youtube.com/embed/cA-T-HLdv7g" frameborder="0" allowfullscreen></iframe>
<div id="change">change video</div>
<script>
$('#change').on('click',function(){
$('#ytplayer').attr('src','http://www.youtube.com/embed/OmaI1nInDOs');
});
</script>
На вышеуказанной странице developers.google.com также объясняется, как можно получить список воспроизведения на основе PLAYLIST_ID. Вы также найдете все текущие доступные настройки для настройки вашего плеера.