应用CSS基础和JavaScript的函数功能，制作一个视频播放器。使用CSS完成相应的布局样式，利用JavaScript函数来监听进度条，然后使用鼠标点击按钮实现对视频的播放。
CSS部分：
<style>
* {
margin: 0;
padding: 0;
}
.body{
height: 100%;
width: 100%;
background-image: url(风景.jpg);
position: fixed;
}
figcaption {
text-align: center;
font-family: "Microsoft YaHei";
font-size: 24px;
font-weight: 700;
line-height: 150px;
}
.player {
width:640px;
height:360px;
margin: 10px auto;
background-color: pink;
background:url("login_on.gif")
top center no-repeat;
background-size: auto 100%;
position: relative;
border-radius: 10px;
overflow: hidden;
}
.player video {
height:100%;
display: block;
margin: 0px auto;
display: block;
}
.controls {
width: 620px;
height:40px;
background-color: black;
position: absolute;
left: 10px;
bottom: 10px;
border-radius: 10px;
}
.switch {
width: 20px;
height: 20px;
position: absolute;
top:10px;
left: 10px;
display: block;
text-align: center;
line-height: 20px;
color: yellow;
}
.progerss {
width: 400px;
height:10px;
position: absolute;
background-color:beige;
left: 40px;
top:15px;
border-radius: 4px;
overflow: hidden;
}
.cur-progress {
width:0%;
height:100%;
background: yellow;
}
.time {
width: 120px;
height: 20px;
text-align: center;
line-height: 20px;
position: absolute;
left: 450px;
top:10px;
font-size: 12px;
color: #fff;
}
.exted {
width: 20px;
height: 20px;
position: absolute;
top:10px;
right: 10px;
text-align: center;
line-height: 20px;
color: yellow;
}
</style>HTML部分：
<body class="body">
<figure>
<figcaption>视频播放</figcaption>
<div class="player">
<video src="商丘古城--夜景.mp4"></video>
<div class="controls">
<a href="#" class="switch icon-play" title="播放"></a>
<div class="progerss">
<div class="cur-progress"></div>
</div>
<div class="time">
<span class="curr-time">00:00:00</span>/
<span class="total-time">00:00:00</span>
</div>
<a href="#" class="exted icon-fullscreen" title="全屏"></a>
</div>
</div>
</figure>
</body>Javascript部分：
<script>
var video = document.querySelector("video")
var playBtn = document.querySelector(".switch");
var crrProgress = document.querySelector(".cur-progress");
var crrTime = document.querySelector(".curr-time");
var totalTime = document.querySelector(".total-time");
var exted = document.querySelector(".exted");
var tTime;
var cTime;
playBtn.onclick = function () {
if(video.paused){
video.play();
this.classList.remove("icon-play");
this.classList.add("icon-pause");
playBtn.title = "暂停";
}else{
video.pause();
this.classList.remove("icon-pause");
this.classList.add("icon-play");
playBtn.title = "播放";
}
}
video.oncanplay = function () {
tTime = video.duration;
var h = Math.floor(tTime / 3600);
var m = Math.floor(tTime % 3600 / 60);
var s = Math.floor(tTime % 60);
h = h >= 10 ? h :"0" + h;
m = m >= 10 ? m :"0" + m;
s = s >= 10 ? s :"0" + s;
totalTime.innerHTML = h + ":" + m + ":" + s;
}
video.ontimeupdate = function () {
cTime = video.currentTime;
var h = Math.floor(cTime / 3600);
var m = Math.floor(cTime % 3600 / 60);
var s = Math.floor(cTime % 60);
h = h >= 10 ? h :"0" + h;
m = m >= 10 ? m :"0" + m;
s = s >= 10 ? s :"0" + s;
crrTime.innerHTML = h + ":" + m + ":" + s;
var value = cTime / tTime;
crrProgress.style.width = value * 100 + "%";
}
exted.onclick = function () {
video.webkitRequestFullScreen();
}
</script>效果图：
JavaScript介绍：
JavaScript（简称“JS”） 是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。虽然它是作为开发Web页面的脚本语言而出名，但是它也被用到了很多非浏览器环境中，JavaScript 基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式、声明式、函数式编程范式。
JavaScript在1995年由Netscape公司的Brendan Eich，在网景导航者浏览器上首次设计实现而成。因为Netscape与Sun合作，Netscape管理层希望它外观看起来像Java，因此取名为JavaScript。但实际上它的语法风格与Self及Scheme较为接近。
JavaScript的标准是ECMAScript 。截至 2012 年，所有浏览器都完整的支持ECMAScript 5.1，旧版本的浏览器至少支持ECMAScript 3 标准。2015年6月17日，ECMA国际组织发布了ECMAScript的第六版，该版本正式名称为 ECMAScript 2015，但通常被称为ECMAScript 6 或者ES2015。
JavaScript脚本语言具有以下特点:
（1）脚本语言。JavaScript是一种解释型的脚本语言，C、C++等语言先编译后执行，而JavaScript是在程序的运行过程中逐行进行解释。
（2）基于对象。JavaScript是一种基于对象的脚本语言，它不仅可以创建对象，也能使用现有的对象。
（3）简单。JavaScript语言中采用的是弱类型的变量类型，对使用的数据类型未做出严格的要求，是基于Java基本语句和控制的脚本语言，其设计简单紧凑。
（4）动态性。JavaScript是一种采用事件驱动的脚本语言，它不需要经过Web服务器就可以对用户的输入做出响应。在访问一个网页时，鼠标在网页中进行鼠标点击或上下移、窗口移动等操作JavaScript都可直接对这些事件给出相应的响应。
（5）跨平台性。JavaScript脚本语言不依赖于操作系统，仅需要浏览器的支持。因此一个JavaScript脚本在编写后可以带到任意机器上使用，前提是机器上的浏览器支 持JavaScript脚本语言，JavaScript已被大多数的浏览器所支持。 不同于服务器端脚本语言，例如PHP与ASP，JavaScript主要被作为客户端脚本语言在用户的浏览器上运行，不需要服务器的支持。所以在早期程序员比较倾向于使用JavaScript以减少对服务器的负担，而与此同时也带来另一个问题，安全性。
发表评论