admin/momentry_studio
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: VideoPlayer loading state

Browse Source
This commit is contained in:
Momentry Studio
2026-06-15 00:24:24 +08:00
parent 681a235e77
commit dbcba0e2a9
1 changed files with 10 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/components/VideoPlayer.vue
View File

@@ -3,7 +3,12 @@
<div class="video-player-box"> <div class="video-player-box">
<button class="close-btn" @click="close">×</button> <button class="close-btn" @click="close">×</button>
<video ref="videoEl" class="video" controls autoplay @loadedmetadata="onLoaded" @timeupdate="onTimeUpdate"> <div v-if="videoLoading" class="video-loading">
<div class="loading-spinner"></div>
<p>Loading video...</p>
</div>
<video v-show="!videoLoading" ref="videoEl" class="video" controls autoplay @loadedmetadata="onLoaded" @timeupdate="onTimeUpdate">
<source :src="videoSrc" type="video/mp4" /> <source :src="videoSrc" type="video/mp4" />
</video> </video>
@@ -17,7 +22,7 @@
</div> </div>
</div> </div>
<div v-if="hasRange" class="segment-controls"> <div v-if="hasRange && !videoLoading" class="segment-controls">
<button @click="seekToStart" class="seg-btn">⏮ 跳到起點</button> <button @click="seekToStart" class="seg-btn">⏮ 跳到起點</button>
<button @click="togglePlay" class="seg-btn">{{ isPlaying ? '⏸ 暫停' : '▶ 播放' }}</button> <button @click="togglePlay" class="seg-btn">{{ isPlaying ? '⏸ 暫停' : '▶ 播放' }}</button>
<button @click="seekToEnd" class="seg-btn">跳到結尾 ⏭</button> <button @click="seekToEnd" class="seg-btn">跳到結尾 ⏭</button>
@@ -201,4 +206,7 @@ onUnmounted(() => {
cursor: pointer; font-size: 0.85rem; transition: background 0.15s; cursor: pointer; font-size: 0.85rem; transition: background 0.15s;
} }
.seg-btn:hover { background: #374151; } .seg-btn:hover { background: #374151; }
.video-loading { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 60px 20px; color: #9ca3af; }
.loading-spinner { width: 40px; height: 40px; border: 4px solid #374151; border-top-color: #4f46e5; border-radius: 50%; animation: spin 0.8s linear infinite; margin-bottom: 12px; }
@keyframes spin { to { transform: rotate(360deg); } }
</style> </style>