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

目录

介绍

HTML5 

CSS3

JavaScript

效果图展示 

---

• 介绍

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

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

• HTML5 

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

    
    
    
    
    





    


    

        
进度条.
    


    播放
    暂停
    重新开始

• 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

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

---