fix: ios player

2025-01-04 01:02:35 +08:00
parent 9df2663b6e
commit 019297d261
6 changed files with 131 additions and 64 deletions
--- a/backend/modules/medias/controller.go
+++ b/backend/modules/medias/controller.go
@@ -82,7 +82,6 @@ func (c *Controller) MediaIndex(ctx fiber.Ctx) error {
 	if claim == nil {
 		return errorx.RequestUnAuthorized
 	}
-
 	// c.Locals(consts.CtxKeyJwt, token)
 	token := fiber.Locals[string](ctx, consts.CtxKeyJwt)
 	model, err := c.svc.GetMediaByHash(ctx.Context(), claim.TenantID, hash)
@@ -103,6 +102,7 @@ func (c *Controller) MediaIndex(ctx fiber.Ctx) error {
 		return err
 	}

+	ctx.Set("Content-Type", "application/vnd.apple.mpegurl")
 	return ctx.SendString(playlist.String())
 }

@@ -133,6 +133,7 @@ func (c *Controller) MediaSegment(ctx fiber.Ctx) error {
 	}

 	filepath := c.svc.GetSegmentPath(ctx.Context(), mediaType, model.TenantID, model.Hash, segments[0])
+	ctx.Set("Content-Type", "video/mp2t")
 	return ctx.SendFile(filepath)
 }

--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -9,6 +9,7 @@
      "version": "0.0.0",
      "dependencies": {
        "axios": "^1.7.9",
+        "dplayer": "^1.27.1",
        "hls.js": "^0.8.5",
        "pinia": "^2.2.6",
        "vant": "^4.9.9",
@@ -871,6 +872,12 @@
      "dev": true,
      "license": "MIT"
    },
+    "node_modules/balloon-css": {
+      "version": "1.2.0",
+      "resolved": "https://npm.hub.ipao.vip/repository/npm/balloon-css/-/balloon-css-1.2.0.tgz",
+      "integrity": "sha512-urXwkHgwp6GsXVF+it01485Z2Cj4pnW02ICnM0TemOlkKmCNnDLmyy+ZZiRXBpwldUXO+aRNr7Hdia4CBvXJ5A==",
+      "license": "MIT"
+    },
    "node_modules/binary-extensions": {
      "version": "2.3.0",
      "dev": true,
@@ -1108,6 +1115,28 @@
        "node": ">=0.4.0"
      }
    },
+    "node_modules/dplayer": {
+      "version": "1.27.1",
+      "resolved": "https://npm.hub.ipao.vip/repository/npm/dplayer/-/dplayer-1.27.1.tgz",
+      "integrity": "sha512-2laBMXs5V1B9zPwJ7eAIw/OBo+Xjvy03i4GHTk3Cg+IWbrq8rKMFO0fFr6ClAYotYOCcFGOvaJDkOZcgKllsCA==",
+      "license": "MIT",
+      "dependencies": {
+        "axios": "1.2.3",
+        "balloon-css": "^1.0.3",
+        "promise-polyfill": "8.3.0"
+      }
+    },
+    "node_modules/dplayer/node_modules/axios": {
+      "version": "1.2.3",
+      "resolved": "https://npm.hub.ipao.vip/repository/npm/axios/-/axios-1.2.3.tgz",
+      "integrity": "sha512-pdDkMYJeuXLZ6Xj/Q5J3Phpe+jbGdsSzlQaFVkMQzRUL05+6+tetX8TV3p4HrU4kzuO9bt+io/yGQxuyxA/xcw==",
+      "license": "MIT",
+      "dependencies": {
+        "follow-redirects": "^1.15.0",
+        "form-data": "^4.0.0",
+        "proxy-from-env": "^1.1.0"
+      }
+    },
    "node_modules/electron-to-chromium": {
      "version": "1.5.66",
      "dev": true,
@@ -1997,6 +2026,12 @@
        "node": "^10 || ^12 || >=14"
      }
    },
+    "node_modules/promise-polyfill": {
+      "version": "8.3.0",
+      "resolved": "https://npm.hub.ipao.vip/repository/npm/promise-polyfill/-/promise-polyfill-8.3.0.tgz",
+      "integrity": "sha512-H5oELycFml5yto/atYqmjyigJoAo3+OXwolYiH7OfQuYlAqhxNvTfiNMbV9hsC6Yp83yE5r2KTVmtrG6R9i6Pg==",
+      "license": "MIT"
+    },
    "node_modules/proxy-from-env": {
      "version": "1.1.0",
      "resolved": "https://npm.hub.ipao.vip/repository/npm/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -4,12 +4,13 @@
  "private": true,
  "type": "module",
  "scripts": {
-    "dev": "vite",
+    "dev": "vite --host 0.0.0.0",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "axios": "^1.7.9",
+    "dplayer": "^1.27.1",
    "hls.js": "^0.8.5",
    "pinia": "^2.2.6",
    "vant": "^4.9.9",
@@ -25,4 +26,4 @@
    "vite": "^5.4.10",
    "vite-plugin-vue-devtools": "^7.5.4"
  }
-}
+}
--- a/frontend/src/views/PlayView.vue
+++ b/frontend/src/views/PlayView.vue
@@ -1,6 +1,7 @@
 <template>
  <van-nav-bar :title="item.title" left-text="返回" left-arrow @click-left="onClickLeft" />
