diff --git a/package.json b/package.json index 096dcb5..6dfeb68 100644 --- a/package.json +++ b/package.json @@ -23,6 +23,7 @@ "sass": "^1.79.4", "swiper": "^11.1.14", "tailwindcss": "^3.4.13", - "typescript": "^5.6.2" + "typescript": "^5.6.2", + "hls.js": "^1.4.0" } } diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index f1b9e84..4bca982 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -29,6 +29,9 @@ importers: astro: specifier: ^4.15.9 version: 4.15.9(rollup@4.22.5)(sass@1.79.4)(typescript@5.6.2) + hls.js: + specifier: ^1.4.0 + version: 1.5.15 nanostores: specifier: ^0.11.3 version: 0.11.3 @@ -1178,6 +1181,9 @@ packages: hastscript@8.0.0: resolution: {integrity: sha512-dMOtzCEd3ABUeSIISmrETiKuyydk1w0pa+gE/uormcTpSYuaNJPbX1NU3JLyscSLjwAQM8bWMhhIlnCqnRvDTw==} + hls.js@1.5.15: + resolution: {integrity: sha512-6cD7xN6bycBHaXz2WyPIaHn/iXFizE5au2yvY5q9aC4wfihxAr16C9fUy4nxh2a3wOw0fEgLRa9dN6wsYjlpNg==} + html-escaper@3.0.3: resolution: {integrity: sha512-RuMffC89BOWQoY0WKGpIhn5gX3iI54O6nRA0yC124NYVtzjmFWBIiFd8M0x+ZdX0P9R4lADg1mgP8C7PxGOWuQ==} @@ -3469,6 +3475,8 @@ snapshots: property-information: 6.5.0 space-separated-tokens: 2.0.2 + hls.js@1.5.15: {} + html-escaper@3.0.3: {} html-void-elements@3.0.0: {} diff --git a/public/videos/PV04_landscape/PV04_landscape-00001.ts b/public/videos/PV04_landscape/PV04_landscape-00001.ts new file mode 100644 index 0000000..1658c52 Binary files /dev/null and b/public/videos/PV04_landscape/PV04_landscape-00001.ts differ diff --git a/public/videos/PV04_landscape/PV04_landscape-00002.ts b/public/videos/PV04_landscape/PV04_landscape-00002.ts new file mode 100644 index 0000000..53814e5 Binary files /dev/null and b/public/videos/PV04_landscape/PV04_landscape-00002.ts differ diff --git a/public/videos/PV04_landscape/PV04_landscape.m3u8 b/public/videos/PV04_landscape/PV04_landscape.m3u8 new file mode 100644 index 0000000..7f2a2e0 --- /dev/null +++ b/public/videos/PV04_landscape/PV04_landscape.m3u8 @@ -0,0 +1,10 @@ +#EXTM3U +#EXT-X-VERSION:3 +#EXT-X-ALLOW-CACHE:YES +#EXT-X-TARGETDURATION:10 +#EXT-X-MEDIA-SEQUENCE:0 +#EXTINF:10.000000, +PV04_landscape-00001.ts +#EXTINF:8.125000, +PV04_landscape-00002.ts +#EXT-X-ENDLIST diff --git a/src/pages/_views/00-Index.tsx b/src/pages/_views/00-Index.tsx index 7335480..521b036 100644 --- a/src/pages/_views/00-Index.tsx +++ b/src/pages/_views/00-Index.tsx @@ -1,4 +1,4 @@ -import React, {useEffect, useState} from "react"; +import React, {useEffect, useState, useRef} from "react"; import {useStore} from "@nanostores/react" import type {HeroActionButtonProps} from "../../_types/RootPageViews.ts" import {viewIndex} from "../../components/store/rootLayoutStore.ts" @@ -6,6 +6,7 @@ import {directions} from "../../components/store/lineDecoratorStore" import arknightsConfig from "../../../arknights.config.tsx"; import PortraitBottomGradientMask from "../../components/PortraitBottomGradientMask"; import {readyToTouch} from "../../components/store/rootLayoutStore.ts" +import Hls from 'hls.js'; function HeroActionButton({icon, label, subLabel, target, href, className}: HeroActionButtonProps) { return (null); + const [hls, setHls] = useState(null); + + useEffect(() => { + if (videoRef.current) { + if (Hls.isSupported()) { + const newHls = new Hls(); + newHls.loadSource('/videos/PV04_landscape/PV04_landscape.m3u8'); + newHls.attachMedia(videoRef.current); + newHls.on(Hls.Events.MANIFEST_PARSED, () => { + setVideoLoaded(true); + if ($viewIndex === 0 && $readyToTouch) { + videoRef.current?.play(); + } + }); + setHls(newHls); + } else if (videoRef.current.canPlayType('application/vnd.apple.mpegurl')) { + videoRef.current.src = '/videos/PV04_landscape/PV04_landscape.m3u8'; + videoRef.current.addEventListener('loadedmetadata', () => { + setVideoLoaded(true); + if ($viewIndex === 0 && $readyToTouch) { + videoRef.current?.play(); + } + }); + } + } + + return () => { + if (hls) { + hls.destroy(); + } + }; + }, []); useEffect(() => { const isActive = $viewIndex === 0 && $readyToTouch - if (isActive) directions.set({top: false, right: true, bottom: true, left: false}) + if (isActive) { + directions.set({top: false, right: true, bottom: true, left: false}) + videoRef.current?.play(); + } else { + videoRef.current?.pause(); + } setActive(isActive) }, [$viewIndex, $readyToTouch]) - + // TODO: 使用m3u8 return
- {/* TODO: