补充主题静态资源与归档模板
This commit is contained in:
kate522 committed
1 parent
1268a55dd0
commit
3247db7ed1
265 files changed
+59174
No files matched your search
@@ -0,0 +1,263 @@
|
||||
/**
|
||||
* AKSRT Video Player
|
||||
*
|
||||
* Lightweight HTML5 video player wrapper with support for:
|
||||
* - Standard MP4/WebM playback
|
||||
* - HLS streaming (lazy-loaded)
|
||||
* - FLV streaming (lazy-loaded)
|
||||
* - Auto-quality selection
|
||||
* - Keyboard shortcuts
|
||||
*
|
||||
* Usage:
|
||||
* <div class="aksrt-video" data-aksrt-video data-src="video.mp4" data-poster="thumb.jpg"></div>
|
||||
* <div class="aksrt-video" data-aksrt-video data-src="stream.m3u8" data-type="hls"></div>
|
||||
*
|
||||
* @package AKSRT
|
||||
*/
|
||||
|
||||
(function () {
|
||||
'use strict';
|
||||
|
||||
var STYLE_ID = 'aksrt-video-player-style';
|
||||
var HLS_SRC = 'https://cdn.jsdelivr.net/npm/hls.js@1/dist/hls.min.js';
|
||||
var FLV_SRC = 'https://cdn.jsdelivr.net/npm/flv.js@1/dist/flv.min.js';
|
||||
|
||||
function injectStyle() {
|
||||
if (document.getElementById(STYLE_ID)) return;
|
||||
var style = document.createElement('style');
|
||||
style.id = STYLE_ID;
|
||||
style.textContent =
|
||||
'.aksrt-video{position:relative;background:#000;border-radius:12px;overflow:hidden;cursor:pointer;}' +
|
||||
'.aksrt-video video{display:block;width:100%;height:auto;max-height:70vh;}' +
|
||||
'.aksrt-video__overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,0.3);transition:opacity 0.3s;pointer-events:none;}' +
|
||||
'.aksrt-video.is-playing .aksrt-video__overlay{opacity:0;}' +
|
||||
'.aksrt-video__play{width:60px;height:60px;border-radius:50%;background:rgba(255,255,255,0.9);display:flex;align-items:center;justify-content:center;font-size:24px;color:#1a1a2e;box-shadow:0 4px 20px rgba(0,0,0,0.3);transition:transform 0.2s;}' +
|
||||
'.aksrt-video:hover .aksrt-video__play{transform:scale(1.1);}' +
|
||||
'.aksrt-video__badge{position:absolute;top:8px;right:8px;background:rgba(0,0,0,0.6);color:#fff;font-size:11px;padding:2px 8px;border-radius:4px;backdrop-filter:blur(4px);}' +
|
||||
'.aksrt-video.is-playing .aksrt-video__badge{display:none;}';
|
||||
document.head.appendChild(style);
|
||||
}
|
||||
|
||||
function detectType(src) {
|
||||
if (!src) return 'mp4';
|
||||
if (/\.m3u8(\?|$)/i.test(src)) return 'hls';
|
||||
if (/\.flv(\?|$)/i.test(src)) return 'flv';
|
||||
return 'mp4';
|
||||
}
|
||||
|
||||
function loadScript(src) {
|
||||
return new Promise(function (resolve, reject) {
|
||||
var script = document.createElement('script');
|
||||
script.src = src;
|
||||
script.onload = resolve;
|
||||
script.onerror = reject;
|
||||
document.head.appendChild(script);
|
||||
});
|
||||
}
|
||||
|
||||
function AksrtVideoPlayer(element) {
|
||||
this.el = typeof element === 'string' ? document.querySelector(element) : element;
|
||||
if (!this.el || this.el.dataset.aksrtVideoBound) return;
|
||||
this.el.dataset.aksrtVideoBound = '1';
|
||||
this.el._aksrtPlayer = this;
|
||||
|
||||
this.src = this.el.dataset.src || '';
|
||||
this.poster = this.el.dataset.poster || '';
|
||||
this.type = this.el.dataset.type || detectType(this.src);
|
||||
this.autoplay = this.el.dataset.autoplay === 'true';
|
||||
this.init();
|
||||
}
|
||||
|
||||
AksrtVideoPlayer.prototype.init = function () {
|
||||
var self = this;
|
||||
|
||||
// Create video element
|
||||
this.video = document.createElement('video');
|
||||
this.video.controls = true;
|
||||
this.video.playsInline = true;
|
||||
this.video.preload = this.autoplay ? 'auto' : 'metadata';
|
||||
if (this.poster) this.video.poster = this.poster;
|
||||
this.video.style.cssText = 'display:block;width:100%;height:auto;max-height:70vh;';
|
||||
|
||||
// Play overlay
|
||||
this.overlay = document.createElement('div');
|
||||
this.overlay.className = 'aksrt-video__overlay';
|
||||
this.overlay.innerHTML = '<div class="aksrt-video__play"><i class="fas fa-play" style="margin-left:3px;"></i></div>';
|
||||
|
||||
// Badge
|
||||
if (this.type === 'hls') {
|
||||
var badge = document.createElement('div');
|
||||
badge.className = 'aksrt-video__badge';
|
||||
badge.textContent = 'HLS';
|
||||
this.el.appendChild(badge);
|
||||
}
|
||||
|
||||
this.el.appendChild(this.video);
|
||||
this.el.appendChild(this.overlay);
|
||||
|
||||
// Events
|
||||
this.el.addEventListener('click', function (e) {
|
||||
if (e.target.closest('video') && self.video.controls) return;
|
||||
self.toggle();
|
||||
});
|
||||
|
||||
this.video.addEventListener('play', function () {
|
||||
self.el.classList.add('is-playing');
|
||||
});
|
||||
|
||||
this.video.addEventListener('pause', function () {
|
||||
self.el.classList.remove('is-playing');
|
||||
});
|
||||
|
||||
this.video.addEventListener('ended', function () {
|
||||
self.el.classList.remove('is-playing');
|
||||
});
|
||||
|
||||
// Keyboard shortcuts
|
||||
this.video.addEventListener('keydown', function (e) {
|
||||
switch (e.key) {
|
||||
case ' ': e.preventDefault(); self.toggle(); break;
|
||||
case 'ArrowLeft': self.video.currentTime -= 5; break;
|
||||
case 'ArrowRight': self.video.currentTime += 5; break;
|
||||
case 'f': self.toggleFullscreen(); break;
|
||||
case 'm': self.video.muted = !self.video.muted; break;
|
||||
}
|
||||
});
|
||||
|
||||
// Load source
|
||||
this.loadSource();
|
||||
};
|
||||
|
||||
AksrtVideoPlayer.prototype.loadSource = function () {
|
||||
var self = this;
|
||||
|
||||
if (this.type === 'hls') {
|
||||
if (window.Hls && Hls.isSupported()) {
|
||||
this.hls = new Hls();
|
||||
this.hls.loadSource(this.src);
|
||||
this.hls.attachMedia(this.video);
|
||||
} else if (this.video.canPlayType('application/vnd.apple.mpegurl')) {
|
||||
// Safari native HLS
|
||||
this.video.src = this.src;
|
||||
} else {
|
||||
// Load hls.js dynamically
|
||||
loadScript(HLS_SRC).then(function () {
|
||||
if (window.Hls && Hls.isSupported()) {
|
||||
self.hls = new Hls();
|
||||
self.hls.loadSource(self.src);
|
||||
self.hls.attachMedia(self.video);
|
||||
}
|
||||
});
|
||||
}
|
||||
} else if (this.type === 'flv') {
|
||||
loadScript(FLV_SRC).then(function () {
|
||||
if (window.flvjs && flvjs.isSupported()) {
|
||||
self.flvPlayer = flvjs.createPlayer({ type: 'flv', url: self.src });
|
||||
self.flvPlayer.attachMediaElement(self.video);
|
||||
self.flvPlayer.load();
|
||||
}
|
||||
});
|
||||
} else {
|
||||
this.video.src = this.src;
|
||||
}
|
||||
|
||||
if (this.autoplay) {
|
||||
this.video.play().catch(function () { /* autoplay blocked */ });
|
||||
}
|
||||
};
|
||||
|
||||
AksrtVideoPlayer.prototype.toggle = function () {
|
||||
if (this.video.paused) {
|
||||
this.video.play();
|
||||
} else {
|
||||
this.video.pause();
|
||||
}
|
||||
};
|
||||
|
||||
AksrtVideoPlayer.prototype.toggleFullscreen = function () {
|
||||
if (document.fullscreenElement) {
|
||||
document.exitFullscreen();
|
||||
} else if (this.el.requestFullscreen) {
|
||||
this.el.requestFullscreen();
|
||||
}
|
||||
};
|
||||
|
||||
AksrtVideoPlayer.prototype.destroy = function () {
|
||||
if (this.hls) { this.hls.destroy(); this.hls = null; }
|
||||
if (this.flvPlayer) { this.flvPlayer.destroy(); this.flvPlayer = null; }
|
||||
this.video.src = '';
|
||||
this.el.innerHTML = '';
|
||||
delete this.el.dataset.aksrtVideoBound;
|
||||
};
|
||||
|
||||
/**
|
||||
* 切换视频源（剧集切换）
|
||||
* @param {string} src - 新视频地址
|
||||
* @param {string} [type] - 可选类型 (mp4/hls/flv)
|
||||
* @param {string} [poster] - 可选封面
|
||||
*/
|
||||
AksrtVideoPlayer.prototype.switchSource = function (src, type, poster) {
|
||||
if (!src) return;
|
||||
|
||||
// 清理旧播放器
|
||||
if (this.hls) { this.hls.destroy(); this.hls = null; }
|
||||
if (this.flvPlayer) { this.flvPlayer.destroy(); this.flvPlayer = null; }
|
||||
|
||||
this.src = src;
|
||||
this.type = type || detectType(src);
|
||||
if (poster) {
|
||||
this.poster = poster;
|
||||
this.video.poster = poster;
|
||||
}
|
||||
|
||||
this.video.src = '';
|
||||
this.loadSource();
|
||||
};
|
||||
|
||||
// ── 剧集切换按钮事件委托 ──
|
||||
document.addEventListener('click', function (e) {
|
||||
var switchBtn = e.target.closest('.switch-video, .switch-iframe');
|
||||
if (!switchBtn) return;
|
||||
|
||||
var container = switchBtn.closest('.aksrt-video') || switchBtn.closest('[data-aksrt-video]');
|
||||
if (!container) return;
|
||||
|
||||
var src = switchBtn.dataset.src || switchBtn.getAttribute('href');
|
||||
if (!src) return;
|
||||
|
||||
e.preventDefault();
|
||||
|
||||
// 检查是否已有播放器实例
|
||||
if (container._aksrtPlayer) {
|
||||
container._aksrtPlayer.switchSource(src, switchBtn.dataset.type);
|
||||
} else {
|
||||
container.dataset.src = src;
|
||||
if (switchBtn.dataset.type) container.dataset.type = switchBtn.dataset.type;
|
||||
new AksrtVideoPlayer(container);
|
||||
}
|
||||
|
||||
// 高亮当前集
|
||||
var siblings = container.parentElement ? container.parentElement.querySelectorAll('.switch-video, .switch-iframe') : [];
|
||||
siblings.forEach(function (btn) { btn.classList.remove('is-active'); });
|
||||
switchBtn.classList.add('is-active');
|
||||
});
|
||||
|
||||
// ── Public API ──
|
||||
|
||||
window.AksrtVideoPlayer = AksrtVideoPlayer;
|
||||
|
||||
// ── Auto-init ──
|
||||
|
||||
function init() {
|
||||
injectStyle();
|
||||
document.querySelectorAll('[data-aksrt-video]').forEach(function (el) {
|
||||
new AksrtVideoPlayer(el);
|
||||
});
|
||||
}
|
||||
|
||||
if (document.readyState === 'loading') {
|
||||
document.addEventListener('DOMContentLoaded', init);
|
||||
} else {
|
||||
init();
|
||||
}
|
||||
})();
|
||||
Reference in new issue
Block a user