Javascript实现视频文件播放功能

应用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实现视频文件播放功能相关推荐

android webview 本地视频播放,javascript – Android WebView不允许加载本地视频文件
我有一个带有WebView的应用程序,显示一个HTML文件.在HTML文件中,有一个按钮,用于请求用户录制视频,或从文档文件夹中选择视频. 在选择(或录制)视频时,它会将带有链接(由Uri编码)的ja ...
如何使用客户端 JavaScript 将视频剪辑转换为 GIF 文件
前端Q 我是winty,专注分享前端知识和各类前端资源,乐于分享各种有趣的事,关注我,一起做个有趣的人- 公众号点击上方前端Q,关注公众号回复加群,加入前端Q技术交流群英文 | https:/ ...
JavaScript（js）加密解密视频文件
加密文件: 1.注意crypto的方法,createCipheriv中的参数algorithm必须为"aes-128-cbc" 2.encryptStream.setAutoPad ...
【转】 asp.net从视频文件中抓取一桢并生成图像文件的方法实现多语言本地化应用程序自动返回上次请求页面...
asp.net从视频文件中抓取一桢并生成图像文件的方法 http://www.bianceng.cn/webkf/aspx/201012/21428.htm WebUIValidation.js ht ...
javascript入门视频第一天小案例制作零基础开始学习javascript
JavaScript 是我们网页设计师必备的技能之一.我们主要用javascript来写的是网页特效.我们从零基础开始学习javascript入门. 但是,好的同学刚开始不知道怎么学习,接触js,因此 ...
浏览器-点击预览视频文件（自动播放、循环播放）
点击预览按钮,弹出窗口自动播放视频文件,并伴有遮罩层从网上自行下载jquery-1.11.2.min.js(版本自己选择)和flvplayer.swf文件.需要注意的是网上一般有两个版本的flvpl ...
Python 如何将视频文件的语音转换为文字，良心之作！
如何将视频文件的语音转换为文字,这里先大致介绍一下本文会用到的知识点: python3. moviepy.multipart/form-data请求.requests_toolbelt.md5. 1. ...
轻松玩转Python：打开文件夹，搜索视频文件，实现简单视频播放器
目录 1.功能描述: 2.具体实现: 3.代码实现: 4.执行效果: 1.功能描述: 这段代码实现了一个简单的视频播放器,可以打开指定的文件夹并搜索其中的视频文件,将搜索结果展示在列表框中,用户可以选 ...
JavaScript检测视频的编码格式是否为h264
JavaScript检测视频的编码格式是否为h264 更多前端信息可以关注博客:http://www.colbrus.com 之前在网 ...
tp5.1 乐视云上传视频文件(https请求http乐视云上传接口)http网址下上传视频(https API接口)
一.sdk_php_v2.0.zip 上传视频网址:http://www.lecloud.com/zh-cn/help/api.html tp5.1 乐视云上传视频文件(https请求http乐视云 ...

Javascript实现视频文件播放功能

Javascript实现视频文件播放功能相关推荐

最新文章

热门文章