Доброго времени суток, форумчане, подскажите пожалуйста, почему не работает клик по плейлисту
<!DOCTYPE html>
<html>
<head>
<title>Видеопортлет</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<ul id="playlist">
<H1>Плейлист:</H1>
</ul>
<video id="videoarea" controls="controls" width="640" height="480" poster="" src=""></video>
<script>
$.getJSON('playlist.json', function(data) {
console.log(data);
for(var i=0;i<data.playlist.length;i++){
$('#playlist').append('<li>' + data.playlist[i].moviename + '</li>');
$("#playlist li").attr({
"movieurl": data.playlist[i].movieurl,
"moviesposter": data.playlist[i].moviesposter
})
};
});
$('#playlist li').on('click', function() {
$("#videoarea").attr({
"src": $(this).attr("movieurl"),
"poster": $(this).attr("moviesposter"),
"autoplay": "autoplay"
})
});
$("#videoarea").attr({
"src": $("#playlist li").eq(0).attr("movieurl"),
"poster": $("#playlist li").eq(0).attr("moviesposter")
});
/* запрет контекстного меню на всех элементах video на странице*/
$('video').bind('contextmenu', function(e) {
return false;
});
</script>
<style>
#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;
}
#playlist {
float:left;
}
video::-internal-media-controls-download-button {
display:none;
}
video::-webkit-media-controls-enclosure {
overflow:hidden;
}
video::-webkit-media-controls-panel {
width: calc(100% + 30px); /* Adjust as needed */
}
</style>
</body>
</html>