今天，我将带你深入剖析一个强大而现代的Web视频播放器项目。在当今的Web开发中，处理各种视频格式和协议可能是一项挑战。从标准的 MP4 文件，到 HLS (m3u8) 直播，再到低延迟的 HTTP-FLV 或 WebSocket 直播流，开发者通常需要集成多个不同的播放器库。
本项目——智能混合视频播放器，旨在解决这一痛点。它能够智能地分析媒体源 URL，并自动选择最合适的播放引擎，所有这一切都封装在一个优雅、
你好，我是编码助手。今天，我将带你深入剖析一个强大而现代的Web视频播放器项目。在当今的Web开发中，处理各种视频格式和协议可能是一项挑战。从标准的 MP4 文件，到 HLS (m3u8) 直播，再到低延迟的 HTTP-FLV 或 WebSocket 直播流，开发者通常需要集成多个不同的播放器库。
本项目——智能混合视频播放器，旨在解决这一痛点。它能够智能地分析媒体源 URL，并自动选择最合适的播放引擎，所有这一切都封装在一个优雅、响应式的用户界面中。
核心理念与架构
这个播放器的核心设计思想是“智能调度”和“混合引擎”。
-
混合引擎 (Hybrid Engine): 我们没有试图用一个库解决所有问题，而是集成了业界优秀的开源库：
- Video.js: 一个极其稳定和可扩展的播放器框架，非常适合处理标准的
MP4和HLS (m3u8)视频。 - flv.js: Bilibili 开源的强大库，它能将
FLV流通过HTTP或WebSocket传输，并实时转码为浏览器原生支持的格式，是实现低延迟直播的利器。 - 原生 MSE (Media Source Extensions): 对于更高级的流格式，如
fMP4overWebSocket，我们直接利用浏览器底层的MSE API。这为我们提供了最大的灵活性和性能。
智能调度 (Intelligent Dispatching): 这是播放器的“大脑”。每当用户加载一个新的视频 URL 时，JavaScript 逻辑会：
- 解析 URL: 判断其协议（
http,ws）和文件扩展名（.mp4,.m3u8,.flv）。 - 选择引擎: 根据解析结果，决定使用
Video.js,flv.js还是原生MSE。 - 清理与初始化: 在加载新视频前，它会优雅地销毁旧的播放器实例，避免内存泄漏和冲突，然后初始化新的引擎。
1.完整demo代码地址： https://github.com/fan1621325937/flv-mp4-mu38-test-demo
2.复制下面代码后下载对应插件也可以运行：
video文件地址：https://github.com/videojs/video.js/releases/tag/v8.21.1
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>智能混合视频播放器</title>
<link
href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap"
rel="stylesheet"
/>
<link
href="https://vjs.zencdn.net/8.10.0/video-js.min.css"
rel="stylesheet"
/>
<style>
:root {
--primary-glow: rgba(59, 130, 246, 0.5);
--success-glow: rgba(34, 197, 94, 0.6);
--danger-glow: rgba(239, 68, 68, 0.6);
--info-glow: rgba(56, 189, 248, 0.6);
--primary-color: #3b82f6;
--success-color: #22c55e;
--danger-color: #ef4444;
--info-color: #38bdf8;
--bg-start: #111827;
--bg-end: #1f2937;
--card-bg: rgba(31, 41, 55, 0.85);
--card-border: rgba(255, 255, 255, 0.1);
--card-shadow: rgba(0, 0, 0, 0.25);
--text-primary: #f9fafb;
--text-secondary: #9ca3af;
--text-tertiary: #6b7280;
--border-radius: 1rem;
--transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}
* {
box-sizing: border-box;
}
/* --- 关键修改 1: 规范化大屏（默认）布局 --- */
html {
height: 100vh; /* 使用 vh 确保高度占满视口 */
overflow: hidden; /* 在大屏上禁止滚动 */
background: linear-gradient(
135deg,
var(--bg-start) 0%,
var(--bg-end) 100%
);
font-family: "Inter", "Segoe UI", "PingFang SC", "Microsoft YaHei",
sans-serif;
}
body {
height: 100vh;
margin: 0;
padding: 1rem;
color: var(--text-primary);
/* 使用 flex 居中容器 */
display: flex;
justify-content: center;
align-items: center; /* 大屏垂直居中 */
}
/* 主容器优化 */
.main-container {
width: 100%;
height: 100%;
max-width: 1880px;
display: grid;
grid-template-columns: minmax(0, 2.5fr) minmax(420px, 1fr);
gap: 1.5rem;
animation: fadeIn 0.8s var(--transition);
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* 卡片样式优化 */
.card {
background: var(--card-bg);
border-radius: var(--border-radius);
border: 1px solid var(--card-border);
box-shadow: 0 10px 35px var(--card-shadow);
display: flex;
flex-direction: column;
backdrop-filter: blur(10px);
overflow: hidden;
}
/* 播放器区域优化 */
.player-column {
display: flex;
flex-direction: column;
gap: 1.25rem;
min-height: 0;
padding: 1.5rem;
}
/* 标题高度优化 */
.player-header {
display: flex;
justify-content: space-between;
align-items: center;
padding-bottom: 0.75rem;
margin-bottom: 0.75rem;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.player-header h2 {
font-size: 1.5rem;
font-weight: 700;
margin: 0;
background: linear-gradient(90deg, #3b82f6, #38bdf8);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.engine-indicator {
padding: 0.4rem 0.9rem;
border-radius: 9999px;
font-size: 0.8rem;
font-weight: 600;
transition: var(--transition);
}
.player-viewport {
width: 100%;
flex-grow: 1;
position: relative;
background: #000;
border-radius: var(--border-radius);
overflow: hidden;
box-shadow: 0 0 40px rgba(0, 0, 0, 0.5);
min-height: 300px;
}
.loader {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border: 5px solid rgba(255, 255, 255, 0.2);
border-top: 5px solid var(--primary-color);
border-radius: 50%;
width: 50px;
height: 50px;
animation: spin 1s linear infinite;
z-index: 10;
display: none;
}
@keyframes spin {
from {
transform: translate(-50%, -50%) rotate(0deg);
}
to {
transform: translate(-50%, -50%) rotate(360deg);
}
}
#videojs-container,
#flvjs-container,
#mse-container {
width: 100%;
height: 100%;
display: none;
}
.video-js,
#flv-video,
#mse-video {
width: 100% !important;
height: 100% !important;
object-fit: contain;
}
.controls-log-column {
display: flex;
flex-direction: column;
gap: 1.5rem;
min-height: 0;
}
.control-panel {
flex-shrink: 0;
padding: 1.5rem;
}
.panel-header {
display: flex;
align-items: center;
justify-content: space-between;
padding-bottom: 0.75rem;
margin-bottom: 1.25rem;
border-bottom: 1px solid var(--card-border);
}
.panel-header h2 {
font-size: 1.35rem;
font-weight: 600;
margin: 0;
color: var(--text-primary);
}
label {
display: block;
margin-bottom: 0.75rem;
font-weight: 500;
color: var(--text-secondary);
font-size: 0.9rem;
}
input {
width: 100%;
padding: 0.75rem;
border: 1px solid var(--card-border);
border-radius: 0.5rem;
font-size: 0.95rem;
transition: var(--transition);
background: rgba(43, 54, 72, 0.7);
color: var(--text-primary);
}
input::placeholder {
color: var(--text-tertiary);
}
input:focus {
outline: none;
border-color: var(--primary-color);
box-shadow: 0 0 0 3px var(--primary-glow);
}
button {
padding: 0.75rem 1.25rem;
border: none;
border-radius: 0.5rem;
cursor: pointer;
font-weight: 600;
font-size: 0.95rem;
transition: var(--transition);
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
}
button:hover {
transform: translateY(-2px);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}
button:active {
transform: translateY(0);
}
#load-btn {
background: linear-gradient(135deg, var(--primary-color), #2563eb);
color: white;
width: 100%;
margin-top: 1.25rem;
font-weight: 600;
letter-spacing: 0.5px;
}
#load-btn:hover {
background: linear-gradient(135deg, #2563eb, #1d4ed8);
box-shadow: 0 4px 20px var(--primary-glow);
}
.button-group {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
margin-top: 1.25rem;
}
.preset-btn {
flex: 1 1 calc(50% - 0.75rem);
background: rgba(55, 65, 81, 0.5);
color: var(--text-secondary);
font-size: 0.85rem;
padding: 0.65rem;
border: 1px solid rgba(255, 255, 255, 0.05);
}
.preset-btn:hover {
background: rgba(75, 85, 99, 0.7);
color: var(--text-primary);
border-color: rgba(59, 130, 246, 0.3);
}
.preset-btn.active {
background: rgba(59, 130, 246, 0.2);
color: white;
border-color: var(--primary-color);
box-shadow: 0 0 15px var(--primary-glow);
transform: translateY(-2px);
}
.log-container {
flex-grow: 1;
min-height: 0;
display: flex;
flex-direction: column;
position: relative;
padding: 0;
}
.log-container::before {
content: "";
position: absolute;
inset: 0;
background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 800"><g fill-opacity="0.01"><circle fill="%23fff" cx="400" cy="400" r="400"/><circle fill="%231f2937" cx="400" cy="400" r="300"/><circle fill="%232b3648" cx="400" cy="400" r="200"/><circle fill="%23374151" cx="400" cy="400" r="100"/></g></svg>');
opacity: 0.2;
pointer-events: none;
}
.log-header {
padding: 1.25rem 1.5rem 0.75rem;
flex-shrink: 0;
border-bottom: 1px solid var(--card-border);
}
.clear-log-btn {
background: none;
padding: 0.25rem;
border-radius: 9999px;
color: var(--text-tertiary);
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
}
.clear-log-btn:hover {
background: rgba(255, 255, 255, 0.1);
color: var(--text-primary);
}
.log-content {
padding: 1.25rem 1.5rem;
flex-grow: 1;
overflow-y: auto;
font-family: "SF Mono", "Courier New", monospace;
font-size: 0.85rem;
}
.log-content::-webkit-scrollbar {
width: 8px;
}
.log-content::-webkit-scrollbar-track {
background: transparent;
}
.log-content::-webkit-scrollbar-thumb {
background-color: rgba(255, 255, 255, 0.2);
border-radius: 4px;
}
.log-content::-webkit-scrollbar-thumb:hover {
background-color: var(--primary-color);
}
.log-content {
scrollbar-width: thin;
scrollbar-color: var(--primary-color) transparent;
}
.log-entry {
padding: 0.5rem 0;
display: flex;
gap: 1rem;
line-height: 1.5;
}
.log-time {
color: var(--text-tertiary);
flex-shrink: 0;
font-size: 0.8rem;
}
.log-message {
color: var(--text-secondary);
flex-grow: 1;
}
.log-entry.error .log-message {
color: var(--danger-color);
text-shadow: 0 0 8px var(--danger-glow);
}
.log-entry.success .log-message {
color: var(--success-color);
text-shadow: 0 0 8px var(--success-glow);
}
.log-entry.info .log-message {
color: var(--info-color);
text-shadow: 0 0 8px var(--info-glow);
}
/* --- 关键修改 2: 修正响应式规则 --- */
@media (max-width: 1200px) {
/* 核心修复：必须同时修改 html 和 body 以允许滚动 */
html,
body {
height: auto;
overflow-y: auto;
}
body {
/* 确保内容从顶部开始，而不是在长页面上垂直居中 */
align-items: flex-start;
}
.main-container {
grid-template-columns: 1fr; /* 单列布局 */
height: auto;
overflow: visible; /* 让父元素处理滚动 */
}
.controls-log-column {
height: auto;
overflow: visible;
}
.player-column {
height: auto;
}
.log-container {
height: 400px;
}
}
@media (max-width: 768px) {
body {
padding: 0.5rem;
}
.main-container {
gap: 1rem;
}
.button-group {
flex-direction: column;
}
.preset-btn {
flex: 1 1 auto;
}
.player-column,
.control-panel {
padding: 1.25rem;
}
.log-header,
.log-content {
padding: 1rem;
}
.player-header h2 {
font-size: 1.25rem;
}
.panel-header h2 {
font-size: 1.2rem;
}
.engine-indicator {
font-size: 0.75rem;
padding: 0.35rem 0.8rem;
}
input {
padding: 0.65rem;
font-size: 0.9rem;
}
button {
padding: 0.65rem 1rem;
font-size: 0.9rem;
}
}
/* 滚动指示器 */
.scroll-indicator {
position: fixed;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
color: var(--text-secondary);
padding: 8px 16px;
border-radius: 20px;
font-size: 0.85rem;
display: none; /* 默认隐藏 */
align-items: center;
gap: 8px;
z-index: 1000;
opacity: 0;
transition: opacity 0.3s ease;
border: 1px solid rgba(255, 255, 255, 0.1);
}
.scroll-indicator.show {
display: flex;
opacity: 1;
}
.scroll-indicator svg {
animation: bounce 1.5s infinite;
}
@keyframes bounce {
0%,
20%,
50%,
80%,
100% {
transform: translateY(0);
}
40% {
transform: translateY(-8px);
}
60% {
transform: translateY(-4px);
}
}
</style>
</head>
<body>
<div class="scroll-indicator" id="scroll-indicator">
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<polyline points="7 13 12 18 17 13"></polyline>
<polyline points="7 6 12 11 17 6"></polyline>
</svg>
向下滚动查看更多内容
</div>
<div class="main-container">
<div class="card player-column">
<div class="player-header">
<h2>智能混合视频播放器</h2>
<div class="engine-indicator" id="engine-indicator">未启动</div>
</div>
<div class="player-viewport">
<div class="loader" id="loader"></div>
<div id="videojs-container"></div>
<div id="flvjs-container"></div>
<div id="mse-container"></div>
</div>
</div>
<div class="controls-log-column">
<div class="card control-panel">
<div class="panel-header">
<h2>控制台</h2>
</div>
<label for="media-url">媒体资源地址 (URL)</label>
<input
type="text"
id="media-url"
placeholder="支持 .mp4, .m3u8, .flv, ws://..."
value="http://vjs.zencdn.net/v/oceans.mp4"
/>
<button id="load-btn">
<svg
xmlns="http://www.w3.org/2000/svg"
width="18"
height="18"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2.5"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
<polyline points="7 10 12 15 17 10" />
<line x1="12" y1="15" x2="12" y2="3" />
</svg>
加载媒体
</button>
<div class="button-group">
<button
class="preset-btn"
data-url="http://vjs.zencdn.net/v/oceans.mp4"
title="播放MP4格式视频"
>
MP4
</button>
<button
class="preset-btn"
data-url="https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8"
title="播放HLS(m3u8)直播流"
>
HLS
</button>
<button
class="preset-btn"
data-url="https://sf1-cdn-tos.huoshanstatic.com/obj/media-fe/xgplayer_doc_video/flv/xgplayer-demo-360p.flv"
title="播放HTTP-FLV视频"
>
HTTP-FLV
</button>
<button
class="preset-btn"
data-url="ws://localhost:8888?type=flv"
title="播放通过WebSocket传输的FLV流"
>
WS-FLV
</button>
<button
class="preset-btn"
data-url="ws://localhost:8889?type=fmp4"
title="播放通过WebSocket传输的fMP4流"
>
WS-fMP4
</button>
</div>
</div>
<div class="card log-container">
<div class="panel-header log-header">
<h2>系统日志</h2>
<button id="clear-log-btn" class="clear-log-btn" title="清除日志">
<svg
xmlns="http://www.w3.org/2000/svg"
width="20"
height="20"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M3 6h18" />
<path
d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"
/>
<line x1="10" y1="11" x2="10" y2="17" />
<line x1="14" y1="11" x2="14" y2="17" />
</svg>
</button>
</div>
<div class="log-content" id="log-output">
<div class="log-entry info">
<span class="log-time">[系统]</span>
<span class="log-message">智能播放器 v13.1 已就绪</span>
</div>
<div class="log-entry">
<span class="log-time">[提示]</span>
<span class="log-message">请选择预设或输入媒体URL</span>
</div>
<div class="log-entry">
<span class="log-time">[提示]</span>
<span class="log-message">默认已加载MP4演示视频</span>
</div>
</div>
</div>
</div>
</div>
<script src="https://vjs.zencdn.net/8.10.0/video.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/flv.js/dist/flv.min.js"></script>
<script>
document.addEventListener("DOMContentLoaded", function () {
const urlInput = document.getElementById("media-url");
const loadBtn = document.getElementById("load-btn");
const logOutput = document.getElementById("log-output");
const presetButtons = document.querySelectorAll(".preset-btn");
const loader = document.getElementById("loader");
const engineIndicator = document.getElementById("engine-indicator");
const videojsContainer = document.getElementById("videojs-container");
const flvjsContainer = document.getElementById("flvjs-container");
const mseContainer = document.getElementById("mse-container");
const clearLogBtn = document.getElementById("clear-log-btn");
const scrollIndicator = document.getElementById("scroll-indicator");
// 添加滚动指示器逻辑
function showScrollIndicator() {
if (window.innerHeight < 800) {
scrollIndicator.classList.add("show");
// 5秒后自动隐藏
setTimeout(() => {
scrollIndicator.classList.remove("show");
}, 5000);
}
}
// 页面加载时检查是否需要显示滚动指示器
setTimeout(showScrollIndicator, 1000);
// 监听滚动事件隐藏指示器
window.addEventListener("scroll", () => {
scrollIndicator.classList.remove("show");
});
let videojsPlayer = null;
let flvPlayer = null;
let msePlayer = {
mediaSource: null,
sourceBuffer: null,
websocket: null,
};
function updateActiveButton(currentUrl) {
presetButtons.forEach((btn) => {
if (btn.getAttribute("data-url") === currentUrl) {
btn.classList.add("active");
} else {
btn.classList.remove("active");
}
});
}
function log(message, type = "default") {
const logEntry = document.createElement("div");
logEntry.className = `log-entry ${type}`;
const timeSpan = document.createElement("span");
timeSpan.className = "log-time";
timeSpan.textContent = `[${new Date().toLocaleTimeString()}]`;
const messageSpan = document.createElement("span");
messageSpan.className = "log-message";
messageSpan.textContent = message;
logEntry.appendChild(timeSpan);
logEntry.appendChild(messageSpan);
logOutput.appendChild(logEntry);
logOutput.scrollTop = logOutput.scrollHeight;
// 滚动到底部时隐藏指示器
const isAtBottom =
logOutput.scrollHeight - logOutput.clientHeight <=
logOutput.scrollTop + 1;
if (isAtBottom) {
scrollIndicator.classList.remove("show");
}
}
function showLoader(show) {
loader.style.display = show ? "block" : "none";
}
function updateEngineIndicator(engine) {
engineIndicator.textContent = engine ? `${engine} 引擎` : "未启动";
const styles = {
"Video.js": {
background: "var(--primary-color)",
color: "#fff",
boxShadow: `0 0 15px var(--primary-glow)`,
},
"flv.js": {
background: "var(--success-color)",
color: "#fff",
boxShadow: `0 0 15px var(--success-glow)`,
},
"MSE/fMP4": {
background: "#f97316",
color: "#fff",
boxShadow: `0 0 15px rgba(249, 115, 22, 0.6)`,
},
null: {
background: "rgba(55, 65, 81, 0.5)",
color: "var(--text-secondary)",
boxShadow: "none",
},
};
Object.assign(
engineIndicator.style,
styles[engine] || styles["null"]
);
}
function cleanupPlayers() {
showLoader(true);
if (videojsPlayer || flvPlayer || msePlayer.websocket)
log("清理旧的播放器实例...", "info");
if (videojsPlayer) {
videojsPlayer.dispose();
videojsPlayer = null;
}
if (flvPlayer) {
flvPlayer.destroy();
flvPlayer = null;
}
if (msePlayer.websocket) {
msePlayer.websocket.close();
msePlayer = {};
}
videojsContainer.style.display = "none";
videojsContainer.innerHTML = "";
flvjsContainer.style.display = "none";
flvjsContainer.innerHTML = "";
mseContainer.style.display = "none";
mseContainer.innerHTML = "";
updateEngineIndicator(null);
}
function createMsePlayer(url, mimeCodec) {
if (!window.MediaSource) {
log("浏览器不支持 MediaSource API", "error");
showLoader(false);
return;
}
mseContainer.style.display = "block";
const videoEl = document.createElement("video");
videoEl.id = "mse-video";
videoEl.controls = true;
videoEl.autoplay = true;
videoEl.muted = true;
mseContainer.appendChild(videoEl);
const mediaSource = new MediaSource();
videoEl.src = URL.createObjectURL(mediaSource);
msePlayer.mediaSource = mediaSource;
mediaSource.addEventListener("sourceopen", () => {
log("MediaSource已打开", "success");
try {
const sourceBuffer = mediaSource.addSourceBuffer(mimeCodec);
msePlayer.sourceBuffer = sourceBuffer;
const ws = new WebSocket(url);
ws.binaryType = "arraybuffer";
msePlayer.websocket = ws;
ws.onopen = () => {
log("fMP4 WebSocket已连接", "success");
updateEngineIndicator("MSE/fMP4");
showLoader(false);
};
ws.onmessage = (event) => {
if (!sourceBuffer.updating) {
try {
sourceBuffer.appendBuffer(event.data);
} catch (e) {
log(`Buffer错误: ${e.message}`, "error");
}
}
};
ws.onclose = () => log("fMP4 WebSocket已关闭", "info");
ws.onerror = (err) => {
log("fMP4 WebSocket错误", "error");
showLoader(false);
};
} catch (e) {
log(`创建SourceBuffer失败: ${e.message}`, "error");
showLoader(false);
}
});
}
function loadMedia() {
let url = urlInput.value.trim();
if (!url) {
log("URL不能为空。", "error");
return;
}
updateActiveButton(url);
cleanupPlayers();
let requiredEngine = "videojs";
try {
if (url.startsWith("ws")) {
const urlObj = new URL(url.replace(/^ws/, "http"));
requiredEngine =
urlObj.searchParams.get("type") === "fmp4"
? "mse_fmp4"
: "flvjs";
} else if (url.endsWith(".flv")) {
requiredEngine = "flvjs";
}
} catch (e) {
log("URL格式无效", "error");
showLoader(false);
return;
}
log(`使用引擎: ${requiredEngine}`, "info");
if (requiredEngine === "videojs") {
videojsContainer.style.display = "block";
const videoEl = document.createElement("video");
videoEl.className = "video-js vjs-default-skin";
videojsContainer.appendChild(videoEl);
videojsPlayer = videojs(videoEl, {
controls: true,
autoplay: true,
muted: true,
fluid: true,
});
const type = url.endsWith(".m3u8") ? "application/x-mpegURL" : "";
videojsPlayer.src({ src: url, type: type });
videojsPlayer.on("ready", () => {
showLoader(false);
log("Video.js已就绪", "success");
updateEngineIndicator("Video.js");
});
videojsPlayer.on("error", () => {
showLoader(false);
log(`Video.js 错误: ${videojsPlayer.error().message}`, "error");
});
} else if (requiredEngine === "flvjs") {
flvjsContainer.style.display = "block";
const videoEl = document.createElement("video");
videoEl.id = "flv-video";
videoEl.controls = true;
videoEl.autoplay = true;
videoEl.muted = true;
flvjsContainer.appendChild(videoEl);
flvPlayer = flvjs.createPlayer({
type: "flv",
isLive: url.startsWith("ws"),
url: url,
});
flvPlayer.attachMediaElement(videoEl);
flvPlayer.load();
let played = false;
flvPlayer.on(flvjs.Events.STATISTICS_INFO, () => {
if (!played) {
showLoader(false);
updateEngineIndicator("flv.js");
log("flv.js 开始接收数据", "success");
played = true;
}
});
flvPlayer.on(flvjs.Events.ERROR, (type, detail) => {
showLoader(false);
log(`flv.js 错误: ${type} - ${detail}`, "error");
});
} else if (requiredEngine === "mse_fmp4") {
const mimeCodec = 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"';
log(`使用MIME编解码器: ${mimeCodec}`, "info");
createMsePlayer(url, mimeCodec);
}
}
clearLogBtn.addEventListener("click", () => {
logOutput.innerHTML = "";
log("日志已清除。", "info");
});
loadBtn.addEventListener("click", loadMedia);
presetButtons.forEach((button) => {
button.addEventListener("click", function () {
urlInput.value = this.getAttribute("data-url");
loadMedia();
});
});
// 初始加载演示视频
setTimeout(() => {
loadMedia();
}, 500);
// 初始日志
log("智能播放器 v13.1 已就绪", "success");
});
</script>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
