fix: ios player

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)
 }
 

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",

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",

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");
+  player?.destroy();
-  if (player) {
-    player.pause();
-  }
 });
 
 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>

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/, '')

mp.code-workspace

@@ -13,6 +13,7 @@
 	"settings": {
 		"vue3snippets.enable-compile-vue-file-on-did-save-code": false,
 		"cSpell.words": [
+			"dplayer",
 			"qvyun"
 		],
 		"git.ignoreLimitWarning": true