JavaScript实现视频播放器

最终效果：

思路/步骤：

拿到需要操作的元素

通过事件监听视频是否加载完毕

隐藏加载的动画
显示视频
获取视频的总时长
格式化获取到的时间

监听播放按钮的点击

判断当前是否处于播放/暂停状态
切换对应的图标

监听视频播放的进度

同步文本时间
同步进度条

监听进度条的点击事件

获取鼠标当前点击的位置

监听视频是否已经播放完毕

恢复播放时间
恢复图标
恢复时间
恢复进度条
恢复标记

监听全屏按钮的点击

源码：

* {margin: 0;padding: 0;
}a {color: #000;text-decoration: none;font-size: 25px !important;
}figure {width: 800px;height: 500px;border: 1px solid #000;margin: 100px auto;position: relative;background: #24bbfe url("./../images/loading.gif") no-repeat center center;
}figcaption {font-size: 30px;text-align: center;
}video {display: none;width: 800px;
}.control {width: 100%;height: 50px;background: rgba(0, 255, 0, .5);position: absolute;left: 0;bottom: 10px;
}.control>#play {position: absolute;left: 40px;top: 50%;transform: translateY(-50%);
}.control>.progress {width: 60%;height: 30px;background: #ccc;position: absolute;left: 80px;top: 50%;transform: translateY(-50%);border-radius: 15px;overflow: hidden;
}.control>.progress>.line {width: 0px;height: 100%;background: #fff;
}.control>.time {position: absolute;left: 580px;top: 50%;transform: translateY(-50%);
}.control>#full {position: absolute;right: 40px;top: 50%;transform: translateY(-50%);
}

<link rel="stylesheet" href="fonts/iconfont.css">
<link rel="stylesheet" href="css/index.css">
<script src="js/index.js"></script>

    <figure><figcaption>视频播放器</figcaption><video src="data:images/cjk.mp4"></video><div class="control"><a href="#" id="play" class="iconfont icon-bofang"></a><div class="progress"><div class="line"></div></div><div class="time"><span class="current-time">00:00:00</span> /<span class="total-time">00:00:00</span></div><a href="#" id="full" class="iconfont icon-fangda"></a></div></figure>

window.onload = function() {//1.拿到需要操作的元素let oVideo = document.querySelector("video");let oFigure = document.querySelector("figure");let oTotalTime = document.querySelector(".total-time");let oCurrentTime = document.querySelector(".current-time");let oPlay = document.querySelector("#play");let oProgress = document.querySelector(".progress");let oLine = document.querySelector(".line");let oFull = document.querySelector("#full");//2.通过事件监听视频是否加载完毕oVideo.oncanplay = function() {//2.1隐藏加载的动画oFigure.style.backgroundImage = "none";//2.2显示视频oVideo.style.display = "block";//2.3获取视频的总时长// console.log(oVideo.duration);//2.4格式化获取到的时间let obj = formartTime(oVideo.duration);oTotalTime.innerHTML = `${obj.hour}:${obj.minute}:${obj.second}`;// console.log(obj);};//3.监听播放按钮的点击let flag = false;oPlay.onclick = function() {//切换图标if (flag) {flag = false;//正在播放oPlay.className = "iconfont icon-bofang";//切换图标// 暂停播放oVideo.pause();} else {flag = true;// 没有播放oPlay.className = "iconfont icon-zanting";//切换图标// 播放播放oVideo.play();}};//4.监听视频播放的进度oVideo.ontimeupdate = function() {//4.1同步文本时间let obj = formartTime(oVideo.currentTime);oCurrentTime.innerHTML = `${obj.hour}:${obj.minute}:${obj.second}`;//4.2同步进度条let res = oVideo.currentTime / oVideo.duration * 100;oLine.style.width = res + '%';};//5.监听进度条的点击事件oProgress.onclick = function(e) {e = e || window.e;//鼠标点击的位置/进度条的宽度=当前播放的时间/总时长//5.1获取鼠标当前点击的位置let currentTime = e.offsetX / oProgress.offsetWidth * oVideo.duration;// console.log(current);oVideo.currentTime = currentTime;};//6.监听视频是否已经播放完毕oVideo.onended = function() {//6.0恢复播放时间oVideo.currentTime = 0;//6.1恢复图标oPlay.className = "iconfont icon-bofang";//6.2恢复时间oCurrentTime.innerHTML = "00:00:00";//6.3恢复进度条oLine.style.width = "0%";//6.4恢复标记flag = false;};//7.监听全屏按钮的点击oFull.onclick = function() {// oVideo.requestFullscreen();toFullVideo(oVideo);};
};//视频全屏兼容性解决
function toFullVideo(videoDom) {if (videoDom.requestFullscreen) {return videoDom.requestFullscreen();} else if (videoDom.webkitRequestFullScreen) {return videoDom.webkitRequestFullScreen();} else if (videoDom.mozRequestFullScreen) {return videoDom.mozRequestFullScreen();} else {return videoDom.msRequestFullscreen();}}//格式化时间
function formartTime(time) {// 1.利用相差的总秒数 / 小时 % 24;let hour = Math.floor(time / (60 * 60) % 24);hour = hour >= 10 ? hour : "0" + hour;// 2.利用相差的总秒数 / 分钟 % 60;let minute = Math.floor(time / 60 % 60);minute = minute >= 10 ? minute : "0" + minute;// 3.利用相差的总秒数 % 秒数let second = Math.floor(time % 60);second = second >= 10 ? second : "0" + second;return {hour: hour,minute: minute,second: second,}
}

