diff --git a/config.json b/config.json
index b1e1b16..553af88 100644
--- a/config.json
+++ b/config.json
@@ -6,14 +6,15 @@
 		"token": "!! config your very strong token here !!",
 		"ffmpeg_threads": 1,
 		"ffmpeg_config_list": [
-			{"name": "OPUS 128k", "args": "-c:a libopus -ab 128k"},
-			{"name": "OPUS 96k", "args": "-c:a libopus -ab 96k"},
-			{"name": "OPUS 256k", "args": "-c:a libopus -ab 256k"},
-			{"name": "OPUS 320k", "args": "-c:a libopus -ab 320k"},
-			{"name": "OPUS 512k", "args": "-c:a libopus -ab 512k"},
-			{"name": "AAC 128k", "args": "-c:a aac -ab 128k"},
-			{"name": "AAC 256k", "args": "-c:a aac -ab 256k"},
-			{"name": "全损音质 32k", "args": "-c:a libopus -ab 32k"}
+			{"name": "OPUS 128k", "args": "-c:a libopus -ab 128k -vn"},
+			{"name": "OPUS 96k", "args": "-c:a libopus -ab 96k -vn"},
+			{"name": "OPUS 256k", "args": "-c:a libopus -ab 256k -vn"},
+			{"name": "OPUS 320k", "args": "-c:a libopus -ab 320k -vn"},
+			{"name": "OPUS 512k", "args": "-c:a libopus -ab 512k -vn"},
+			{"name": "AAC 128k", "args": "-c:a aac -ab 128k -vn"},
+			{"name": "AAC 256k", "args": "-c:a aac -ab 256k -vn"},
+			{"name": "全损音质 32k", "args": "-c:a libopus -ab 32k -vn"},
+			{"name": "video test", "args": "-c:a libopus -ab 128k -filter:v scale='min(640,iw)':min'(360,ih)':force_original_aspect_ratio=decrease -c:v libvpx -r 5"}
 		]
 	},
 	"tmpfs": {
diff --git a/pkg/api/handle_stream.go b/pkg/api/handle_stream.go
index 742a787..d9b098d 100644
--- a/pkg/api/handle_stream.go
+++ b/pkg/api/handle_stream.go
@@ -68,7 +68,7 @@ func (api *API) HandleGetFileStream(w http.ResponseWriter, r *http.Request) {
 	}
 	args := strings.Split(ffmpegConfig.Args, " ")
 	startArgs := []string{"-threads", strconv.FormatInt(api.APIConfig.FfmpegThreads, 10), "-i", path}
-	endArgs := []string{"-vn", "-f", "ogg", "-"}
+	endArgs := []string{"-f", "webm", "-"}
 	ffmpegArgs := append(startArgs, args...)
 	ffmpegArgs = append(ffmpegArgs, endArgs...)
 	cmd := exec.Command("ffmpeg", ffmpegArgs...)
@@ -137,7 +137,7 @@ func (api *API) HandlePrepareFileStreamDirect(w http.ResponseWriter, r *http.Req
 
 		args := strings.Split(ffmpegConfig.Args, " ")
 		startArgs := []string{"-threads", strconv.FormatInt(api.APIConfig.FfmpegThreads, 10), "-i", srcPath}
-		endArgs := []string{"-vn", "-y", objPath}
+		endArgs := []string{"-y", objPath}
 		ffmpegArgs := append(startArgs, args...)
 		ffmpegArgs = append(ffmpegArgs, endArgs...)
 		cmd := exec.Command("ffmpeg", ffmpegArgs...)
diff --git a/pkg/tmpfs/tmpfs.go b/pkg/tmpfs/tmpfs.go
index 671b4e9..7551183 100644
--- a/pkg/tmpfs/tmpfs.go
+++ b/pkg/tmpfs/tmpfs.go
@@ -17,7 +17,7 @@ type Tmpfs struct {
 }
 
 func (tmpfs *Tmpfs) GetObjFilePath(id int64, configName string) (string) {
-	return filepath.Join(tmpfs.Config.Root, strconv.FormatInt(id, 10) + "." + configName + ".ogg")
+	return filepath.Join(tmpfs.Config.Root, strconv.FormatInt(id, 10) + "." + configName + ".webm")
 }
 
 func (tmpfs *Tmpfs) GetLock(filename string) *sync.Mutex {
diff --git a/web/src/App.css b/web/src/App.css
index 893221c..a0d6b5d 100644
--- a/web/src/App.css
+++ b/web/src/App.css
@@ -100,3 +100,11 @@ dialog {
   flex-direction: row;
   flex-wrap: wrap;
 }
+.vertical {
+  display: flex;
+  flex-direction: column;
+  flex-wrap: wrap;
+}
+.warp-word {
+  overflow-wrap: anywhere;
+}
diff --git a/web/src/App.js b/web/src/App.js
index 6b0b011..ec5468a 100644
--- a/web/src/App.js
+++ b/web/src/App.js
@@ -83,14 +83,8 @@ function App() {
               path="/manage/register"
               element={<Register user={user} setUser={setUser} />}
             />
-            <Route
-              path="/manage/tags"
-              element={<Tags user={user} />}
-            />
-            <Route
-              path="/manage/tags/:id"
-              element={<EditTag user={user} />}
-            />
+            <Route path="/manage/tags" element={<Tags user={user} />} />
+            <Route path="/manage/tags/:id" element={<EditTag user={user} />} />
             <Route
               path="/manage/reviews/:id"
               element={<EditReview user={user} />}
@@ -113,16 +107,16 @@ function App() {
             />
             <Route
               path="/files/:id/review"
-              element={<ReviewPage user={user} setPlayingFile={setPlayingFile} />}
+              element={
+                <ReviewPage user={user} setPlayingFile={setPlayingFile} />
+              }
             />
           </Routes>
         </main>
-        <footer>
-          <AudioPlayer
-            playingFile={playingFile}
-            setPlayingFile={setPlayingFile}
-          />
-        </footer>
+        <AudioPlayer
+          playingFile={playingFile}
+          setPlayingFile={setPlayingFile}
+        />
       </Router>
     </div>
   );
diff --git a/web/src/component/AudioPlayer.js b/web/src/component/AudioPlayer.js
index 4f3f717..45ae91b 100644
--- a/web/src/component/AudioPlayer.js
+++ b/web/src/component/AudioPlayer.js
@@ -64,7 +64,7 @@ function AudioPlayer(props) {
   let navigate = useNavigate();
 
   return (
-    <div>
+    <footer className="vertical">
       <h5>Player status</h5>
       {props.playingFile.id && (
         <span>
@@ -111,46 +111,65 @@ function AudioPlayer(props) {
 
       <br />
 
-      <input
-        checked={loop}
-        onChange={(event) => setLoop(event.target.checked)}
-        type="checkbox"
-      />
-      <label>Loop</label>
+      <span>
+        <input
+          checked={loop}
+          onChange={(event) => setLoop(event.target.checked)}
+          type="checkbox"
+        />
+        <label>Loop</label>
 
-      <input
-        checked={raw}
-        onChange={(event) => setRaw(event.target.checked)}
-        type="checkbox"
-      />
-      <label>Raw</label>
+        <input
+          checked={raw}
+          onChange={(event) => setRaw(event.target.checked)}
+          type="checkbox"
+        />
+        <label>Raw</label>
 
-      {!raw && (
-        <span>
-          <input
-            checked={prepare}
-            onChange={(event) => setPrepare(event.target.checked)}
-            type="checkbox"
-          />
-          <label>Prepare</label>
-        </span>
-      )}
+        {!raw && (
+          <span>
+            <input
+              checked={prepare}
+              onChange={(event) => setPrepare(event.target.checked)}
+              type="checkbox"
+            />
+            <label>Prepare</label>
+          </span>
+        )}
+
+        <input
+          type="checkbox"
+          onClick={(e) => {
+            const domVideoPlayer = document.getElementById("dom-video-player");
+            if (domVideoPlayer === null) {
+              return;
+            }
+            if (e.target.checked) {
+              domVideoPlayer.style.height = "auto";
+            } else {
+              domVideoPlayer.style.height = "39px";
+            }
+          }}
+        />
+        <label>Video</label>
+      </span>
 
       {playingURL !== "" && (
-        <audio
+        <video
+          id="dom-video-player"
           controls
           autoPlay
           loop={loop}
           className="audio-player"
           src={playingURL}
-        ></audio>
+        ></video>
       )}
 
       <FfmpegConfig
         selectedFfmpegConfig={selectedFfmpegConfig}
         setSelectedFfmpegConfig={setSelectedFfmpegConfig}
       />
-    </div>
+    </footer>
   );
 }
 
diff --git a/web/src/component/FfmpegConfig.js b/web/src/component/FfmpegConfig.js
index 6759a6b..7c4a6ac 100644
--- a/web/src/component/FfmpegConfig.js
+++ b/web/src/component/FfmpegConfig.js
@@ -33,7 +33,7 @@ function FfmpegConfig(props) {
           <option key={ffmpegConfig.name}>{ffmpegConfig.name}</option>
         ))}
       </select>
-      <span>{props.selectedFfmpegConfig.args}</span>
+      <span className="warp-word">{props.selectedFfmpegConfig.args}</span>
     </div>
   );
 }