1. git clone https://github.com/snail-boy/snail-player-native.git2. 拷贝lib目录下的文件到自己项目里直接运行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>// 计算进度条时间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 }}//加载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);}class 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 Utils支持es6的各种浏览器最好用chrome原文出处:纯原生html编写的h5视频播放器
群主管理都是支付大佬
