transition: 0.7s;
}
.outerNode .controlsNode .fullNode:hover{
background: url(images/full_hover_bg.png) no-repeat;
}
</style>
</head>
<body>
<!-- 最外层的元素 -->
<div class='outerNode'>
<!-- video元素 -->
<video class='videoNode' src='data/imooc.mp4' poster="data/poster.jpg"></video>
<!-- 控制器的元素 -->
<div class='controlsNode'>
<!-- 控制播放暂停的按钮 -->
<div class='playNode'></div>
<!-- video的进度条 -->
<div class='loadNode'>
<div class='loadLeft'></div>
<div class='loadRight'></div>
<!-- 拖动进度条的按钮 -->
<div class='crlNode'></div>
<!-- 真正的进度条 -->
<div class='lineNode'>
<div class='lineRight'></div>
</div>
</div>
<!-- 时间的元素 -->
<div class='timeNode'>
<span class='now'>00:00</span>
<span> - </span>
<span class='all'>4:30</span>
</div>
<!-- 声音的标志 -->
<div class='volumeNode'></div>
<!-- 声音的条 -->
<div class='volumeLine'>
<div class='v_left'></div>
<div class='v_right'></div>
<div class='v_DragNode'></div>
</div>
<!-- 全屏的按钮 -->
<div class='fullNode'></div>
</div>
</div>
<script type="text/javascript">
//播放暂停的控制
//PlayNode 播放器按钮
//VideoNode 播放器
//PlayBln 控制暂停播放的布尔值
//FullNode 全屏按钮
//nowNode 当前时间
//allNode 视频的全部时间
//LineNode 当前的进度条
//CrlNode 进度条按钮
//LoadNode 进度条外面的元素
var PlayNode = document.getElementsByClassName('playNode')[0],
VideoNode = document.getElementsByClassName('videoNode')[0],
FullNode = document.querySelector('.fullNode'),
nowNode = document.querySelector('.now'),
allNode = document.querySelector('.all'),
LineNode = document.querySelector('.lineNode'),
CrlNode = document.querySelector('.crlNode'),
LoadNode = document.querySelector('.loadNode'),
VDragNode = document.querySelector('.v_DragNode'),
PlayBln = true;
//播放、暂停的事件
PlayNode.onclick = function(){
//传统的通过布尔值去改变classname的方法
PlayBln = !PlayBln;
if(PlayBln == false){
this.className = 'pauseNode';
VideoNode.play();
}
else{
this.className = 'playNode';
VideoNode.pause();
}
};
//全屏按钮的事件
FullNode.onclick = function(){
if(VideoNode.webkitRequestFullscreen){
VideoNode.webkitRequestFullscreen();
}
else if(VideoNode.mozRequestFullScreen){
VideoNode.mozRequestFullScreen();
