358 lines
7.2 KiB
Vue
358 lines
7.2 KiB
Vue
<template>
|
||
<div class="dplayer-demo">
|
||
<div class="container">
|
||
<h1>DPlayer 视频播放器演示</h1>
|
||
<p class="description">
|
||
这个页面演示了如何使用 DPlayer 播放器替代 CKPlayer，提供更好的用户体验。
|
||
</p>
|
||
|
||
<div class="demo-section">
|
||
<h2>DPlayer 播放器</h2>
|
||
<div class="video-wrapper">
|
||
<VideoPlayerUpgraded
|
||
:use-local-video="true"
|
||
title="DPlayer 演示"
|
||
description="使用 DPlayer 播放器播放本地视频文件"
|
||
:autoplay="false"
|
||
@play="onPlay"
|
||
@pause="onPause"
|
||
@ended="onEnded"
|
||
@error="onError"
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="info-section">
|
||
<h3>DPlayer 特性</h3>
|
||
<ul>
|
||
<li>🎨 界面美观，现代化设计</li>
|
||
<li>🎯 轻量级，加载速度快</li>
|
||
<li>🌏 中文友好，文档完善</li>
|
||
<li>⌨️ 支持键盘快捷键</li>
|
||
<li>📱 移动端适配优秀</li>
|
||
<li>🎮 支持倍速播放</li>
|
||
<li>🎨 可自定义主题色</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="controls-section">
|
||
<h3>播放控制</h3>
|
||
<div class="control-buttons">
|
||
<button @click="playVideo" class="control-btn">播放</button>
|
||
<button @click="pauseVideo" class="control-btn">暂停</button>
|
||
<button @click="seekVideo(30)" class="control-btn">跳转到30秒</button>
|
||
<button @click="setVideoVolume(50)" class="control-btn">音量50%</button>
|
||
<button @click="setPlaybackRate(1.5)" class="control-btn">1.5倍速</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="status-section">
|
||
<h3>播放状态</h3>
|
||
<div class="status-info">
|
||
<div class="status-item">
|
||
<strong>播放状态:</strong> {{ isPlaying ? '播放中' : '已暂停' }}
|
||
</div>
|
||
<div class="status-item">
|
||
<strong>错误信息:</strong> {{ errorMessage || '无' }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="comparison-section">
|
||
<h3>与 CKPlayer 对比</h3>
|
||
<div class="comparison-table">
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th>特性</th>
|
||
<th>CKPlayer</th>
|
||
<th>DPlayer</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td>界面美观度</td>
|
||
<td>⭐⭐</td>
|
||
<td>⭐⭐⭐⭐⭐</td>
|
||
</tr>
|
||
<tr>
|
||
<td>功能丰富度</td>
|
||
<td>⭐⭐⭐</td>
|
||
<td>⭐⭐⭐⭐</td>
|
||
</tr>
|
||
<tr>
|
||
<td>移动端支持</td>
|
||
<td>⭐⭐⭐</td>
|
||
<td>⭐⭐⭐⭐</td>
|
||
</tr>
|
||
<tr>
|
||
<td>中文支持</td>
|
||
<td>⭐⭐⭐⭐</td>
|
||
<td>⭐⭐⭐⭐⭐</td>
|
||
</tr>
|
||
<tr>
|
||
<td>社区活跃度</td>
|
||
<td>⭐⭐</td>
|
||
<td>⭐⭐⭐⭐</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { ref } from 'vue'
|
||
import VideoPlayerUpgraded from '@/components/VideoPlayerUpgraded.vue'
|
||
|
||
// 播放状态
|
||
const isPlaying = ref(false)
|
||
const errorMessage = ref('')
|
||
|
||
// 视频播放器引用
|
||
const videoPlayerRef = ref<InstanceType<typeof VideoPlayerUpgraded>>()
|
||
|
||
// 事件处理
|
||
const onPlay = () => {
|
||
isPlaying.value = true
|
||
console.log('DPlayer 视频开始播放')
|
||
}
|
||
|
||
const onPause = () => {
|
||
isPlaying.value = false
|
||
console.log('DPlayer 视频暂停')
|
||
}
|
||
|
||
const onEnded = () => {
|
||
isPlaying.value = false
|
||
console.log('DPlayer 视频播放结束')
|
||
}
|
||
|
||
const onError = (error: Event) => {
|
||
errorMessage.value = 'DPlayer 视频播放出错'
|
||
console.error('DPlayer 视频播放错误:', error)
|
||
}
|
||
|
||
// 控制方法
|
||
const playVideo = () => {
|
||
if (videoPlayerRef.value) {
|
||
videoPlayerRef.value.play()
|
||
}
|
||
}
|
||
|
||
const pauseVideo = () => {
|
||
if (videoPlayerRef.value) {
|
||
videoPlayerRef.value.pause()
|
||
}
|
||
}
|
||
|
||
const seekVideo = (time: number) => {
|
||
if (videoPlayerRef.value) {
|
||
videoPlayerRef.value.seek(time)
|
||
}
|
||
}
|
||
|
||
const setVideoVolume = (volume: number) => {
|
||
if (videoPlayerRef.value) {
|
||
videoPlayerRef.value.setVolume(volume)
|
||
}
|
||
}
|
||
|
||
const setPlaybackRate = (rate: number) => {
|
||
if (videoPlayerRef.value) {
|
||
videoPlayerRef.value.setPlaybackRate(rate)
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.dplayer-demo {
|
||
min-height: 100vh;
|
||
background: #f5f5f5;
|
||
padding: 20px 0;
|
||
}
|
||
|
||
.container {
|
||
max-width: 1200px;
|
||
margin: 0 auto;
|
||
padding: 0 20px;
|
||
}
|
||
|
||
h1 {
|
||
text-align: center;
|
||
color: #333;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.description {
|
||
text-align: center;
|
||
color: #666;
|
||
margin-bottom: 40px;
|
||
font-size: 16px;
|
||
}
|
||
|
||
.demo-section {
|
||
background: white;
|
||
border-radius: 8px;
|
||
padding: 20px;
|
||
margin-bottom: 30px;
|
||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
.demo-section h2 {
|
||
color: #333;
|
||
margin-bottom: 20px;
|
||
text-align: center;
|
||
}
|
||
|
||
.video-wrapper {
|
||
max-width: 800px;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
.info-section {
|
||
background: white;
|
||
border-radius: 8px;
|
||
padding: 20px;
|
||
margin-bottom: 30px;
|
||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
.info-section h3 {
|
||
color: #333;
|
||
margin-bottom: 15px;
|
||
}
|
||
|
||
.info-section ul {
|
||
list-style: none;
|
||
padding: 0;
|
||
}
|
||
|
||
.info-section li {
|
||
padding: 8px 0;
|
||
border-bottom: 1px solid #eee;
|
||
font-size: 16px;
|
||
}
|
||
|
||
.info-section li:last-child {
|
||
border-bottom: none;
|
||
}
|
||
|
||
.controls-section {
|
||
background: white;
|
||
border-radius: 8px;
|
||
padding: 20px;
|
||
margin-bottom: 30px;
|
||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
.controls-section h3 {
|
||
color: #333;
|
||
margin-bottom: 15px;
|
||
}
|
||
|
||
.control-buttons {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 10px;
|
||
}
|
||
|
||
.control-btn {
|
||
padding: 10px 20px;
|
||
background: #007bff;
|
||
color: white;
|
||
border: none;
|
||
border-radius: 4px;
|
||
cursor: pointer;
|
||
font-size: 14px;
|
||
transition: background-color 0.3s;
|
||
}
|
||
|
||
.control-btn:hover {
|
||
background: #0056b3;
|
||
}
|
||
|
||
.status-section {
|
||
background: white;
|
||
border-radius: 8px;
|
||
padding: 20px;
|
||
margin-bottom: 30px;
|
||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
.status-section h3 {
|
||
color: #333;
|
||
margin-bottom: 15px;
|
||
}
|
||
|
||
.status-info {
|
||
display: grid;
|
||
gap: 10px;
|
||
}
|
||
|
||
.status-item {
|
||
padding: 10px;
|
||
background: #f8f9fa;
|
||
border-radius: 4px;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.comparison-section {
|
||
background: white;
|
||
border-radius: 8px;
|
||
padding: 20px;
|
||
margin-bottom: 30px;
|
||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
.comparison-section h3 {
|
||
color: #333;
|
||
margin-bottom: 15px;
|
||
text-align: center;
|
||
}
|
||
|
||
.comparison-table {
|
||
overflow-x: auto;
|
||
}
|
||
|
||
.comparison-table table {
|
||
width: 100%;
|
||
border-collapse: collapse;
|
||
margin-top: 15px;
|
||
}
|
||
|
||
.comparison-table th,
|
||
.comparison-table td {
|
||
padding: 12px;
|
||
text-align: center;
|
||
border-bottom: 1px solid #eee;
|
||
}
|
||
|
||
.comparison-table th {
|
||
background: #f8f9fa;
|
||
font-weight: 600;
|
||
color: #333;
|
||
}
|
||
|
||
.comparison-table tr:hover {
|
||
background: #f8f9fa;
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
.container {
|
||
padding: 0 15px;
|
||
}
|
||
|
||
.control-buttons {
|
||
justify-content: center;
|
||
}
|
||
|
||
.control-btn {
|
||
flex: 1;
|
||
min-width: 120px;
|
||
}
|
||
}
|
||
</style>
|