fix: 完善 m3u8 播放器 demo 样式

wangrongding · Mar 10, 2024 · e327dab · e327dab
1 parent 00afc3c
commit e327dab
Showing 1 changed file with 3 additions and 3 deletions.
diff --git a/src/page/web-audio-video/m3u8-player.vue b/src/page/web-audio-video/m3u8-player.vue
@@ -30,13 +30,13 @@ function destroy() {
 }
 </script>
 <template>
-  <div class="flex items-center justify-center flex-col">
+  <div class="flex items-center justify-center flex-col gap-10 mt-10">
     <div class="w-[900px] flex">
       <el-input v-model="videoSource" placeholder="Please input"></el-input>
       <el-button @click="initPlayer">播放</el-button>
     </div>
-    <p class="bg-emerald-300">可以播放 m3u8 文件，也可以将m3u8的视频文件转为 mp4 下载到本地</p>
-    <div id="tiny-player"></div>
+    <p class="bg-emerald-300">播放 m3u8 文件, 可以填入你要播放的 m3u8 地址</p>
+    <div id="tiny-player" class="border-2 border-teal-200 w-[900px] text-center">请点击播放</div>
   </div>
 </template>
 <style lang="scss" scoped>