htmlcssjs用前端做一个视频播放器页面
目录
【html+css+js】用前端做一个视频播放器页面
目录
介绍
学习前端两个星期后学到了很多，知道了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) +" ";
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 |
这次我的分享就到这里结束了，喜欢的话留下你的赞吧
