【html+css+js】用前端做一个视频播放器页面

介绍

HTML5

CSS3

JavaScript

效果图展示

介绍

学习前端两个星期后学到了很多，知道了html是制作网页的“骨架”，css是制作好看的皮囊，js是让人动起来，哈哈哈，我觉得我理解的没有错，我感觉学习前端比学习Python有意思多了。

学习前端是一边学习一遍练习做的一个不能切换视频的视频播放器界面，能换视频的播放器等我再学习一段时间应该就可以实现了，到时候再加上数据库，一个小型的视频播放网站就可以做成，哈哈哈。

HTML5

用HTML5编写网页简单的框架，导入css和js文件。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>播放器</title><!--引入css文件--><link rel="stylesheet" href="xin.css"><script type="text/javascript"  src="yi.js">  //src:引入js文件的路径</script></head>
<!--设置图片路径-->
<body>
<div class="videoContainer" align="center"><video id="videoPlayer" ontimeupdate="progressUpdate()" width="640" height="440" controls="controls"><source src="图片/lv_0_20220609221451.mp4"  type="video/mp4" ><source src="图片/mixkit-beach-front-with-children-playing-2176.webm"             type="video/webm" ></video>
</div>
<div class="barContainer" align="center"><div id="durationBar"><div id="positionBar"><span id="displayStatus">进度条.</span></div></div>
</div>
<div class="top" align="center"><button  class="button-3d-1" onclick="play()">播放</button><button onclick="pause()">暂停</button><button onclick="stop()">重新开始</button>
</div>
</body>
</html>

CSS3

用CSS3来美化界面，让界面美观能吸引人观看。其中我用到了类选择器和标签选择器。

body{background: url("图片/妮露.jpg") fixed;background-size:100% 100%;
}
video{border: 10px dashed lightskyblue;margin: 17px;background-size:  cover;background-image: url("图片/6c6eb2c68869953a6a0c6379650c460.jpg");
}
button{background-color: cornflowerblue;color: azure;
}
.top{height:24px;background:gold;

JavaScript

JavaScript是一个脚本语言，能直接在web上运行，用Js来给按钮添加动作。

var video;
var display;
window.onload = function(){video = document.getElementById("videoPlayer");display = document.getElementById("displayStatus");
}
// 定义播放按钮
function play(){video.play();
}
// 定义暂停按钮
function pause() {video.pause();
}
// 定义重新开始按钮
function stop() {video.pause();video.currentTime=0;
}
// 设置进度条
function progressUpdate() {var positionBar = document.getElementById("positionBar");positionBar.style.width = (video.currentTime / video.duration * 100) +"&nbsp";display.innerHTML = (Math.round(video.currentTime *100)/100) + "能量值";
}

效果图展示

下图就是整个的一个效果图，如果你也想尝试，可以复制代码，修改背景图片，和视频位置，就可以达到下面的效果了。

有三个基础播放按钮，分别是播放、暂停、重新开始。

第一次尝试做前端，学的也很浅，做的很是粗糙，不喜勿喷。

推荐一个编写前端的工具 webstorm，有了好的工具才能事半功倍。

类名命名规范

如果以后想要作为一名优秀的前端开发者，在定义类名的时候就不能马虎，这不仅影响后端效率和后期维护，我再分享一下类名命名。

中文	英文
头	heard
内容	content
尾	footer
导航	nav
侧栏	sidebar
栏目	column
左右页	left right center
登录条	loginbar
标志	logo
广告	banner
页面主体	main
热点	hot
新闻	news
下载	download
子导航	subnav
菜单	menu
子菜单	submenu
搜索	search
友情链接	friendlink

这次我的分享就到这里结束了，喜欢的话留下你的赞吧

【html+css+js】用前端做一个视频播放器页面相关推荐

用QT5做一个视频播放器
作为一个菜鸟有空的时候都会做一些QT小项目拿来练练手,今天做的是一个视频播放器,暂时只实现了本地视频的播放,后续会继续完善实现网络播放功能. (1)因为图片都是自己网上随便找的,做的界面有点丑,后续有 ...
python实现视频播放器_对目前的视频播放器不满意？教你用Python做一个视频播放器...
前言本文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,如有问题请及时联系我们以作处理. 以下文章来源于Charles的皮卡丘 ,作者白露未晞me Python爬虫.数据分析.网站开 ...
2020使用html、js、正则表达式做一个前端注册表单信息验证
使用html.js.正则表达式做一个前端注册表单信息验证小小前端练手项目,主要运用正则表达式对用户名.密码.确认密码.电子邮箱.手机号码.生日.身份证号码的验证 1.用户名不正确(需由由英文字母和数 ...
html+css+js适合前端小白的实战全解（超详细）——2048小游戏（三）
续上一小节,我们回到newgame()这个函数,我们之前只做了init()内函数,相当于一个初始化操作现在,我们需要再随机两个两个生成数字. 随机生成数字在这个游戏里会经常出现,用户移动一步,也会产 ...
html+css+js适合前端小白的实战全解（超详细）——2048小游戏（二）
续上一小节,我们可以发现每一个grid-cell上的数字初始时并不在格子里. 这些数字可以随着玩家的操作而移动我们可以想象:初始时每一个格子上的数为0,他们并不显示 ↓ 只有当grid-cell ...
用CSS伪类选择器做一个爱心
用CSS伪类选择器做一个爱心这里我们会用到 position:relative:相对定位 position:absolute;绝对定位 border-radius:圆角属性 transform:变换 ...
FFmpeg开发(四)——Qt实现一个视频播放器(参考了暴风影音、迅雷影音)
FFmpeg开发(四)--Qt实现一个视频播放器(参考了暴风影音.迅雷影音) 本系列文章目录: FFmpeg开发(一)一Qt Creator配置FFmpeg FFmpeg开发(二)--(FFmpeg基 ...
嵌入式Qt 开发一个视频播放器
上篇文章:嵌入式 Qt开发一个音乐播放器,使用Qt制作了一个音乐播放器,并在OK3568开发板上进行了运行测试,实际测试效果还不错. 本篇继续来实现一个Qt视频播放器软件,可以实现视频列表的显示与选择 ...
用Pyqt5写一个视频播放器
用Pyqt5写一个视频播放器编写方式: Qt Designer设计,pyuic5转化为.py文件. 播放器效果: 代码链接:https://github.com/GRF-Sunomikp31/Qt_ ...

【html+css+js】用前端做一个视频播放器页面

介绍

HTML5

CSS3

JavaScript

效果图展示

类名命名规范

【html+css+js】用前端做一个视频播放器页面相关推荐

最新文章

热门文章