feat: support play

2024-12-11 20:07:17 +08:00
parent 59d2beddbf
commit 7b9f6d444f
10 changed files with 184 additions and 21 deletions
--- a/frontend/src/views/PlayView.vue
+++ b/frontend/src/views/PlayView.vue
@@ -1,3 +1,143 @@
 <template>
-  <h1>Player</h1>
+  <van-nav-bar :title="item.title" left-text="返回" left-arrow @click-left="onClickLeft" />
+  <div style="background-color: black;">
+    <video id="video" :poster="item.poster"></video>
+  </div>
+
+  <van-notice-bar v-if="false === item.bought" left-icon="volume-o" text="未购买的视频、音频默认播放时长为1分钟左右。" />
+
+
+  <div id="container">
+    <van-space direction="vertical" fill size="2rem">
+
+      <van-row gutter="20" v-show="playing">
+        <van-col span="24">
+          <van-progress :percent="(currentTime / duration) * 100" />
+        </van-col>
+      </van-row>
+
+      <van-row gutter="20">
+        <van-col span="12">
+          <van-button type="primary" plain round @click="play(item.hash, 'video')" size="large" block>看视频</van-button>
+        </van-col>
+        <van-col span="12">
+          <van-button type="warning" plain round="" @click="play(item.hash, 'audio')" size="large"
+            block>听音频</van-button>
+        </van-col>
+      </van-row>
+
+      <van-row gutter="20" v-show="playing">
+        <van-col span="24">
+          <van-button round type="danger" @click="stop()" size="large" block>结束播放</van-button>
+        </van-col>
+      </van-row>
+    </van-space>
+  </div>
 </template>
+
+<script setup>
+import request from "@/utils/request";
+import Hls from "hls.js";
+
+const router = useRouter();
+const route = useRoute();
+
+const item = ref({
+  title: "加载中...",
+})
+
+const currentTime = ref(0);
+const duration = ref(0);
+const playing = ref(false);
+
+onMounted(() => {
+  loadMedia(route.params.hash);
+  const player = document.getElementById('video');
+  player.addEventListener('timeupdate', updateTime);
+  player.addEventListener('loadedmetadata', () => {
+    duration.value = player.duration;
+  });
+  player.addEventListener('ended', function () {
+    console.log("Video ended");
+    playing.value = false;
+  });
+  player.addEventListener('pause', () => {
+    playing.value = false;
+  });
+})
+
+const onClickLeft = () => {
+  router.back();
+};
+
+
+const loadMedia = (hash) => {
+  console.log("loadMedia: ", hash);
+  setTimeout(() => {
+    request
+      .get(`/medias/${hash}`)
+      .then((res) => {
+        console.log(res)
+        item.value = res.data;
+      })
+      .catch((err) => {
+        console.error("ERROR", err);
+      })
+  }, 1000)
+}
+
+const play = (hash, type) => {
+  playing.value = true;
+
+  const player = document.getElementById('video');
+  const source = `/v1/medias/${hash}/${type}`
+  if (Hls.isSupported()) {
+    var hls = new Hls({
+      xhrSetup: function (xhr, url) {
+        xhr.setRequestHeader('Authorization', 'Bearer ' + __GA);
+      }
+    });
+    hls.loadSource(source);
+    hls.attachMedia(player);
+    hls.on(Hls.Events.MANIFEST_PARSED, function () {
+      player.play();
+    });
+  } else if (player.canPlayType('application/vnd.apple.mpegurl')) {
+    player.src = source;
+    player.addEventListener('loadedmetadata', function () {
+      player.play();
+    });
+  }
+
+}
+
+const updateTime = () => {
+  const player = document.getElementById('video');
+  currentTime.value = player.currentTime;
+};
+
+const stop = () => {
+  const player = document.getElementById('video');
+  player.pause();
+  player.currentTime = 0;
+  currentTime.value = 0;
+}
+
+const formatTime = (time) => {
+  const minutes = Math.floor(time / 60);
+  const seconds = Math.floor(time % 60);
+  return `${minutes}:${seconds < 10 ? '0' : ''}${seconds}`;
+};
+
+</script>
+
+<style scoped>
+#container {
+  padding: 1em;
+}
+
+#video {
+  width: 100%;
+  aspect-ratio: 4 / 3;
+}
+</style>