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 = https://www.cnblogs.com/snail-boy/p/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 = https://www.cnblogs.com/snail-boy/p/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 = https://www.cnblogs.com/snail-boy/p/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
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/498846.html
標籤：HTML5
上一篇：前端周刊：2022-9 期
下一篇：前端周刊：2022-10 期