使用html+js实现视频播放器

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

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

 <div id="player"><video id="video" src="###" controls="controls" autoplay="autoplay"></video><div id="name">请选择视频</div><div id="author"></div></div><div id="selector"></div><div id="d" style="width: 0px; height: 0px;"></div>

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

#player{height: 80%;width: 55%;position: absolute;left: 5%;top: 15%;box-shadow: 5px 5px 10px 2px black ;-moz-box-shadow: 5px 5px 10px 2px black ;        /* 老的 Firefox */background-color: white;
}
#player>#video{width: 100%;height: 82.3%;position: absolute;top: 0;
}
#player>#name{width: 100%;height: 15%;font-size: 30px;font-family: 华文行楷;position: absolute;top: 83%;overflow: auto;left: 1%;
}
#player>#author{width: 100%;height: 3%;font-size: 20px;font-family: 隶书;position: absolute;bottom: 2%;left: 2%;
}#selector{overflow: auto;height: 85%;width: 30%;position: absolute;right: 3%;top: 12.5%;background-color: #2F4F4F;
}
#selector>div{           /*这是selector里每个选项框*/width: 100%;height: 31%;position: relative;padding: 2px 0px;border-bottom: 2px solid black;
}
#selector>div>video{  /*选项的视频*/width: 70%;position: relative;height: 100%;float: left;
}
#selector>div>div{        /*选项视频的名称*/width: 28%;height: 30%;position: relative;padding: 2px 1px;top: 2%;cursor: default;float: right;color: orange;zIndex: 9999;
}

javascript部分

首先为<body标签加了个onload事件实行现init()方法，在init()方法内进行选择栏里选项的创建以及调用其他方法为选项增添属性与事件

