h5 视频播放功能实现

简单制作一个h5 的视频播放

结构 html 部分

 <div id="cans">
        <video controls="controls" id="video" 　src="" height="500px" width="500px"></video>
        <aside id="playList">
            <!-- <header>
                <h4>播放列表</h4>
            </header> -->
            <ul class="list">
                <li value=" " title="01第一讲">01第一讲</li>
                <li value="" title="02第二讲">02第二讲</li>
                <li value=" " title="03第三讲">03第三讲</li>
                <li value="" title="04第四讲">04第四讲</li>
                <li value="" title="05第五讲">05第五讲</li>
            </ul>
            <button title="收起播放列表" id="playList-hidden">
                < </button>
        </aside>
       <button title="展开播放列表" id="playList-show1"> > </button>
    </div>

js

<script>
    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 < lis.length; i++) {

        url[i] = lis[i].getAttribute("value");

    }
    for (var i = 0; i < lis.length; i++) {
        lis[i].onclick = function () {
            for (var j = 0; j < lis.length; j++) {
                if (lis[j] == this) {
                    video.setAttribute("src", this.getAttribute("value")); //获取src路径
                    video.setAttribute('autoplay', 'autoplay');//自动播放
                    this.innerHTML = '正在播放 ' + this.innerHTML;//点击后的列表显示
                    this.className = "select";//点击后的列表显示
                    curr = j + 1;//定位下一播放位置
                } else {
                    lis[j].innerHTML = lis[j].getAttribute("title");//没有点击的列表显示
                    lis[j].className = "";
                }
            }
        }

    }

    video.setAttribute('src', url[0]);
    lis[0].innerHTML = '正在播放 ' + 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 < lis.length; j++) {
            if (j == curr) {
                video.setAttribute("src", lis[j].getAttribute("value"));
                video.setAttribute('autoplay', 'autoplay');
                lis[j].innerHTML = 'palying ' + lis[j].innerHTML;
                lis[j].className = "select";
            } else {
                lis[j].innerHTML = lis[j].getAttribute("title");
                lis[j].className = "";
            }
        }
        curr++;
        if (curr >= vLen) curr = 0; // 播放完了，重新播放
    }
    //收起播放列表
    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");

  }
</script>

基本功能我们就已经实现了，其他根据需求来实现！简单修改即可使用！