本文将使用HTML5提供的 VideoAPI做一个自定义的视频列表播放器（重点放在视频的顺序播放，列表切换上，并不重新定义控制条）。

一、插入视频

如果不加上controls属性将不会显示控制条

二、HTML结构

        

             > 
        

三、js部分
1. 首先获取或定义一些需要用到的变量

var video = document.getElementById("video");
    var lis = document.getElementsByTagName("li");
    var vLen = lis.length; // 播放列表的长度
    var url = [];
    var ctrl = document.getElementById("playList-hidden");
    var ctrl_show = document.getElementById('playList-show1');
    var aside = document.getElementById("playList");
    var curr = 1; // 当前播放的视频
    for(var i=0;i

2.实现点击切换视频效果

//绑定单击事件
    for(var i=0;i

3.顺序播放

video.setAttribute('src',url[0]);
    lis[0].innerHTML = 'palying '+lis[0].innerHTML;
    lis[0].className = "select";

    video.addEventListener('ended', play);//添加侦听事件，视频播放完后调用play（）方法
    //play();
    function play() {
       video.src = url[curr];
       video.load(); 
       video.play();

       for(var j=0;j= vLen) curr = 0; // 播放完了，重新播放
    }

4.收起或展示播放列表

//收起播放列表
    ctrl.onclick = function(){

        aside.style.transition = "1s";
        aside.style.transform = "translateX(-10vw)";
        setTimeout(function(){
            aside.style.display = "none";
            ctrl_show.style.visibility= 'visible';
        },"1000");

    }

    //展开播放列表
    ctrl_show.onclick = function(){
        aside.style.display = "block";
        ctrl_show.style.visibility= 'hidden';
        setTimeout(function(){
            aside.style.transform = "translateX(0vw)";
        },"0");

    }

5.demo目录结构

四.小结
本案列体现功能，所以界面不美观且css部分不加以展现。
第一次发表手计，许多地方可能有纰漏。还请见谅。
源码下载链接：http://pan.baidu.com/s/1gfpbvpD

最后运行效果图