JS逐步教你做(自己版本)的视频播放器(我先声明,step我不懂是什么意思,所以没用)
html:
<h1>分享给大家的自定义播放器</h1>
<video src="videos/gone.mp4" id="video" class="screen" poster="img/poster.png">
</video>
<div class="controls">
<button class="btn" id="play">
<i class="fa fa-play fa-2x"></i>
</button>
<button class="btn" id="stop">
<i class="fa fa-stop fa-2x"></i>
</button>
<input type="range" id="progress" class="progress" min="0" max="100" value="0">
<span class="timestamp" id="timestamp">00:00</span>
</div>
html逻辑(注意点): video里面的src代表点击才会看见的。poster代表一打开页面就能看见的东西. 写一个暂停图标的按钮和播放图标的按钮. 然后是在写一个进度条 然后在写一个span用来表示结束的时间是多少.
fa-2x变大,fa-play播放按钮,fa图标第一必须加的.
fa-stop暂停按钮 放大
效果图:
css部分:
*{padding: 0px;margin: 0px;}
body
{
background-color: #666;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
max-height: 100vh;/*记住这里是max啊*/
}
h1 {
color: #fff;
}
.screen
{
cursor: pointer;
widows: 60%;
background: #666;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
.controls
{
background-color: #333;
color: #fff;
width: 60%;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
display: flex;
justify-content: center;
align-items: center;
padding: 10px;
}
.controls .btn {
border: 0;
margin-left: 5px;
background-color: transparent;
cursor: pointer;
}
.controls .fa-play {
color: #28a745;
}
.controls .fa-stop {
color: #dc3545;
}
.controls .fa-pause {
color: #fff;
}
.btn:focus
{
outline: 0;
}
@media (max-width: 800px)
{
.screen,.controls
{
width: 90%;
}
}
css逻辑: 第一步:先清空系统默认的样式. 第二步:在body里面使用flex布局,使用垂直为主轴模式(y),默认主轴是x的哈,主轴与侧轴居中,因为body里面没有高度。所有设高度为100vh; 第三步:把图片设为:hover的时候小手手.高度为整个body的60%,在左上角添加圆角边框。都是10px. 第三步:设置这里的。
flex布局,主轴x与侧轴y都居中
.justify-content: center;
align-items: center;
第四步:
.controls .btn {
border: 0;
margin-left: 5px;
background-color: transparent;
cursor: pointer;
}
这样只能看见图标.然后小手手.
//第五步: 图标的颜色.
.controls .fa-play {
color: #28a745;
}
.controls .fa-stop {
color: #dc3545;
}
.controls .fa-pause {
color: #fff;
}
第六步:第一个是播放的图标,记住哈,fa-play图标是同时具备暂停图标的哈. 第七步:第二个暂停图标, 第八步:第三个是
最左边的图标.
<i class="fa fa-play fa-2x"></i>
同时具备了pause也就是最左边的图标哈.
第九步: .
btn:focus
{
outline: 0;
}
@media (max-width: 800px)
{
.screen,.controls
{
width: 90%;
}
}
媒体查询,当小于800px的时候都是90% 取消button的默认事件
效果图:
js部分:
// 获取节点
const video = document.getElementById("video");
const play = document.getElementById("play");
const stop = document.getElementById("stop");
const progress = document.getElementById("progress");
const timestamp = document.getElementById("timestamp");
video.addEventListener("click",toggleVideoStatus);
video.addEventListener("pause", updatePlayIcon);
video.addEventListener("play", updatePlayIcon);
video.addEventListener("timeupdate", updateProgress);
play.addEventListener("click", toggleVideoStatus);//是用来播放的.按按钮也能播放.
stop.addEventListener("click", stopVideo);//这个是初始化为0的,并且停止掉。
progress.addEventListener("change", setVideoProgress);//这个重要是进度条改变的时候的(拖动的时候).
//以下思路:看见了屏幕在暂停,点击了就播放,看见屏幕在播放,点击了就暂停。
function toggleVideoStatus()// 点击播放或者暂停
{
if(video.paused)//屏幕
{
video.play();
}
else//屏幕
{
video.pause();
}
}
function updatePlayIcon()// 点击video图标更新
{
if(video.paused)
{
play.innerHTML=`<i class="fa fa-play fa-2x"></i>`;//图标的变化
}
else
{
play.innerHTML=`<i class="fa fa-pause fa-2x"></i>`;//图标的变化
}
}
function updateProgress()
{
progress.value=(video.currentTime/video.duration)*100;
/*举个例子把.好吧.假如00:01/00:50=1/50=0.02;0.02*100=2%.假如这个进度条有200px;200*2/100=4px就行了啊.4px就是总时间为50秒的1秒;慢慢来哈,我说的是对的.*/
//获取分钟
let mins=Math.floor(video.currentTime/60);//floor是因为获取的是整数部分.
//注意以下,如果是分钟小于10就往前面加个0;
if(mins<10)
{
mins="0"+String(mins);//转换为字符串
}
// 获取秒数
let secs=Math.floor(video.currentTime%60);//必须是开始的秒钟哈,结束没什么鸟用.
if(secs<10)
{
secs="0"+String(secs);//转换成字符串来与字符串0拼接.
}
timestamp.innerHTML=`${mins}:${secs}`;
}
function stopVideo()
{
video.currentTime=0;
video.pause();
}
function setVideoProgress()
{
video.currentTime=(+progress.value*video.duration)/100;/*+变成是因为变化只能整数啊,字符串不能啊.*/
}/*当前时间是比如50秒,1秒4px把。然后是4*50=200;200/100=2;2代表2%;2%代表走了总长度的2%;代表4px;代表走了一秒了.对的哦慢慢看*/
js逻辑:
第一步:获取到video 播放 暂停并且回归00:00 进度条 timestamp时间走动.
第二步:点击video.addEventListener("click",toggleVideoStatus);
的时候,这个函数:
function toggleVideoStatus()//video的播放与暂停。
{
if(video.paused)
{
video.play();
}
else
{
video.pause();
}
}
意思是当前暂停点击就播放,当前播放点击就暂停.
第三步:
video.addEventListener("pause", updatePlayIcon);
video.addEventListener("play", updatePlayIcon);
这两个事件就代表监听video的,当video暂停和播放的时候,都执行这个函数,代表
function updatePlayIcon()//左下角的右边的切换。
{
if(video.paused)
{
play.innerHTML=`<i class="fa fa-play fa-2x"></i>`;
}
else
{
play.innerHTML=`<i class="fa fa-pause fa-2x"></i>`;
}
}
当video暂停时,显示播放的按钮(代表请问你要播放按这.),
当video暂停时,显示暂停按钮,表示请问一下,要暂停按这。
第四步:
video.addEventListener("timeupdate", updateProgress);
当更新时间时
function updateProgress()//进度条一秒一秒的进度更新,显示的时间也一秒一秒的走。
{
progress.value=(video.currentTime/video.duration)*100;
let mins=Math.floor(video.currentTime/60);
if(mins<10)
{
mins="0"+String(mins);
}
let secs=Math.floor(video.currentTime%60);
if(secs<10)
{
secs="0"+String(secs);
timestamp.innerHTML=`${mins}:${secs}`;
}
timestamp.innerHTML=`${mins}:${secs}`;
}
progress.value=(video.currentTime/video.duration)*100;
:代表:
let mins=Math.floor(video.currentTime/60);
if(mins<10)
{
mins="0"+String(mins);
}
let secs=Math.floor(video.currentTime%60);
if(secs<10)
{
secs="0"+String(secs);
timestamp.innerHTML=`${mins}:${secs}`;
}
timestamp.innerHTML=`${mins}:${secs}`;
代表
整个函数function updateProgress()
代表
第五步:
stop.addEventListener("click", stopVideo);
function stopVideo()//点击后为00:00,并且video为上面一点那个图片.
{
video.currentTime=0;
video.pause();
}
代表
红色的部分.
第六步:
progress.addEventListener("change", setVideoProgress);
function setVideoProgress()
{
video.currentTime=(+progress.value*video.duration)/100;
}
当随意拖动进度条时,对应的
也能充分的对应上.
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Android使用RecyclerView实现投票系统
- Android Selector获取焦点后文本背景修改的实现代码
- 基于SceneForm实现子弹射击(绘制子弹运行轨迹)
- android实现清理缓存功能
- Android实现 Shape属性gradient 渐变效果
- 1K GitHub star+ 的项目是如何炼成的?
- Android属性动画实现图片从左到右逐渐消失
- Android实现清除应用缓存功能
- VBlog的代码结构,使用vue-element,vue-vant组件开发的纯前端博客
- Android仿微信视屏悬浮窗效果
- Android仿QQ可拉伸头部控件
- android使用surfaceview+MediaPlayer播放视频
- Android性能之冷启动优化详析
- Android自定义View实现地铁显示牌效果
- Android自定义控件实现望远镜效果