html+css+js用前端做视频播放器页面

武飞扬头像

-李华同学-

2024-01-09 帮助6人

学新通

目录

效果图展示

介绍

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

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

HTML5

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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>播放器</title>
<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

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

学新通

这篇好文章是转载于：学新通技术网

版权申明：本站部分内容来自互联网，仅供学习及演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，请提供相关证据及您的身份证明，我们将在收到邮件后48小时内删除。
本站站名：学新通技术网
本文地址： /boutique/detail/tanhecabkg

系列文章

同类精品