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

-李华同学-

已于 2023-01-18 19:42:00 修改

阅读量6.4k

点赞数 19

分类专栏：前端文章标签：前端 html5 css3 javascript

于 2022-09-13 22:05:41 首次发布

本文链接：https://blog.csdn.net/weixin_70445937/article/details/126842288

版权

前端专栏收录该内容

2 篇文章 1 订阅

订阅专栏

介绍

学习前端两个星期后学到了很多，知道了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

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

-李华同学-

关注

19
点赞
踩
66

收藏

觉得还不错? 一键收藏
打赏
9
评论
【html+css+js】用前端做一个视频播放器页面

初学前端的可以看一看，能看懂的话证明你前端入门了，如果没有看懂那还需努力。自己学习了两个星期的前端自认为前端不是很难，但是很考验人的设计能力，如果没有很高的审美，也同样做不出优秀的页面。
复制链接

扫一扫