function init(){window.a=["战场-原样","钢铁侠始，钢铁侠终，爱你三千遍！十年终落幕，无悔","音乐Wu哥","《复联》英雄专属出场BGM，都帅得一塌糊涂，只有星爵像个傻子","谷阿莫","【谷阿莫】5分钟看完2016动画电影《大鱼海棠》","轩龙鸽鸽","漫威踩点视频；让人相当舒服的踩点与衔接！","烟季","动漫踩点视频；让世界感受这场视觉盛宴吧！","作者Ba1y","超英混剪辑","光影笔墨","全体起立！【进击的巨人最终季】中文预告终于来了，莱纳坐啊！","`瞎剪君吴十三","【魁拔IV之最后的魁拔】2020档大电影预告 热血混剪","狗兔电影院","3分钟告诉你《大鱼海棠》讲什么？"];window.late=document.getElementById("d");        //创建一个全局变量late用于保存上次播放的电影window.late_1=document.getElementById("d");     //创建一个全局变量late_1用于保存上次悬浮的divfor(window.i=1 ; i<10 ; i++){         //window.变量名：定义全局变量var video=document.createElement("video");     //创建一个电影并复制srcvideo.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开始)

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

下面是完整实现代码（视频/图片src地址要根据自己文件夹位置稍加改动）

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="utf-8" /><title>two.html</title><style type="text/css">body{background-color: rgb(32,177,212);width: 100%;height: 100%;}*{margin: 0px;padding: 0px;}#titleBar{background-color: #07cbc9;height: 10%;position: absolute;width: 100%;}#titleBar .logo{width: 4%;height: 85%;margin: 0.4% 0.8%;float: left;-webkit-transition: -webkit-transform 0.3s;}#titleBar .logo:hover{transform: scale(1.2,1.2);}#titleBar>.name{font-size: 40px;font-family: 华文新魏;margin: 0px 0.8%;line-height: 180%;float: left;background: linear-gradient(135deg,goldenrod 25%,blue 100%);                              /*设置渐变背景，右下角方向，颜色25%开始*/-webkit-text-fill-color: transparent;-webkit-background-clip: text;}#titleBar>ul{float: right;list-style-type: none;width: 10%;margin-right: 5%;}#titleBar>ul li{text-align: center;width: 50%;float: left;font-size: 20px;font-family: 行楷;paddig: 0 5%;line-height: 350%;transition:font-weight 0.3s, color 0.3s, background-color 0.3s,transform 0.3s;-moz-transition:font-weight 0.3s, color 0.3s, background-color 0.3s,-moz-transform 0.3s;-webkit-transition:font-weight 0.3s, color 0.3s, background-color 0.3s,-webkit-transform 0.3s;-o-transition:font-weight 0.3s, color 0.3s, background-color 0.3s,-o-transform 0.3s;}#titleBar>ul li:hover{font-weight: bolder;color: white;background-color: darkslategray;transform: scale(1.1,1.1);}#titleBar>ul a{color: #000000;text-decoration: none;}#player{height: 80%;width: 55%;position: absolute;left: 5%;top: 15%;box-shadow: 5px 5px 10px 2px black ;-moz-box-shadow: 5px 5px 10px 2px black ;           /* 老的 Firefox */background-color: white;}#player>#video{width: 100%;height: 82.3%;position: absolute;top: 0;}#player>#name{width: 100%;height: 15%;font-size: 30px;font-family: 华文行楷;position: absolute;top: 83%;overflow: auto;left: 1%;}#player>#author{width: 100%;height: 3%;font-size: 20px;font-family: 隶书;position: absolute;bottom: 2%;left: 2%;}#selector{overflow: auto;height: 85%;width: 30%;position: absolute;right: 3%;top: 12.5%;background-color: #2F4F4F;}#selector>div{          /*这是selector里每个选项框*/width: 100%;height: 31%;position: relative;padding: 2px 0px;border-bottom: 2px solid black;}#selector>div>video{  /*选项的视频*/width: 70%;position: relative;height: 100%;float: left;}#selector>div>div{       /*选项视频的名称*/width: 28%;height: 30%;position: relative;padding: 2px 1px;top: 2%;cursor: default;float: right;color: orange;zIndex: 9999;}</style><script type="text/javascript">function init(){window.a=["战场-原样","钢铁侠始，钢铁侠终，爱你三千遍！十年终        落幕，无悔","音乐Wu哥","《复联》英雄专属出场BGM，都帅得一塌糊涂，只有星爵像个傻子","谷阿莫","【谷阿莫】5分钟看完2016动画电影《大鱼海棠》","轩龙鸽鸽","漫威踩点视频；让人相当舒服的踩点与衔接！","烟季","动漫踩点视频；让世界感受这场视觉盛宴吧！","作者Ba1y","超英混剪辑","光影笔墨","全体起立！【进击的巨人最终季】中文预告终于来了，莱纳坐啊！","`瞎剪君吴十三","【魁拔IV之最后的魁拔】2020档大电影预告 热血混剪","狗兔电影院","3分钟告诉你《大鱼海棠》讲什么？"];window.late=document.getElementById("d");      //创建一个全     局变量late用于保存上次播放的电影window.late_1=document.getElementById("d");        //创建一个全局变量late_1用于保存上次悬浮的divfor(window.i=1 ; i<10 ; i++){         //window.变量名：定义全局变量var video=document.createElement("video");     //创建一个电影并复制srcvideo.src="./video/"+i+".mp4";d();shipin(video);text(window.a[i-1]);}}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";}}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变量}}function text(map){var div2=document.createElement("div");               //电影的说明文字div2.innerHTML=window.a[i*2-1];           //a数组每两个元素存放一个视频的信息（作者、视频名），所以这里同i*2-1即可找到视频名(i从1开始，下标从0开始)window.div.appendChild(div2);}</script></head><body onload="init()"><h1 style="text-indent: -9999"></h1><div id="titleBar"><a href="logo.jpg" target="_blank"><img class="logo" src="./video/logo.jpg" /></a><p class="name">大雄影视</p><ul><a href="one.html"><li style="cursor: default">注销</li></a><a href="./video/help.txt"><li style="cursor: help">帮助</li></a></ul></div><div id="player"><video id="video" src="###" controls="controls" autoplay="autoplay"></video><div id="name">请选择视频</div><div id="author"></div></div><div id="selector"></div><div id="d" style="width: 0px; height: 0px;"></div>      <!--定义一个空的div是为了js里面为对象变量初始化哈哈哈哈-->
</body>
</html>

使用html+js实现视频播放器相关推荐

springboot + vue3实现视频播放Demo（video.js Vue3-video-play视频播放器）
文章目录学习链接前言 ffmpeg 安装ffmpeg 配置环境变量分割视频文件后台配置 WebConfig 前端代码 video.js示例安装依赖视频播放组件效果 Vue3-video- ...
用js自定义视频播放器
今天简单介绍一下视频播放器的写法和播放器功能列表:0.视频加载完成前的初始1.控制视频开始暂停:2.实时监控进度更新进度条和时间3.控制声音大小:4.控制倍速:5.控制全屏:6.进度条点击更改视频进 ...
Artplayer.js - HTML5 视频播放器
一直想往前端流媒体方面研究,学习视频播放器 API 期间,断断续续的终于整体实现了一个简单的播放器,以及一些相关的插件.工具和组件. 之前在 v 站发过一次求测试,现在终于有一个相对稳定的版本,但兼容 ...
html5视频播放器原理,HTML5 - 两款基于JS的视频播放器的使用说明（VideoJS和jPlayer）...
通常我们使用HTML5播放器播放视频时,还要考虑浏览器兼容.像IE8这种不支持的古董级浏览器,就需要提供Flash播放器作为备用方案.这些如果都要自己弄就很麻烦. 这里推荐两个好用的HTML5媒体播放 ...
video.js html5 视频播放器
1 我个人感觉很不错 2 https://github.com/videojs/video.js 3 <head> 4 <title>Video.js | HTML5 Vide ...
最好免费的 HTML5 JS 网站视频播放器收集
1) Sublime Video – A HTML 5 Video Player 2) VideoJS – HTML5 Video Player with Pure CSS Skins 3) Subt ...
视频播放页php,html jquery简易视频播放器
html jquery js 简易视频播放器直接上代码:html> Document #durationbar{ width: 500px; height: 20px; } #duration ...
video.js视频播放器进度条标记的功能实现
video.js视频播放器的使用 video.js视频播放器安装引入使用 video.js视频播放器接到个需求,需要一个视频播放页面,并且进度条需要在某个时间点打上标记.在网上找了一下,发现 ...
前端html + js视频播放器（快进，快退，倍速，全屏等功能）
基于h5的video,很容易上手,直接上代码,其中还有一些可以优化的地方,大家可以自己优化在这里插入代码片<!DOCTYPE html> <html lang="en&q ...

使用html+js实现视频播放器

使用html+js实现视频播放器

javascript部分

下面是完整实现代码（视频/图片src地址要根据自己文件夹位置稍加改动）

使用html+js实现视频播放器相关推荐

最新文章

热门文章