前两篇博文我们学习了HTML的表单事件与实现一个鼠标点击时&＃xff0c;tab栏切换的实例
今天我们来实现一个简单的视频播放器
HTML——表单事件
HTML举例-鼠标点击时&＃xff0c;tab栏切换
<html>
<head lang&＃61;"en"><meta charset&＃61;"UTF-8"><title>title><link rel&＃61;"stylesheet" href&＃61;"css/font-awesome.min.css"/><style>*{margin: 0;padding: 0;}figcaption{text-align: center;line-height: 150px;font-family: "Microsoft Yahei";font-size:24px;}.palyer{width: 720px;height: 360px;margin:10px auto;border: 1px solid #000;background: url(images/loading.gif) center no-repeat #000;background-size:auto 100%;position: relative;border-radius: 20px;}.palyer video{height:100%;display: block;margin:0 auto;}.controls{width: 700px;height:40px;background-color: rgba(255, 255, 0, 0.3);position: absolute;bottom:10px;left:10px;border-radius: 10px;}.switch{position: absolute;width: 20px;height: 20px;left:10px;top:10px;text-align: center;line-height: 20px;color:yellow;}.progress{width: 432px;height: 10px;position: absolute;background-color: rgba(255,255,255,0.4);left:40px;top:15px;border-radius: 4px;overflow: hidden;}.curr-progress{width: 50%;height: 10px;background-color: #fff;}.time{width: 120px;height: 20px;text-align: center;line-height: 20px;color:#fff;position: absolute;left:510px;top:10px;font-size:12px;}.extend{position: absolute;width: 20px;height: 20px;right:20px;top:10px;text-align: center;line-height: 20px;color:yellow;}style>
head>
<body><figure><figcaption>视频案例figcaption><div class&＃61;"palyer"><video src&＃61;"video/fun.mp4">video><div class&＃61;"controls"><a href&＃61;"#" class&＃61;"switch icon-play">a><div class&＃61;"progress"><div class&＃61;"curr-progress">div>div><div class&＃61;"time"><span class&＃61;"curr-time">00:00:00span>/<span class&＃61;"total-time">00:00:00span>div><a href&＃61;"#" class&＃61;"extend icon-resize-full">a>div>div>figure><script>var video&＃61;document.querySelector(&＃39;video&＃39;);
var playBtn&＃61;document.querySelector(&＃39;.switch&＃39;);
var currProgress&＃61;document.querySelector(&＃39;.curr-progress&＃39;);
var currTime&＃61;document.querySelector(&＃39;.curr-time&＃39;);
var totalTime&＃61;document.querySelector(&＃39;.total-time&＃39;);
var extend&＃61;document.querySelector(&＃39;.extend&＃39;);var tTime&＃61;0;playBtn.onclick&＃61;function(){
if(video.paused){
video.play();this.classList.remove(&＃39;icon-play&＃39;);this.classList.add(&＃39;icon-pause&＃39;);}else{
video.pause();
this.classList.remove(&＃39;icon-pause&＃39;);this.classList.add(&＃39;icon-play&＃39;);}}
video.oncanplay&＃61;function(){
tTime&＃61;video.duration;console.log(tTime);
var h&＃61;Math.floor(tTime/3600);
var m&＃61;Math.floor(tTime%3600/60);
var s&＃61;Math.floor(tTime%60);
h&＃61;h>&＃61;10?h:"0"&＃43;h;m&＃61;m>&＃61;10?m:"0"&＃43;m;s&＃61;s>&＃61;10?s:"0"&＃43;s;console.log(h);console.log(m);console.log(s);
totalTime.innerHTML&＃61;h&＃43;":"&＃43;m&＃43;":"&＃43;s;}
video.ontimeupdate&＃61;function(){
var cTime&＃61;video.currentTime;
var h&＃61;Math.floor(cTime/3600);
var m&＃61;Math.floor(cTime%3600/60);
var s&＃61;Math.floor(cTime%60);h&＃61;h>&＃61;10?h:"0"&＃43;h;m&＃61;m>&＃61;10?m:"0"&＃43;m;s&＃61;s>&＃61;10?s:"0"&＃43;s;currTime.innerHTML&＃61;h&＃43;":"&＃43;m&＃43;":"&＃43;s;var value&＃61;cTime/tTime;currProgress.style.width&＃61;value*100&＃43;"%";}extend.onclick&＃61;function(){
video.webkitRequestFullScreen();}script>
body>
html>
京公网安备 11010802041100号