位置: IT常识 - 正文

纯原生html编写的h5视频播放器(将原生html改成vue)

编辑：rootadmin

#snail-player-native 一个纯原生代码编写的h5视频播放器, 功能完善，基本满足使用，仅供学习，禁止商用演示演示加速 Install 1. git clone https://github.com/snail-boy/snail-player-native.git 2. 拷贝l ... snail-player-native一个纯原生代码编写的h5视频播放器, 功能完善，基本满足使用，仅供学习，禁止商用

推荐整理分享纯原生html编写的h5视频播放器(将原生html改成vue)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:html原型,html原生标签,html原生表格,html原型,将原生html改成vue,html原型,原生html开发,原生html组件,内容如对您有帮助，希望把文章链接给更多的朋友！

演示

演示加速

Install1. git clone https://github.com/snail-boy/snail-player-native.git2. 拷贝lib目录下的文件到自己项目里Usage

直接运行index.html

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> #snailPlayId { width: 800px; height: 500px; margin: 0 auto; } h1 { text-align: center; } </style></head><body><h1>snail-player</h1><div id='snailPlayId'></div></body><script type="module"> import SnailPlayer from "./lib/index.js"; new SnailPlayer({ el: '#snailPlayId', src: 'https://webrabbit.oss-cn-beijing.aliyuncs.com/drawingbed/video.mp4', autoplay: true, // 是否自动播放 loop: true // 是否循环播放 })</script></html>Some Codemain.js// 计算进度条时间progressTime(offsetY) { return utils.formatSeconds((offsetY / this.progressw * this.playVideo.duration).toFixed(2))}// 进度条计算公式progressCalculate() { return (this.progressw / this.playVideo.duration * this.playVideo.currentTime).toFixed(2)}// 全屏fullScreenFun() { const docElm = document.documentElement if (!this.isFullScreen) { utils.addClass(this.el, 'fullscreen-active') utils.addClass(this.playVideo, 'fullscreen-active') utils.showClass('snail-player-full-screen-icon') utils.hiddenClass('snail-player-fullscreen-btn') utils.changeInnerText('fullscreen-icon', '退出全屏') utils.addClass(this.playBottom, 'sn-player-fullscreen-bottom-active') setTimeout(() => { if (docElm.requestFullscreen) { docElm.requestFullscreen(); } else if (docElm.mozRequestFullScreen) { docElm.mozRequestFullScreen(); } else if (document.webkitRequestFullScreen) { docElm.webkitRequestFullScreen(); } }, 100) this.isFullScreen = true utils.hiddenClass('snail-player-web-fullscreen-box') } else { if (document.exitFullscreen) { document.exitFullscreen(); } else if (document.mozCancelFullScreen) { document.mozCancelFullScreen(); } else if (document.webkitCancelFullScreen) { document.webkitCancelFullScreen(); } utils.showClass('snail-player-web-fullscreen-box') utils.removeClass(this.el, 'fullscreen-active') utils.removeClass(this.playVideo, 'fullscreen-active') utils.hiddenClass('snail-player-full-screen-icon') utils.showClass('snail-player-fullscreen-btn') utils.changeInnerText('fullscreen-icon', '进入全屏') utils.removeClass(this.playBottom, 'sn-player-fullscreen-bottom-active') this.isFullScreen = false }}index.js//加载cssrenderCss(url) { var head = document.getElementsByTagName('head')[0]; var link = document.createElement('link'); link.type='text/css'; link.rel = 'stylesheet'; link.href = url; head.appendChild(link);}//加载faviconrenderIcon(url) { var head = document.getElementsByTagName('head')[0]; var link = document.createElement('link'); link.type='type="image/x-icon"'; link.rel = 'shortcut icon'; link.href = url; head.appendChild(link);}Utilsclass Utils { hasClass(ele, cls) { return !!ele.className.match(new RegExp('(\s|^)' + cls + '(\s|$)')) } addClass(ele, cls) { if (!this.hasClass(ele, cls)) ele.className += ' ' + cls } removeClass(ele, cls) { if (this.hasClass(ele, cls)) { const reg = new RegExp('(\s|^)' + cls + '(\s|$)') ele.className = ele.className.replace(reg, '') } } set(key, value) { localStorage.setItem(key, value) } get(key) { return localStorage.getItem(key) } showClass(cls) { cls ? document.getElementsByClassName(cls)[0].style.display = 'block' : new Error('请输入类名') } hiddenClass(cls) { cls ? document.getElementsByClassName(cls)[0].style.display = 'none' : new Error('请输入类名') } changeInnerText(cls, text) { document.getElementsByClassName(cls)[0].innerHTML = text } clickfu(to, cls){ //回调函数，to为点击对象 to.setAttribute("class",cls); const siblings = to.parentNode.childNodes; for(let i=0; i<siblings.length; i++) if(siblings[i].nodeType == 1 && siblings[i] != to)siblings[i].className = ''; } formatSeconds(value) { if(!value) return '00:00' value = parseInt(value); let time; if (value > -1) { let hour = Math.floor(value / 3600); let min = Math.floor(value / 60) % 60; let sec = value % 60; let day = parseInt(hour / 24); if (day > 0) { hour = hour - 24 * day; time = day + "day " + hour + ":"; } else if (hour > 0) { time = hour + ":"; }else { time = ""; } if (min < 10) { time += "0"; } time += min + ":"; if (sec < 10) { time += "0"; } time += sec; } return time; } classEle(cls) { return cls && document.getElementsByClassName(cls)[0] }}export default UtilsFunction按空格键暂停播放点击屏幕暂停播放视频进度条拖拽，区分颜色鼠标移动到进度条上方显示时间视频快进慢放视频声音控制画中画整屏播放双击全屏播放等运行环境支持es6的各种浏览器最好用chrome源码地址，欢迎star