纯纯粹粹

  • 纯纯粹粹已关闭评论
  • 28 次浏览
  • A+
所属分类:.NET技术
摘要

9090# snail-player-native演示演示加速直接运行index.htmlgithub地址gitee地址Issues底部

9090# snail-player-native

  • 一个纯原生代码编写的h5视频播放器, 功能完善,基本满足使用,仅供学习,禁止商用

演示

演示加速

Install

 1. git clone https://github.com/snail-boy/snail-player-native.git 2. 拷贝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 Code

main.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

//加载css renderCss(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); }  //加载favicon renderIcon(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); } 

Utils

 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 

Function

  • 按空格键暂停播放
  • 点击屏幕暂停播放
  • 视频进度条拖拽,区分颜色
  • 鼠标移动到进度条上方显示时间
  • 视频快进慢放
  • 视频声音控制
  • 画中画
  • 整屏播放
  • 双击全屏播放

运行环境

支持es6的各种浏览器 最好用chrome 

源码地址,欢迎star

github地址

gitee地址

欢迎留言issues

Issues

底部