|
|
@@ -0,0 +1,276 @@
|
|
|
+<template>
|
|
|
+ <div class="page-container">
|
|
|
+ <div class="page-header">
|
|
|
+ <span class="title">M3U8/HLS 播放</span>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 配置区域 -->
|
|
|
+ <div class="config-section">
|
|
|
+ <el-form label-width="120px">
|
|
|
+ <el-form-item label="M3U8 地址">
|
|
|
+ <el-input v-model="hlsConfig.url" placeholder="输入 m3u8 地址" style="width: 600px" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item>
|
|
|
+ <el-button type="primary" @click="playHls">播放</el-button>
|
|
|
+ <el-button @click="hlsConfig.url = ''">清空</el-button>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 播放器区域 -->
|
|
|
+ <div class="player-section">
|
|
|
+ <div v-if="!currentSrc" class="player-placeholder">
|
|
|
+ <el-icon :size="60" color="#ddd"><VideoPlay /></el-icon>
|
|
|
+ <p>请输入 M3U8 地址并点击播放</p>
|
|
|
+ </div>
|
|
|
+ <VideoPlayer
|
|
|
+ v-else
|
|
|
+ ref="playerRef"
|
|
|
+ player-type="hls"
|
|
|
+ :src="currentSrc"
|
|
|
+ :autoplay="playConfig.autoplay"
|
|
|
+ :muted="playConfig.muted"
|
|
|
+ :controls="true"
|
|
|
+ @play="onPlay"
|
|
|
+ @pause="onPause"
|
|
|
+ @error="onError"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 播放控制 -->
|
|
|
+ <div class="control-section">
|
|
|
+ <el-space wrap>
|
|
|
+ <el-button type="primary" @click="handlePlay">播放</el-button>
|
|
|
+ <el-button @click="handlePause">暂停</el-button>
|
|
|
+ <el-button type="danger" @click="handleStop">停止</el-button>
|
|
|
+ <el-button @click="handleScreenshot">截图</el-button>
|
|
|
+ <el-button @click="handleFullscreen">全屏</el-button>
|
|
|
+
|
|
|
+ <el-divider direction="vertical" />
|
|
|
+
|
|
|
+ <el-switch v-model="playConfig.muted" active-text="静音" inactive-text="有声" />
|
|
|
+ <el-switch v-model="playConfig.autoplay" active-text="自动播放" inactive-text="手动" />
|
|
|
+ </el-space>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 日志区域 -->
|
|
|
+ <div class="log-section">
|
|
|
+ <div class="log-header">
|
|
|
+ <h4>事件日志</h4>
|
|
|
+ <el-button size="small" @click="logs = []">清空</el-button>
|
|
|
+ </div>
|
|
|
+ <div class="log-content">
|
|
|
+ <div v-for="(log, index) in logs" :key="index" class="log-item" :class="log.type">
|
|
|
+ <span class="time">{{ log.time }}</span>
|
|
|
+ <span class="message">{{ log.message }}</span>
|
|
|
+ </div>
|
|
|
+ <div v-if="logs.length === 0" class="log-empty">暂无日志</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup lang="ts">
|
|
|
+import { ref, reactive } from 'vue'
|
|
|
+import { ElMessage } from 'element-plus'
|
|
|
+import { VideoPlay } from '@element-plus/icons-vue'
|
|
|
+import VideoPlayer from '@/components/VideoPlayer.vue'
|
|
|
+
|
|
|
+const playerRef = ref<InstanceType<typeof VideoPlayer>>()
|
|
|
+
|
|
|
+// HLS 配置
|
|
|
+const hlsConfig = reactive({
|
|
|
+ url: 'https://customer-pj89kn2ke2tcuh19.cloudflarestream.com/b51e49994b6fd9e56b6f1fdfcd339fe6/manifest/video.m3u8'
|
|
|
+})
|
|
|
+
|
|
|
+// 播放配置
|
|
|
+const playConfig = reactive({
|
|
|
+ autoplay: true,
|
|
|
+ muted: true
|
|
|
+})
|
|
|
+
|
|
|
+// 当前播放状态
|
|
|
+const currentSrc = ref('')
|
|
|
+
|
|
|
+// 日志
|
|
|
+interface LogItem {
|
|
|
+ time: string
|
|
|
+ type: 'info' | 'success' | 'error'
|
|
|
+ message: string
|
|
|
+}
|
|
|
+const logs = ref<LogItem[]>([])
|
|
|
+
|
|
|
+function addLog(message: string, type: LogItem['type'] = 'info') {
|
|
|
+ const time = new Date().toLocaleTimeString()
|
|
|
+ logs.value.unshift({ time, type, message })
|
|
|
+ if (logs.value.length > 100) {
|
|
|
+ logs.value.pop()
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// 播放 HLS
|
|
|
+function playHls() {
|
|
|
+ if (!hlsConfig.url) {
|
|
|
+ ElMessage.warning('请输入 M3U8 地址')
|
|
|
+ return
|
|
|
+ }
|
|
|
+ currentSrc.value = hlsConfig.url
|
|
|
+ addLog(`播放 HLS: ${hlsConfig.url}`, 'success')
|
|
|
+}
|
|
|
+
|
|
|
+// 播放控制
|
|
|
+function handlePlay() {
|
|
|
+ playerRef.value?.play()
|
|
|
+ addLog('播放', 'info')
|
|
|
+}
|
|
|
+
|
|
|
+function handlePause() {
|
|
|
+ playerRef.value?.pause()
|
|
|
+ addLog('暂停', 'info')
|
|
|
+}
|
|
|
+
|
|
|
+function handleStop() {
|
|
|
+ playerRef.value?.stop()
|
|
|
+ currentSrc.value = ''
|
|
|
+ addLog('停止', 'info')
|
|
|
+}
|
|
|
+
|
|
|
+function handleScreenshot() {
|
|
|
+ playerRef.value?.screenshot()
|
|
|
+ addLog('截图', 'info')
|
|
|
+}
|
|
|
+
|
|
|
+function handleFullscreen() {
|
|
|
+ playerRef.value?.fullscreen()
|
|
|
+ addLog('全屏', 'info')
|
|
|
+}
|
|
|
+
|
|
|
+// 事件处理
|
|
|
+function onPlay() {
|
|
|
+ addLog('视频开始播放', 'success')
|
|
|
+}
|
|
|
+
|
|
|
+function onPause() {
|
|
|
+ addLog('视频已暂停', 'info')
|
|
|
+}
|
|
|
+
|
|
|
+function onError(error: any) {
|
|
|
+ addLog(`播放错误: ${error?.message || JSON.stringify(error)}`, 'error')
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.page-container {
|
|
|
+ min-height: 100vh;
|
|
|
+ background-color: var(--bg-page);
|
|
|
+}
|
|
|
+
|
|
|
+.page-header {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ margin-bottom: 20px;
|
|
|
+ padding: 15px 20px;
|
|
|
+ background-color: var(--bg-container);
|
|
|
+ border-radius: var(--radius-base);
|
|
|
+ color: var(--text-primary);
|
|
|
+
|
|
|
+ .title {
|
|
|
+ font-size: 18px;
|
|
|
+ font-weight: 600;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.config-section {
|
|
|
+ margin-bottom: 20px;
|
|
|
+ padding: 20px;
|
|
|
+ background-color: var(--bg-container);
|
|
|
+ border-radius: var(--radius-base);
|
|
|
+}
|
|
|
+
|
|
|
+.player-section {
|
|
|
+ height: 500px;
|
|
|
+ margin-bottom: 20px;
|
|
|
+ border-radius: var(--radius-base);
|
|
|
+ overflow: hidden;
|
|
|
+ background-color: #000;
|
|
|
+
|
|
|
+ .player-placeholder {
|
|
|
+ height: 100%;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ color: var(--text-secondary);
|
|
|
+
|
|
|
+ p {
|
|
|
+ margin-top: 15px;
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.control-section {
|
|
|
+ padding: 15px 20px;
|
|
|
+ background-color: var(--bg-container);
|
|
|
+ border-radius: var(--radius-base);
|
|
|
+ margin-bottom: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+.log-section {
|
|
|
+ padding: 15px 20px;
|
|
|
+ background-color: var(--bg-container);
|
|
|
+ border-radius: var(--radius-base);
|
|
|
+
|
|
|
+ .log-header {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ margin-bottom: 10px;
|
|
|
+
|
|
|
+ h4 {
|
|
|
+ font-size: 14px;
|
|
|
+ margin: 0;
|
|
|
+ color: var(--text-primary);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .log-content {
|
|
|
+ max-height: 200px;
|
|
|
+ overflow-y: auto;
|
|
|
+ background-color: var(--bg-hover);
|
|
|
+ border-radius: var(--radius-sm);
|
|
|
+ padding: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .log-item {
|
|
|
+ font-size: 12px;
|
|
|
+ padding: 4px 0;
|
|
|
+ border-bottom: 1px solid var(--border-color-light);
|
|
|
+ color: var(--text-regular);
|
|
|
+
|
|
|
+ &:last-child {
|
|
|
+ border-bottom: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ .time {
|
|
|
+ color: var(--text-secondary);
|
|
|
+ margin-right: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.success .message {
|
|
|
+ color: var(--color-success);
|
|
|
+ }
|
|
|
+
|
|
|
+ &.error .message {
|
|
|
+ color: var(--color-danger);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .log-empty {
|
|
|
+ text-align: center;
|
|
|
+ color: var(--text-secondary);
|
|
|
+ font-size: 12px;
|
|
|
+ padding: 20px 0;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
yb