h5视频播放解决方案怎么做（纯原生html编写的h5视频播放器）

时间2025-05-02 12:49:14分类IT科技浏览3727

导读：snail-player-native 一个纯原生代码编写的h5视频播放器, 功能完善，基本满足使用，仅供学习，禁止商用...

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