fix: ios player

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>