html---html标签

<!-- 图片、音乐、视频 -->
<img src="img/infor.png" width="60" height="60" alt="这是谁" />
<audio src="./nn.mp3" controls="controls" >你的浏览器不支持</audio>
<video src="./dd.mp4" controls="controls" width="400"  height="400">你的浏览器不支持</video>
<video poster="img/infor.png" controls="true" class="movie" width="100%" height="auto" x5-playsinline="" playsinline="" webkit-playsinline="">
    <source src="img/hehe.mp4" type="video/mp4" id="video">
</video>
<!-- 视频地址：https://www.cnblogs.com/baimangguo/p/6064149.html -->
<!-- https://www.cnblogs.com/guangzhou11/p/7469993.html -->
<!-- http://www.runoob.com/tags/att-video-muted.html -->
<!-- https://blog.csdn.net/huzixianshen/article/details/79805981 -->
<!-- https://blog.csdn.net/RevolCat/article/details/50905219 -->


<!-- 实现视频循环播放 -->
<video id="myVedio" autoplay="autoplay" controls="controls" width="800px">
    <source src="./js/cc.mp4"></source>
</video>
<ul>
    <li>视频一</li>
    <li>视频二</li>
    <li>视频三</li>
</ul>
<script>
    var myVideo = document.getElementById("myVedio"); //通过js获取到vedio标签实例
    var vedioLi = document.getElementsByTagName("li"); //获取视频列表
    var vedioArry = new Array("cc.mp4", "dd.mp4", "ee.mp4"); //设置播放视频列表数组
    var arryNumber = 0; //设置默认播放位置，方便后面循环播放
	
    // 实现点中哪个就播放对应视频
    for(var j = 0; j < vedioLi.length; j++) {//循环条件为列表的长度
        vedioLi[j].onclick = function() {
	    for(var m = 0; m < vedioLi.length; m++) {
                vedioLi[m].style.backgroundColor = "black";//为每个类表设置背景为黑色
	    }
            for(var i = 0; i < vedioLi.length; i++) {
	        if(vedioLi[i] == this) { //判断点中的是否为该项
	            vedioLi[i].style.backgroundColor = "darkgray"; //将点击后的背景设置为灰白
	            arryNumber = i; //将当前播放设置为选中的下标
	            myVideo.src = "./js/" + vedioArry[i]; //设置播放视频
	            myVideo.play(); //开始播放
                }
	    }
        }
    }
	
    // 实现视频循环播放
    myVideo.addEventListener("ended", function() {//为vedio添加ended监听，当视频播放完毕后执行对应函数
        if(arryNumber == (vedioArry.length - 1)) { //判断是否到了最后一个视频
            vedioLi[vedioLi.length - 1].style.backgroundColor = "black"; //将前一个列表颜色设为black
	    vedioLi[0].style.backgroundColor = "darkgray"; //将当前视频设置为灰白
	    myVideo.src = "./js/"+vedioArry[0]; //播放第一个视频
	    myVideo.play();
	    arryNumber = 0;//将下标重设为 0
	} else {
	    arryNumber += 1; //每播放一次则将下标加一
	    myVideo.src = "./js/" + vedioArry[arryNumber];
	    vedioLi[arryNumber].style.backgroundColor = "darkgray";
	    vedioLi[arryNumber - 1].style.backgroundColor = "black";
	    myVideo.play();
        }
    });
</script>