diff --git a/package.json b/package.json
index 56eb21771a..444b9d1c39 100644
--- a/package.json
+++ b/package.json
@@ -52,6 +52,7 @@
     "vite-plugin-solid": "^2.3.0"
   },
   "dependencies": {
+    "@egjs/view360": "4.0.0-beta.7",
     "@github/webauthn-json": "^2.1.1",
     "@hope-ui/solid": "0.6.7",
     "@monaco-editor/loader": "^1.4.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 7938b481c4..3ce5674b66 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -5,6 +5,9 @@ settings:
   excludeLinksFromLockfile: false
 
 dependencies:
+  '@egjs/view360':
+    specifier: 4.0.0-beta.7
+    version: 4.0.0-beta.7
   '@github/webauthn-json':
     specifier: ^2.1.1
     version: 2.1.1
@@ -494,6 +497,12 @@ packages:
       to-fast-properties: 2.0.0
     dev: true
 
+  /@cfcs/core@0.0.24:
+    resolution: {integrity: sha512-feB38qu+eDk0Pggh/yR7gjaNmvUYA2uCxHP3Pz2MLE4LZ/9jPdtu8bzCSI47yTEhWyZCF5Pk698hdz8IN2mTjA==}
+    dependencies:
+      '@egjs/component': 3.0.5
+    dev: false
+
   /@crowdin/cli@3.7.10:
     resolution: {integrity: sha512-L0sjeEv4bn7LHNYsKxl2aTrah16u1ThufN0xvMMH7o53lD29llvVfAD9jVOttSl/kyQ+mMDY8GLzjPRNFdLJqQ==}
     hasBin: true
@@ -504,6 +513,26 @@ packages:
       - encoding
     dev: true
 
+  /@egjs/component@3.0.5:
+    resolution: {integrity: sha512-cLcGizTrrUNA2EYE3MBmEDt2tQv1joVP1Q3oDisZ5nw0MZDx2kcgEXM+/kZpfa/PAkFvYVhRUZwytIQWoN3V/w==}
+    dev: false
+
+  /@egjs/imready@1.4.1:
+    resolution: {integrity: sha512-JIOBs4lB7FYdsKi5uvz2j3SObX8eShtZjtqlOH41tm185aJOQZwiKBK8+V4MxzG4X6DqVhpdN8UcuVwBbElfsg==}
+    dependencies:
+      '@cfcs/core': 0.0.24
+      '@egjs/component': 3.0.5
+    dev: false
+
+  /@egjs/view360@4.0.0-beta.7:
+    resolution: {integrity: sha512-prVTTxuQ1/k59NM7G0tm58k2vPHGoaExoFr5E7MoJaSGF56Otj4okQHAxxosXH87aQLN0feZMtBlsKz0b/7zEw==}
+    dependencies:
+      '@egjs/component': 3.0.5
+      '@egjs/imready': 1.4.1
+      '@types/webxr': 0.5.19
+      gl-matrix: 3.4.3
+    dev: false
+
   /@esbuild/linux-loong64@0.14.54:
     resolution: {integrity: sha512-bZBrLAIX1kpWelV0XemxBZllyRmM6vgFQQG2GdNb+r3Fkp0FOh1NJSvekXDs7jq70k4euu1cryLMfU+mTXlEpw==}
     engines: {node: '>=12'}
@@ -846,6 +875,10 @@ packages:
     resolution: {integrity: sha512-PBjIUxZHOuj0R15/xuwJYjFi+KZdNFrehocChv4g5hu6aFroHue8m0lBP0POdK2nKzbw0cgV1mws8+V/JAcEkQ==}
     dev: false
 
+  /@types/webxr@0.5.19:
+    resolution: {integrity: sha512-4hxA+NwohSgImdTSlPXEqDqqFktNgmTXQ05ff1uWam05tNGroCMp4G+4XVl6qWm1p7GQ/9oD41kAYsSssF6Mzw==}
+    dev: false
+
   /@viselect/vanilla@3.5.0:
     resolution: {integrity: sha512-drPkEQ/0CZl/c7D0gx5lWkY6iCdbyJm6KWFJpY2oQEKEnCrW9LUdQOsbNP/RG2L8BNUaiDBmwyTTW2RYIroZhA==}
     dev: false
@@ -1659,6 +1692,10 @@ packages:
     engines: {node: '>=10'}
     dev: true
 
+  /gl-matrix@3.4.3:
+    resolution: {integrity: sha512-wcCp8vu8FT22BnvKVPjXa/ICBWRq/zjFfdofZy1WSpQZpphblv12/bOQLBC1rMM7SGOFS9ltVmKOHil5+Ml7gA==}
+    dev: false
+
   /glob-parent@5.1.2:
     resolution: {integrity: sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==}
     engines: {node: '>= 6'}
diff --git a/src/pages/home/previews/index.ts b/src/pages/home/previews/index.ts
index c44e965ab2..a878fc506c 100644
--- a/src/pages/home/previews/index.ts
+++ b/src/pages/home/previews/index.ts
@@ -84,6 +84,11 @@ const previews: Preview[] = [
     exts: ["cast"],
     component: lazy(() => import("./asciinema")),
   },
+  {
+    name: "Video360",
+    type: ObjType.VIDEO,
+    component: lazy(() => import("./video360")),
+  },
 ]
 
 export const getPreviews = (
diff --git a/src/pages/home/previews/video360.css b/src/pages/home/previews/video360.css
new file mode 100644
index 0000000000..7f01bd2348
--- /dev/null
+++ b/src/pages/home/previews/video360.css
@@ -0,0 +1,9 @@
+.view360-controls-main,
+.view360-controls-float-left,
+.view360-controls-float-right {
+  pointer-events: all !important;
+}
+
+.view360-controls-top .view360-range {
+  height: 8px !important;
+}
diff --git a/src/pages/home/previews/video360.tsx b/src/pages/home/previews/video360.tsx
new file mode 100644
index 0000000000..2daacbf27e
--- /dev/null
+++ b/src/pages/home/previews/video360.tsx
@@ -0,0 +1,68 @@
+import { Box } from "@hope-ui/solid"
+import { VideoBox } from "./video_box"
+import { createSignal, onCleanup, onMount } from "solid-js"
+import { getSettingBool, objStore } from "~/store"
+import { ObjType } from "~/types"
+import View360, { ControlBar, EquirectProjection } from "@egjs/view360"
+import "@egjs/view360/css/view360.min.css"
+import "./video360.css"
+
+const Preview = () => {
+  let videos = objStore.objs.filter((obj) => obj.type === ObjType.VIDEO)
+  if (videos.length === 0) {
+    videos = [objStore.obj]
+  }
+
+  let viewer: View360
+
+  onMount(() => {
+    const container = document.getElementById("view360-container")
+    const video = document.getElementById("view360-video")
+
+    if (container && video) {
+      viewer = new View360(container, {
+        projection: new EquirectProjection({
+          src: video,
+          video: {
+            autoplay: getSettingBool("video_autoplay"),
+          },
+        }),
+        plugins: [
+          new ControlBar({
+            pieView: { order: 0 },
+            gyroButton: { position: "top-right", order: 1 },
+            vrButton: { position: "top-right", order: 2 },
+          }),
+        ],
+      })
+    }
+  })
+
+  onCleanup(() => viewer?.destroy())
+
+  const [autoNext, setAutoNext] = createSignal(false)
+
+  return (
+    <VideoBox onAutoNextChange={setAutoNext}>
+      <Box w="$full" h="60vh" id="video360-player">
+        <Box
+          w={"100%"}
+          h={"100%"}
+          id="view360-container"
+          className="view360-container"
+        >
+          <canvas class="view360-canvas" />
+          <video
+            src={objStore.raw_url}
+            id="view360-video"
+            playsinline
+            crossOrigin="anonymous"
+            style="display: none;"
+          />
+        </Box>
+      </Box>
+    </VideoBox>
+  )
+}
+
+export default Preview