应用CSS基础和JavaScript的函数功能，制作一个视频播放器。使用CSS完成相应的布局样式，利用JavaScript函数来监听进度条，然后使用鼠标点击按钮实现对视频的播放。
CSS部分：
1. <style> 2. * { 3. margin: 0; 4. padding: 0; 5. } 6. .body{ 7. height: 100%; 8. width: 100%; 9. background-image: url(风景.jpg); 10. position: fixed; 11. } 12. figcaption { 13. text-align: center; 14. font-family: "Microsoft YaHei"; 15. font-size: 24px; 16. font-weight: 700; 17. line-height: 150px; 18. } 19. .player { 20. width:640px; 21. height:360px; 22. margin: 10px auto; 23. background-color: pink; 24. background:url("login_on.gif") 25. top center no-repeat; 26. background-size: auto 100%; 27. position: relative; 28. border-radius: 10px; 29. overflow: hidden; 30. } 31. .player video { 32. height:100%; 33. display: block; 34. margin: 0px auto; 35. display: block; 36. } 37. .controls { 38. width: 620px; 39. height:40px; 40. background-color: black; 41. position: absolute; 42. left: 10px; 43. bottom: 10px; 44. border-radius: 10px; 45. } 46. .switch { 47. width: 20px; 48. height: 20px; 49. position: absolute; 50. top:10px; 51. left: 10px; 52. display: block; 53. text-align: center; 54. line-height: 20px; 55. color: yellow; 56. } 57. .progerss { 58. width: 400px; 59. height:10px; 60. position: absolute; 61. background-color:beige; 62. left: 40px; 63. top:15px; 64. border-radius: 4px; 65. overflow: hidden; 66. } 67. .cur-progress { 68. width:0%; 69. height:100%; 70. background: yellow; 71. } 72. .time { 73. width: 120px; 74. height: 20px; 75. text-align: center; 76. line-height: 20px; 77. position: absolute; 78. left: 450px; 79. top:10px; 80. font-size: 12px; 81. color: #fff; 82. } 83. .exted { 84. width: 20px; 85. height: 20px; 86. position: absolute; 87. top:10px; 88. right: 10px; 89. text-align: center; 90. line-height: 20px; 91. color: yellow; 92. } 93. </style>
HTML部分：
1. <body class="body"> 2. <figure> 3. <figcaption>视频播放</figcaption> 4. <div class="player"> 5. <video src="商丘古城--夜景.mp4"></video> 6. <div class="controls"> 7. <a href="#" class="switch icon-play" title="播放"></a> 8. <div class="progerss"> 9. <div class="cur-progress"></div> 10. </div> 11. <div class="time"> 12. <span class="curr-time">00:00:00</span>/ 13. <span class="total-time">00:00:00</span> 14. </div> 15. <a href="#" class="exted icon-fullscreen" title="全屏"></a> 16. </div> 17. </div> 18. </figure> 19. </body>
Javascript部分：
1. <script> 2. var video = document.querySelector("video") 3. var playBtn = document.querySelector(".switch"); 4. var crrProgress = document.querySelector(".cur-progress"); 5. var crrTime = document.querySelector(".curr-time"); 6. var totalTime = document.querySelector(".total-time"); 7. var exted = document.querySelector(".exted"); 8. var tTime; 9. var cTime; 10. playBtn.onclick = function () { 11. if(video.paused){ 12. video.play(); 13. this.classList.remove("icon-play"); 14. this.classList.add("icon-pause"); 15. playBtn.title = "暂停"; 16. }else{ 17. video.pause(); 18. this.classList.remove("icon-pause"); 19. this.classList.add("icon-play"); 20. playBtn.title = "播放"; 21. } 22. } 23. video.oncanplay = function () { 24. tTime = video.duration; 25. var h = Math.floor(tTime / 3600); 26. var m = Math.floor(tTime % 3600 / 60); 27. var s = Math.floor(tTime % 60); 28. h = h >= 10 ? h :"0" + h; 29. m = m >= 10 ? m :"0" + m; 30. s = s >= 10 ? s :"0" + s; 31. totalTime.innerHTML = h + ":" + m + ":" + s; 32. } 33. video.ontimeupdate = function () { 34. cTime = video.currentTime; 35. var h = Math.floor(cTime / 3600); 36. var m = Math.floor(cTime % 3600 / 60); 37. var s = Math.floor(cTime % 60); 38. h = h >= 10 ? h :"0" + h; 39. m = m >= 10 ? m :"0" + m; 40. s = s >= 10 ? s :"0" + s; 41. crrTime.innerHTML = h + ":" + m + ":" + s; 42. var value = cTime / tTime; 43. crrProgress.style.width = value * 100 + "%"; 44. } 45. exted.onclick = function () { 46. video.webkitRequestFullScreen(); 47. } 48. </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以减少对服务器的负担，而与此同时也带来另一个问题，安全性。