-  <video controls id="video" :poster="item.poster" />
+  <!-- <video controls id="video" :poster="item.poster" /> -->
+  <div id="dplayer" :style="{ backgroundImage: `url(${item.poster})` }"></div>

  <template v-if="false === item.bought">
    <van-notice-bar left-icon="volume-o" text="未购买的视频、音频默认播放时长为1分钟左右。" />
@@ -26,32 +27,106 @@

 <script setup>
 import request from "@/utils/request";
+import DPlayer from "dplayer";
 import Hls from "hls.js";
 import { onBeforeUnmount, onMounted } from "vue";

+
 const router = useRouter();
 const route = useRoute();
 const pageLoading = ref(true)

+let player = null;
+
 const item = ref({
  title: "加载中...",
 });

 onBeforeUnmount(() => {
-  const player = document.getElementById("video");
-  if (player) {
-    player.pause();
-  }
+  player?.destroy();
 });

 onMounted(() => {
  loadMedia(route.params.hash);
-  const player = document.getElementById("video");
-  player.addEventListener("ended", function () {
-    console.log("Video ended");
-  });
 });

+const onClickLeft = () => {
+  if (route.meta.from?.name) {
+    router.back();
+    return;
+  }
+  router.replace({
+    name: "tab.home",
+    params: {
+      tenant: route.params.tenant,
+    },
+  });
+};
+
+const loadMedia = (hash) => {
+  request
+    .get(`/medias/${hash}`)
+    .then((res) => {
+      console.log(res);
+      item.value = res.data;
+    })
+    .catch((err) => {
+      console.error("ERROR", err);
+    })
+    .finally(() => {
+      pageLoading.value = false
+    });
+};
+
+const play = (hash, type) => {
+  let source = `/v1/medias/${hash}/${type}`;
+  if (navigator.userAgent.indexOf("iPhone") > -1) {
+    source = `/v1/medias/${hash}/${type}?token=${__GA}`;
+  }
+
+  player = new DPlayer({
+    container: document.getElementById('dplayer'),
+    video: {
+      url: source,
+      pic: item.value.poster,
+      type: 'customHls',
+      customType: {
+        customHls: function (video, player) {
+          const hls = new Hls({
+            xhrSetup: function (xhr, url) {
+              xhr.withCredentials = true;
+              xhr.setRequestHeader("Authorization", "Bearer " + __GA);
+            },
+          });
+          hls.loadSource(source);
+          hls.attachMedia(video);
+        },
+      },
+    }
+  });
+
+  player.play();
+
+  // if (Hls.isSupported()) {
+  //   var hls = new Hls({
+  //     xhrSetup: function (xhr, url) {
+  //       xhr.withCredentials = true;
+  //     },
+  //   });
+  //   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 buy = () => {
  // get use balance
  request
@@ -99,55 +174,6 @@ const buy = () => {

 };

-const onClickLeft = () => {
-  if (route.meta.from?.name) {
-    router.back();
-    return;
-  }
-  router.replace({
-    name: "tab.home",
-    params: {
-      tenant: route.params.tenant,
-    },
-  });
-};
-
-const loadMedia = (hash) => {
-  request
-    .get(`/medias/${hash}`)
-    .then((res) => {
-      console.log(res);
-      item.value = res.data;
-    })
-    .catch((err) => {
-      console.error("ERROR", err);
-    })
-    .finally(() => {
-      pageLoading.value = false
-    });
-};
-
-const play = (hash, type) => {
-  const player = document.getElementById("video");
-  const source = `/v1/medias/${hash}/${type}?token=${__GA}`;
-  if (Hls.isSupported()) {
-    var hls = new Hls({
-      xhrSetup: function (xhr, url) {
-        xhr.withCredentials = true;
-      },
-    });
-    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();
-    });
-  }
-};
 </script>

 <style scoped>
@@ -155,10 +181,13 @@ const play = (hash, type) => {
  padding: 1em;
 }

-#video {
+#video,
+#dplayer {
  background-color: #cccccc;
  aspect-ratio: 16 / 9;
  width: 100%;
  object-fit: fill;
+  background-size: cover;
+  background-position: center;
 }
 </style>
--- a/frontend/vite.config.js
+++ b/frontend/vite.config.js
@@ -11,7 +11,7 @@ import { defineConfig } from "vite";
 export default defineConfig({
  server: {
    proxy: {
-      '^/static': {
+      '^/poster': {
        target: 'http://localhost:9600',
        changeOrigin: true,
        // rewrite: (path) => path.replace(/^\/api/, '')
--- a/mp.code-workspace
+++ b/mp.code-workspace
@@ -13,8 +13,9 @@
 	"settings": {
 		"vue3snippets.enable-compile-vue-file-on-did-save-code": false,
 		"cSpell.words": [
+			"dplayer",
 			"qvyun"
 		],
 		"git.ignoreLimitWarning": true
 	}
-}
+}