AlexTrader,
<!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"/>
<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>
<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><H1>Плейлист:</H1>
<ul id="playlist"></ul>
<video id="videoarea" controls="controls" width="640" height="480" poster="" src=""></video>
<script>
var data = {
"playlist": [{
"moviename" : "Видео1",
"movieurl": "http://www.w3schools.com/Tags/mov_bbb.mp4",
"moviesposter": "http://mkrf.ru/upload/iblock/5c8/5c81e230bc528d6570181d6465d19200.jpg"
}, {
"moviename" : "Видео2",
"movieurl": "http://www.w3schools.com/Tags/mov_bbb.mp4",
"moviesposter": "http://centromujer.republica.com/files/2014/04/rio-2-trailer.jpg"
}, {
"moviename" : "Видео3",
"movieurl": "http://www.w3schools.com/Tags/mov_bbb.mp4",
"moviesposter": "http://dreammobile.ucoz.ru/_ld/1/12924.jpg"
}]};
function s(b) {
$.each(b.playlist, function(b, a) {
b || $("#videoarea").attr({
src: a.movieurl,
poster: a.moviesposter
});
$("<li>", {
click: function() {
$("#videoarea").attr({
src: a.movieurl,
poster: a.moviesposter,
autoplay: "autoplay"
})
},
text: a.moviename
}).appendTo("#playlist")
})
};
//$.getJSON('playlist.json',s) раскомментровать
s(data)//убрать
/* запрет контекстного меню на всех элементах video на странице*/
$('video').bind('contextmenu', function(e) {
return false;
});
</script>
</body>
</html>