Я создал скрипт JS для этого здесь:
http://jsfiddle.net/Barzi/Jzs6B/9/
Во-первых, ваш HTML-разметка выглядит так:
- First video
- Second video
...
...
Во-вторых, ваш код 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;
}