Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html>
- <head>
- <style type="text/css">
- .MenuBox {
- -moz-border-radius:30px;
- -webkit-border-radius:30px;
- border-radius:30px;
- border: #solid 10px #000;
- background-color: rgba(255,255,255,0.5);
- width:fixed;
- height:auto;
- margin: 0 auto;
- padding:10px;
- }
- .MenuBox:before,
- .MenuBox:after {
- content: "";
- display: table;
- }
- .MenuBox:after {
- clear: both;
- }
- #videoarea {
- float: left;
- width:630px;
- height:350px;
- }
- #playlist {
- float: left;
- }
- #playlist li{
- cursor:pointer;
- }
- #playlist li:hover{
- color:blue;
- }
- </style>
- <script type="text/javascript" src="jquery-1.11.2.min.js"></script>
- <script type="text/javascript">
- $(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")
- })
- })
- </script>
- </head>
- <body>
- <div class="MenuBox">
- <video id="videoarea" controls="controls" poster="" src=""></video>
- <ul id="playlist">
- <li movieurl="/mnt/usb/snk.mkv">SnK</li>
- <li movieurl="/mnt/usb/titanic.mp4">Titanic Titanic Titanic Titanic Titanic Titanic </li>
- <li movieurl="/mnt/usb/shutter.mkv">Shutter</li>
- <li movieurl="/mnt/usb/ab1.mp4">AB1</li>
- <li movieurl="/mnt/usb/ab2.mp4">AB2</li>
- <li movieurl="/mnt/usb/d1.mp4">D</li>
- </ul>
- </div>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement