|
@@ -4,7 +4,7 @@ import Hot1 from './Hot1'
|
|
import Hot2 from './Hot2'
|
|
import Hot2 from './Hot2'
|
|
import { otherUrl, myData } from '@/utils/http'
|
|
import { otherUrl, myData } from '@/utils/http'
|
|
import HotIcon from '@/components/HotIcon'
|
|
import HotIcon from '@/components/HotIcon'
|
|
-import { HotSpot, Krpano, Scene, View } from '@dage/krpano'
|
|
|
|
|
|
+import { HotSpot, Krpano, VideoScene, videoSceneModel, View } from '@dage/krpano'
|
|
import { KrpanoMiddleware, KrpanoMiddlewareMethods } from '@/components/KrpanoMiddleware'
|
|
import { KrpanoMiddleware, KrpanoMiddlewareMethods } from '@/components/KrpanoMiddleware'
|
|
|
|
|
|
// window.draggbleHotspotEvent = (ath: number, atv: number) => {
|
|
// window.draggbleHotspotEvent = (ath: number, atv: number) => {
|
|
@@ -24,7 +24,6 @@ function PanoVideo() {
|
|
|
|
|
|
return (
|
|
return (
|
|
<>
|
|
<>
|
|
- {/* 待完善,更换成全景视频 */}
|
|
|
|
<KrpanoMiddleware ref={middlewareIns}>
|
|
<KrpanoMiddleware ref={middlewareIns}>
|
|
<Krpano
|
|
<Krpano
|
|
className={styles.PanoVideo}
|
|
className={styles.PanoVideo}
|
|
@@ -33,31 +32,23 @@ function PanoVideo() {
|
|
middlewareIns.current?.ready()
|
|
middlewareIns.current?.ready()
|
|
}}
|
|
}}
|
|
>
|
|
>
|
|
- <Scene
|
|
|
|
|
|
+ <VideoScene
|
|
name='scene1'
|
|
name='scene1'
|
|
- previewUrl={otherUrl + 'pano/pano1.tiles/preview.jpg'}
|
|
|
|
- imageTagAttributes={{
|
|
|
|
- type: 'cube',
|
|
|
|
- tileSize: 512,
|
|
|
|
- multires: true
|
|
|
|
- }}
|
|
|
|
- images={[
|
|
|
|
- {
|
|
|
|
- tiledImageWidth: 2624,
|
|
|
|
- tiledImageHeight: 2624,
|
|
|
|
- url: otherUrl + 'pano/pano1.tiles/%s/l3/%v/l3_%s_%v_%h.jpg'
|
|
|
|
- },
|
|
|
|
- {
|
|
|
|
- tiledImageWidth: 1280,
|
|
|
|
- tiledImageHeight: 1280,
|
|
|
|
- url: otherUrl + 'pano/pano1.tiles/%s/l2/%v/l2_%s_%v_%h.jpg'
|
|
|
|
- },
|
|
|
|
|
|
+ videointerfaceXmlUrl='/skin/videointerface.xml'
|
|
|
|
+ videoplayerUrl='/plugins/videoplayer.js'
|
|
|
|
+ sourceList={[
|
|
{
|
|
{
|
|
- tiledImageWidth: 640,
|
|
|
|
- tiledImageHeight: 640,
|
|
|
|
- url: otherUrl + 'pano/pano1.tiles/%s/l1/%v/l1_%s_%v_%h.jpg'
|
|
|
|
|
|
+ res: '2000x1000',
|
|
|
|
+ url: otherUrl + 'pano/1.mp4',
|
|
|
|
+ poster: ''
|
|
}
|
|
}
|
|
]}
|
|
]}
|
|
|
|
+ playRes='2000x1000'
|
|
|
|
+ onVisibility={() => {
|
|
|
|
+ if (document.visibilityState === 'visible') {
|
|
|
|
+ videoSceneModel.play()
|
|
|
|
+ }
|
|
|
|
+ }}
|
|
>
|
|
>
|
|
<View hlookat={0} vlookat={0} fovType='MFOV' fov={120} fovMin={70} fovMax={130} />
|
|
<View hlookat={0} vlookat={0} fovType='MFOV' fov={120} fovMin={70} fovMax={130} />
|
|
{myData.visit.hot.map((item, index) => (
|
|
{myData.visit.hot.map((item, index) => (
|
|
@@ -88,7 +79,7 @@ function PanoVideo() {
|
|
/>
|
|
/>
|
|
</HotSpot>
|
|
</HotSpot>
|
|
))}
|
|
))}
|
|
- </Scene>
|
|
|
|
|
|
+ </VideoScene>
|
|
</Krpano>
|
|
</Krpano>
|
|
</KrpanoMiddleware>
|
|
</KrpanoMiddleware>
|
|
|
|
|