原生JS实现视频播放功能

准备工作:

一个视频文件
一份字体图标文件
缓冲加载的GIF图标
效果如图

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>制作视频播放</title><!--引入字体图片--><link rel="stylesheet" href="css/font-awesome.min.css"><style>* {margin: 0;padding: 0;}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: rgba(0,0,0,0.5);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: rgba(255,255,255,0.4);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>
</head>
<body><!--多媒体--><figure><figcaption>制作视频播放</figcaption><div class="player"><!--一般写法--><!--<video src="1.mp4"></video>--><!--兼容写法--><video src="1.mp4"><source src="1.mp4"/><source src="1.ogg"/><source src="1.webm"/>抱歉!您的浏览器不支持视频标签</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><script>//实现步骤:/** 1: 点击按钮播放 实现播放暂停,更改图标* 2: 算出视频的总时间出来* 3: 当视频播放的时候,精度条同步* 4: 设置视频播放器全屏显示* *///获取视频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 = "播放";}}//算出视频的时间显示出来,视频能播放的时候//oncanplay : 当时加载完成后的时间,video.oncanplay = function () {//显示总时长tTime = video.duration;//将总秒数,转换为 时分秒格式 00:00:00var 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;}//当视频播放的时候,进度条同步,当前时间同步,// ontimeupdate : 当时间当前时间更新的时候触发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 () {//全屏的H5写法video.webkitRequestFullScreen();}</script>
</body>
</html>

原生JS实现视频播放功能相关推荐

前端每日实战：163# 视频演示如何用原生 JS 创作一个多选一场景的交互游戏（内含 3 个视频）...
效果预览按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/LXMzRX 可交互视频此视频是可 ...
微信小程序 -- 原生JS集成腾讯IM实时聊天/实时音视频(踩坑及心得)
原生JS集成腾讯IM实时聊天/实时音视频对话功能一.腾讯IM集成前期准备实例创建及初始化 IM登录收发消息二.腾讯音视频实时互动跑通demo 三.同时集成即时通讯IM 和音视频直播的坑 ...
原生JS实现全屏视频背景滚动淡出
给大家分享一个用原生JS实现全屏视频背景滚动淡出,效果如下 : 以下是代码实现,欢迎大家复制粘贴和收藏. <!DOCTYPE html> <html lang="en&qu ...
video视频转成canvas（兼容至IE8+，全原生JS）
video视频转成canvas(兼容至IE8+,全原生JS) <!DOCTYPE html> <html lang="en"> <head>&l ...
vue.js项目实战运用篇之抖音视频APP-第八节：视频播放功能
[温馨提示]:若想了解更多关于本次项目实战内容,可转至vue.js项目实战运用篇之抖音视频APP-项目规划中进一步了解项目规划. [项目地址] 项目采用Git进行管理,最终项目将会发布到GitHub中 ...
react 原生html 插件,纯原生JS的瀑布流插件Macy.js，前端必备插件
这是一款非常轻量级的纯原生JS的瀑布流插件--Macy.js,如今图片和视频网站非常多,非常适应瀑布流这样的布局方式来呈现给用户. 所以,选择一款简单易用的瀑布流js插件,可以让前端工程师快速开发出漂 ...
Java实现视频网站的视频上传、视频转码、视频关键帧抽图, 及视频播放功能
最近有个项目牵扯到上传视频,简直把我搞炸了.还么搞定,主要是当初设计有点小出入,心里一直不是坚持,所以,哎,还得努力撒! 下面是当时参考,睡觉,明天搞哎.http://www.cnblogs.com/ ...
使用原生js将轮播图组件化
代码地址如下: http://www.demodashi.com/demo/11316.html 这是一个轮播图组件,这里是代码地址,需要传入容器的id和图片地址,支持Internet Explo ...
js 控制鼠标_原生js实现改变视频播放速率
前言:前几天考研成绩刚刚出来,有人欢喜有人悲,不管结果怎么样,只要努力过,就不存在遗憾一说.大家都知道考研复习的时候会有大量的时间用来看教学视频,就比如说"张宇高数"等等.考研复习 ...
浏览器通过原生JS实现录音功能
浏览器通过原生JS实现录音功能一. AudioContext介绍二. getUserMedia介绍三. MediaRecorder介绍四. 录音执行流程五. 主要代码简述六. Vue样式 ...

原生JS实现视频播放功能

原生JS实现视频播放功能相关推荐

最新文章

热门文章