新手第一次发CSDN，请多关照 今天我来整理一下视频播放器，主要是javaScript部分。

首先是html部分（我这里只贴出关键部分，其他修饰网页的部分在末尾完整实现代码处贴出）

接下来是css部分，这部分主要是播放框和影视选择框部分的位置等等 值得注意的是：因为视频选择框那里是动态生成的，所以我们用div/video等标签选择器来代表（当然也可以用calss等等：setAttribute(“class”,"…") ;）

首先为 //window.变量名：定义全局变量 var video=document.createElement("video"); //创建一个电影并复制src video.src="./video/"+i+".mp4"; d(); text(window.a[i-1]); shipin(video); } } 我们创建一个全局数组a来存放视频的作者与名称late用来存放用户上一次选中的视频，以便在用户选择下一个视频时将其的突出背景取消late_1用来存放用户上一次鼠标悬浮的视频，以便在用户鼠标移动到下一个视频时将其的突出背景取消这里循环控制变量i定义成全局变量的原因，是为了在定义div选项的时候将其id赋值为i，以用于现实视频名称作者时准确找到数组的对应元素（描述的不好，直接看下面代码吧【尴尬】） function d(){ window.div=document.createElement("div"); //创建电影栏目div用于保存一个电影信息 div.setAttribute("id",i); //setAttribute() ：方法添加指定的属性，并为其赋指定的值。 document.getElementById("selector").appendChild(div); window.div.onmouseover=function(){ //鼠标悬浮事件 if(this!=window.late) //避免鼠标移到正在播放的电影栏目上时也改变背景色 this.style.backgroundColor="cadetblue"; window.late_1=this; } window.div.onmouseleave=function(){ //鼠标离开事件 if(window.late!=window.late_1) //避免在离开正在播放的电影栏目时也会恢复其背景色 window.late_1.style.backgroundColor="transparent"; } } 创建选项div，并为其创建鼠标悬浮/离开的事件与其内部方法 function shipin(video){ window.div.appendChild(video); window.div.onclick=function(){ //电影栏目的onclick事件 document.getElementById("video").src=video.src; window.late.style.backgroundColor="transparent"; //将前一个电影背景色恢复 this.style.backgroundColor="#808080"; //将当前选中的电影背景色改变 document.getElementById("name").innerHTML=a[this.id*2-1]; //动态改变视频名称 document.getElementById("author").innerHTML=a[this.id*2-2]; //动态改变视频作者 window.late=this; //更新late变量 } } 创建video的静态视频（因为没有autoplay也没有controls所以展示效果类似一张图片）在这里为div选项框创建爱你onclick事件是因为：这里要将其video的src地址传给播放器里的video，如果将此事件创建咋d()里边就会造成（不管选择哪个视频都是播放最后一个视频，因为初始化完了video变量指向的就是最后一个video对象了） function text(map){ var div2=document.createElement("div"); //电影的说明文字 div2.innerHTML=window.a[i*2-1]; window.div.appendChild(div2); } 最后是文字描述了，因为文字描述要在选线视频的后方，所以为了省事我就直接用div来装的文字描述a数组每两个元素存放一个视频的信息（作者、视频名），所以这里同i*2-1即可找到视频名(i从1开始，下标从0开始)

到这里这个视频播放器就算是完成啦，当然我这里只是挂 上了主要样式，为了美观与大方伙伴们还可以自己加上些其他样式；