Question

我从头开始重建我的脚本，唯一的问题是我无法将播放列表放在我的视频播放器旁边，播放列表当前位于播放器的底部，这就是我想要实现的目标：

enter image description here

这是我的代码：

<?php
.............
    <html>
    <head>
    <style type="text/css">
    #myvideo {
        float: left;
        width:630px;
        height:350px;
        border:1px solid #EBEBFA;
        }
    #playlist,video{ 
        font-size: 13px; 
        line-height: 100%;
        background-color: rgba(255, 255, 255, 0.0);
        width:250px;
        list-style-type: none;
        padding:5px;
        }
    .active a{
        color:#00FF00;
        text-decoration:none;
        }
    li a{
        color:#FFFFFF;
        background:rgba(0, 0, 0, 0.5);
        padding:5px;
        display:block;
        text-decoration: none;
        }
    li a:hover{
        color:#FFFF00;
        text-decoration:none;
        }
    </style>
       <script type="text/javascript" src="jquery-1.11.2.min.js"></script>
       <script type="text/javascript">
    var video;
    var playlist;
    var tracks;
    var current;

    $(document).ready(function() {
     init();
    });
    function init(){
       current = 0;
       video = $("video");
       playlist = $("#playlist");
       tracks = playlist.find("li a");
       len = tracks.length - 1;
       video[0].volume = .30;
       video[0].play();
       playlist.find("a").click(function(e){
           e.preventDefault();
           link = $(this);
           current = link.parent().index();
           run(link, video[0]);
       });
       video[0].addEventListener("ended",function(e){
           current++;
           if(current == len){
               current = 0;
               link = playlist.find("a")[0];
           }else{
               link = playlist.find("a")[current];    
           }
           run($(link),video[0]);
       });
    }
    function run(link, player){
           player.src = link.attr("href");
           par = link.parent();
           par.addClass("active").siblings().removeClass("active");
           video[0].load();
           video[0].play();
    }
    </script>
    </head>
    <body>
       <video id="myvideo" preload="auto" tabindex="0" controls="">

       </video>
       <div id="navcontainer">
       <div id="playlist" align="left" style=" height: 300px;word-wrap: break-word; overflow-y: scroll;">';
    getFiles();
    echo '
    </div>
    <b>Put your video files in /mnt/...</b>
    </div>
    </div>';
    foot();
    echo '
    </body>
    </html>';
    ?>

我该如何解决这个问题？

JSFIDDLE中的代码：http://jsfiddle.net/n66ef9L9/

无法获得播放器旁边的播放列表

0 个答案: