Javascript 在html5中动态创建视频播放列表并按顺序播放视频

我试图在html5上动态创建一个视频播放列表。因此，我动态创建了一个电影URL列表，然后单击链接播放视频。我最初使用此代码来实现连续视频播放： 但是，如果我使用javascript动态生成相同的列表，我的链接将无法工作。我的电影使用#t直接指向同一视频的不同块。视频似乎没有加载。请建议是否有人有解决方案

$(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")
})

生成我的播放列表的方式如下：

    var playlisting = document.getElementById('playlist');
    var li = document.createElement('li');
    var url = "smallvideo.mp4#t=25,35";
    li.setAttribute('movieurl', url);
    li.innerHTML = somedata;
    playlisting.appendChild(li);

---

我已经将您的生成代码添加到JSFIDLE中，它似乎对我来说工作得很好

看看

我已将每个视频的url放置在一个数组中

var videos = [
  'http://grochtdreis.de/fuer-jsfiddle/video/sintel_trailer-480.mp4',
  'http://html5videoformatconverter.com/data/images/happyfit2.mp4',
  'http://www.ioncannon.net/examples/vp8-webm/big_buck_bunny_480p.webm'
];

然后循环遍历数组中的每个项

var playlisting = document.getElementById('playlist');
for(var i=0;i<videos.length;i++){
    var li = document.createElement('li');
    var url = videos[i]+"#t=25,35";
    li.setAttribute('movieurl', url);
    li.innerHTML = 'movie_'+i;
    playlisting.appendChild(li);
}

var playling=document.getElementById（'playlist'）；
对于（var i=0；i
提琴杆

<video id="videoarea" controls="controls" poster="" src=""></video>

<ul id="playlist">
    <li src="http://html5videoformatconverter.com/data/images/happyfit2.mp4" moviesposter="http://html5videoformatconverter.com/data/images/screen.jpg">Happy Fit</li>
    <li src="http://grochtdreis.de/fuer-jsfiddle/video/sintel_trailer-480.mp4">Sintel</li>          
    <li src="http://html5example.net/static/video/html5_Video_VP8.webm">Resident Evil</li>      
    <li src="http://www.ioncannon.net/examples/vp8-webm/big_buck_bunny_480p.webm">Big Buck Bunny</li>
</ul>

$('#playlist li').each(function(){
$(this).click(function(){
var curUrl =$(this).attr("src");
$('#videoarea').attr("src",curUrl)

});
});