Воспроизведение видео с YouTube в пользовательском HTML-плейлисте

0

Привет, я реализовал пользовательский плейлист для видео по адресу 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-адрес для воспроизведения этого видео, будет оценена по достоинству

  • 0
    Вы должны использовать API YouTube
Теги:
video
youtube

1 ответ

0

В настоящее время 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. Вы также найдете все текущие доступные настройки для настройки вашего плеера.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню