|
|
@@ -8,13 +8,7 @@
|
|
|
<div class="config-section">
|
|
|
<el-form label-width="120px">
|
|
|
<el-form-item label="视频地址">
|
|
|
- <el-input v-model="urlConfig.url" placeholder="输入 HLS/MP4/WebM 等视频地址" style="width: 600px" />
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="播放器类型">
|
|
|
- <el-select v-model="urlConfig.playerType" style="width: 200px">
|
|
|
- <el-option label="HLS.js (推荐)" value="hls" />
|
|
|
- <el-option label="原生 Video" value="native" />
|
|
|
- </el-select>
|
|
|
+ <el-input v-model="urlConfig.url" placeholder="输入 MP4/WebM 等视频地址" style="width: 600px" />
|
|
|
</el-form-item>
|
|
|
<el-form-item>
|
|
|
<el-button type="primary" @click="playUrl">播放</el-button>
|
|
|
@@ -60,16 +54,6 @@
|
|
|
</el-space>
|
|
|
</div>
|
|
|
|
|
|
- <!-- 当前状态 -->
|
|
|
- <div class="status-section">
|
|
|
- <el-descriptions title="当前状态" :column="3" border>
|
|
|
- <el-descriptions-item label="播放器类型">{{ currentPlayerType }}</el-descriptions-item>
|
|
|
- <el-descriptions-item label="视频地址" :span="2">
|
|
|
- <el-text truncated style="max-width: 600px">{{ currentSrc || '-' }}</el-text>
|
|
|
- </el-descriptions-item>
|
|
|
- </el-descriptions>
|
|
|
- </div>
|
|
|
-
|
|
|
<!-- 日志区域 -->
|
|
|
<div class="log-section">
|
|
|
<div class="log-header">
|
|
|
@@ -98,7 +82,7 @@ const playerRef = ref<InstanceType<typeof VideoPlayer>>()
|
|
|
// URL 配置
|
|
|
const urlConfig = reactive({
|
|
|
url: '',
|
|
|
- playerType: 'hls' as 'hls' | 'native'
|
|
|
+ playerType: 'native'
|
|
|
})
|
|
|
|
|
|
// 播放配置
|
|
|
@@ -109,7 +93,7 @@ const playConfig = reactive({
|
|
|
|
|
|
// 当前播放状态
|
|
|
const currentSrc = ref('')
|
|
|
-const currentPlayerType = ref<'hls' | 'native'>('hls')
|
|
|
+const currentPlayerType = ref<'native'>('native')
|
|
|
|
|
|
// 日志
|
|
|
interface LogItem {
|