JavaScript实现视频播放器相关推荐

7款Flash和Javascript网页视频播放器
Flash和javascript网页视频播放器.梦想中的视频播放器是这样的: 支持所有格式,兼容所有主流视频网站,支持播放列表.视频缩略图.全屏播放.画面调节.预加载.体积贼小,功能贼多--. 也许你 ...
Flash和Javascript网页视频播放器
7款Flash和Javascript网页视频播放器(转载) 2011-01-22 20:26:27| 分类: 英语学习|字号订阅我用有道阅读看到这篇好文,希望和大家分享.我的看法是: 以下原文转 ...
Javascript 控制 Flash FLV视频播放器 --国外开源
制作一个简单的FLV播放器很简单 , 做功能强大的就心有余而力不足了 . 经过google ,找到了一款开源的视频播放器JW_FLV_Player, 也可以当MP3播放器 . javascritp可 ...
使用 JavaScript 控制 HTML5 视频播放器
转载地址:https://msdn.microsoft.com/zh-cn/library/hh924823(v=vs.85).aspx HTML5 video 对象提供可以用于通过 JavaScri ...
web player html5源码,基于Flowplayer打造一款免费的WEB视频播放器附源码
Flowplayer 是一个开源(GPL 3的)WEB视频播放器.您可以将该播放器嵌入您的网页中,如果您是开发人员,您还可以自由定制和配置播放器相关参数以达到您要的播放效果.本文主要介绍Flowpla ...
python开发网页视频播放器_HTML5 VideoAPI，打造自己的Web视频播放器
本文将使用HTML5提供的VideoAPI做一个自定义的视频播放器,需要用到HTML5提供的video标签.以及HTML5提供的对JavascriptAPI的扩展. 一.基础知识 1.用法注意:au ...
介绍当前流行的一些开源Flash视频播放器
栏目导航 Java开源 OPEN文档 OPEN搜索 OPEN家园 OPEN资讯提交开源项目 A Accordion AutoComplete Animation C Calendar Charts ...
一个兼容IE7\IE8,H5的多功能视频播放器,H5视频播放器兼容Flash视频播放器
这里记录一个视频播放器,免费可适当修改:名称:ckplayer视频播放器(免费) 官网地址:http://www.ckplayer.com/ 下载地址:http://www.ckplayer.com/ ...
html5直播api,HTML5 VideoAPI，打造自己的Web视频播放器
本文将使用HTML5提供的VideoAPI做一个自定义的视频播放器,需要用到HTML5提供的video标签.以及HTML5提供的对JavascriptAPI的扩展. 一.基础知识 1.用法注意:au ...
flv f4v mp4 视频播放器代码
flv f4v mp4 视频播放器代码 ckplayer是一款在网页上播放视频的免费的播放器,功能强大,体积小巧,跨平台,使用起来随心所欲. 播放器主要以adobe的flash(所使用的版本是CS5) ...

JavaScript实现视频播放器

最终效果：

思路/步骤：

源码：

JavaScript实现视频播放器相关推荐

最新文章

热门文章