视频播放添加倍数

package-lock.json

@@ -21,6 +21,7 @@
         "react": "^18.2.0",
         "react-cookie": "^6.1.1",
         "react-dom": "^18.2.0",
+        "react-player": "^2.16.0",
         "react-router-dom": "^6.14.2",
         "react-scripts": "5.0.1",
         "web-vitals": "^2.1.4"
@@ -14552,6 +14553,11 @@
       "resolved": "https://registry.npmmirror.com/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
       "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg=="
     },
+    "node_modules/load-script": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmmirror.com/load-script/-/load-script-1.0.0.tgz",
+      "integrity": "sha512-kPEjMFtZvwL9TaZo0uZ2ml+Ye9HUMmPwbYRJ324qF9tqMejwykJ5ggTyvzmrbBeapCAbk98BSbTeovHEEP1uCA=="
+    },
     "node_modules/loader-runner": {
       "version": "4.3.0",
       "resolved": "https://registry.npmmirror.com/loader-runner/-/loader-runner-4.3.0.tgz",
@@ -14703,6 +14709,11 @@
         "node": ">= 4.0.0"
       }
     },
+    "node_modules/memoize-one": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmmirror.com/memoize-one/-/memoize-one-5.2.1.tgz",
+      "integrity": "sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q=="
+    },
     "node_modules/merge-descriptors": {
       "version": "1.0.1",
       "resolved": "https://registry.npmmirror.com/merge-descriptors/-/merge-descriptors-1.0.1.tgz",
@@ -17760,11 +17771,31 @@
       "resolved": "https://registry.npmmirror.com/react-error-overlay/-/react-error-overlay-6.0.11.tgz",
       "integrity": "sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg=="
     },
+    "node_modules/react-fast-compare": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmmirror.com/react-fast-compare/-/react-fast-compare-3.2.2.tgz",
+      "integrity": "sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ=="
+    },
     "node_modules/react-is": {
       "version": "17.0.2",
       "resolved": "https://registry.npmmirror.com/react-is/-/react-is-17.0.2.tgz",
       "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
     },
+    "node_modules/react-player": {
+      "version": "2.16.0",
+      "resolved": "https://registry.npmmirror.com/react-player/-/react-player-2.16.0.tgz",
+      "integrity": "sha512-mAIPHfioD7yxO0GNYVFD1303QFtI3lyyQZLY229UEAp/a10cSW+hPcakg0Keq8uWJxT2OiT/4Gt+Lc9bD6bJmQ==",
+      "dependencies": {
+        "deepmerge": "^4.0.0",
+        "load-script": "^1.0.0",
+        "memoize-one": "^5.1.1",
+        "prop-types": "^15.7.2",
+        "react-fast-compare": "^3.0.1"
+      },
+      "peerDependencies": {
+        "react": ">=16.6.0"
+      }
+    },
     "node_modules/react-refresh": {
       "version": "0.11.0",
       "resolved": "https://registry.npmmirror.com/react-refresh/-/react-refresh-0.11.0.tgz",
@@ -19977,16 +20008,16 @@
       }
     },
     "node_modules/typescript": {
-      "version": "5.5.4",
+      "version": "4.9.5",
-      "resolved": "https://registry.npmmirror.com/typescript/-/typescript-5.5.4.tgz",
+      "resolved": "https://registry.npmmirror.com/typescript/-/typescript-4.9.5.tgz",
-      "integrity": "sha512-Mtq29sKDAEYP7aljRgtPOpTvOfbwRWlS6dPRzwjdE+C0R4brX/GUyhHSecbHMFLNBLcJIPt9nl9yG5TZ1weH+Q==",
+      "integrity": "sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==",
       "peer": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
       },
       "engines": {
-        "node": ">=14.17"
+        "node": ">=4.2.0"
       }
     },
     "node_modules/unbox-primitive": {

package.json

@@ -16,6 +16,7 @@
     "react": "^18.2.0",
     "react-cookie": "^6.1.1",
     "react-dom": "^18.2.0",
+    "react-player": "^2.16.0",
     "react-router-dom": "^6.14.2",
     "react-scripts": "5.0.1",
     "web-vitals": "^2.1.4"

src/components/VideoPlayer/index.js

@@ -0,0 +1,17 @@
+import React, { useState } from "react";
+import { Select } from "antd";
+import ReactPlayer from "react-player";
+export default function VideoPlayer({url,key,style}) {
+  const [rate, setRate] = useState(1);
+  return (
+    <div key={key} >
+      <ReactPlayer playbackRate={rate} url={url} width={150} controls style={style}/>
+      <Select onChange={(e) => setRate(e)} value={rate}>
+        <Select.Option value={1}>1x</Select.Option>
+        <Select.Option value={2}>2x</Select.Option>
+        <Select.Option value={3}>3x</Select.Option>
+        <Select.Option value={5}>5x</Select.Option>
+      </Select>
+    </div>
+  );
+}

src/components/VideoUploader/index.jsx

@@ -1,6 +1,6 @@
 import React, { useState } from "react";
 import { uploadVideo } from "../../utils/upload";
-
+import VideoPlayer from '../VideoPlayer';
 const VideoUploader = ({ setIds }) => {
   const [selectedVideos, setSelectedVideos] = useState([]);
   const [uploading, setUploading] = useState(false);
@@ -64,17 +64,12 @@ const VideoUploader = ({ setIds }) => {
       <div style={{ display: "flex", flexWrap: "wrap" }}>
         {selectedVideos.map((video, index) => (
           <div key={index} style={{ margin: "5px" }} className="relative">
-            <video
+              <VideoPlayer url={video.videoUrl} style={{
-              controls
-              src={video.videoUrl}
-              alt={`视频 ${index + 1}`}
-              style={{
                 width: "100px",
                 height: "100px",
                 objectFit: "cover",
                 borderRadius: "8px",
-              }}
+              }}/>
-            />
             {video.uploadStatus === "success" && (
               <p className="absolute top-0 left-0 text-green-400 font-bold bg-black/50 flex w-full h-full items-center justify-center rounded-lg">
                 上传成功

src/pages/CommentsReview/index.jsx

@@ -7,7 +7,7 @@ import {
   useNavigate,
   useLocation,
 } from "react-router-dom";
-
+import VideoPlayer from '../../components/VideoPlayer';
 const CommentsReviewContent = (props) => {
   const current = props.current;
   //表头
@@ -58,7 +58,7 @@ const CommentsReviewContent = (props) => {
                     style={{ marginBottom: 10 }}
                   />
                 ) : (
-                  <video key={item.url} src={item.url} width={150} controls />
+                  <VideoPlayer url={item.url}/>
                 )
               )
             : "无"}

src/pages/CreateAndEditPost/index.jsx

@@ -3,7 +3,7 @@ import { Form, Input, Table, Image, Space, Button, Modal, message } from "antd";
 import baseRequest from "../../utils/baseRequest";
 import ImageUploader from "../../components/ImageUploader";
 import VideoUploader from "../../components/VideoUploader";
-
+import VideoPlayer from '../../components/VideoPlayer';
 const CreateAndEditPostContent = (props) => {
   const { TextArea } = Input;
   //表头
@@ -46,7 +46,7 @@ const CreateAndEditPostContent = (props) => {
             />
           ))}
           {data?.videos?.map((item, index) => (
-            <video key={index} src={item.urls[0]} width={150} controls />
+            <VideoPlayer key={index} url={item.urls[0]}/>
           ))}
         </div>
       ),
@@ -541,12 +541,9 @@ const CreateAndEditPostContent = (props) => {
             {defaultMedia.video_ids.length !== 0 && (
               <div className="flex flex-row mt-4">
                 <div className="relative">
-                  <video
+                  <div className="mr-auto">
-                    src={defaultMedia.videos[0].urls[0]}
+                  <VideoPlayer url={defaultMedia.videos[0].urls[0]}/>
-                    width={150}
+                  </div>
-                    controls
-                    className="mr-auto"
-                  />
                   <Button
                     className="absolute top-0 left-0 w-full"
                     danger

src/pages/DeletedPostReview/index.jsx

@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from "react";
 import { Form, Input, Table, Image, Space, Button, Modal, message } from "antd";
 import baseRequest from "../../utils/baseRequest";
-
+import VideoPlayer from '../../components/VideoPlayer';
 export default function DeletedPostReview() {
   //表头
   const columns = [
@@ -43,7 +43,7 @@ export default function DeletedPostReview() {
             />
           ))}
           {data?.videos?.map((item, index) => (
-            <video key={index} src={item.urls[0]} width={150} controls />
+            <VideoPlayer key={index} url={item.urls[0]}/>
           ))}
         </div>
       ),

src/pages/EditSpacePost/index.jsx

@@ -4,7 +4,7 @@ import baseRequest from "../../utils/baseRequest";
 import ImageUploader from "../../components/ImageUploader";
 import VideoUploader from "../../components/VideoUploader";
 import { useSearchParams } from "react-router-dom";
-
+import VideoPlayer from '../../components/VideoPlayer';
 const EditSpacePostContent = (props) => {
   const { TextArea } = Input;
   const [searchParams, setSearchParams] = useSearchParams();
@@ -59,7 +59,7 @@ const EditSpacePostContent = (props) => {
               <Image key={index} src={item.urls[0]} width={100} />
             ))}
             {data.media.videos.map((item, index) => (
-              <video key={index} src={item.urls[0]} width={150} controls />
+              <VideoPlayer key={index} url={item.urls[0]}/>
             ))}
           </div>
         </div>
@@ -509,12 +509,9 @@ const EditSpacePostContent = (props) => {
             {defaultMedia.video_ids.length !== 0 && (
               <div className="flex flex-row mt-4">
                 <div className="relative">
-                  <video
+                  <div className="mr-auto" >
-                    src={defaultMedia.videos[0].urls[0]}
+                  <VideoPlayer url={defaultMedia.videos[0].urls[0]}/>
-                    width={150}
+                  </div>
-                    controls
-                    className="mr-auto"
-                  />
                   <Button
                     className="absolute top-0 left-0 w-full"
                     danger

src/pages/Feedback/index.jsx

@@ -8,7 +8,7 @@ import {
   useLocation,
 } from "react-router-dom";
 import baseRequest from "../../utils/baseRequest";
-
+import VideoPlayer from '../../components/VideoPlayer';
 const FeedbackContent = (props) => {
   const { TextArea } = Input;
   const current = props.current;
@@ -44,7 +44,7 @@ const FeedbackContent = (props) => {
             />
           ))}
           {data.videos?.map((item, index) => (
-            <video key={index} src={item.urls[0]} width={150} controls />
+            <VideoPlayer key={index} url={item.urls[0]}/>
           ))}
         </div>
       ),

src/pages/GoodsReview/index.jsx

@@ -7,7 +7,7 @@ import {
   useNavigate,
   useLocation,
 } from "react-router-dom";
-
+import VideoPlayer from '../../components/VideoPlayer';
 const GoodsReviewContent = (props) => {
   const { TextArea } = Input;
   const current = props.current;
@@ -49,7 +49,7 @@ const GoodsReviewContent = (props) => {
                     style={{ marginBottom: 10 }}
                   />
                 ) : (
-                  <video key={item.url} src={item.url} width={150} controls />
+                  <VideoPlayer key={item.url}  url={item.url} width={150} />
                 )
               )
             : "无"}

src/pages/MediaReview/index.jsx

@@ -7,7 +7,7 @@ import {
   useNavigate,
   useLocation,
 } from "react-router-dom";
-
+import VideoPlayer from '../../components/VideoPlayer';
 const MediaReviewContent = (props) => {
   const { TextArea } = Input;
   const current = props.current;
@@ -59,7 +59,7 @@ const MediaReviewContent = (props) => {
                     style={{ marginBottom: 10 }}
                   />
                 ) : (
-                  <video key={item.url} src={item.url} width={150} controls />
+                  <VideoPlayer key={item.url}  url={item.url} width={150} />
                 )
               )
             : "无"}

src/pages/PostMachineReview/index.jsx

@@ -8,7 +8,7 @@ import {
   useLocation,
 } from "react-router-dom";
 import baseRequest from "../../utils/baseRequest";
-
+import VideoPlayer from '../../components/VideoPlayer';
 const PostMachineReviewContent = (props) => {
   const { TextArea } = Input;
   const current = props.current;
@@ -47,7 +47,7 @@ const PostMachineReviewContent = (props) => {
               <Image key={index} src={item.urls[0]} width={100} />
             ))}
             {data.media?.videos?.map((item, index) => (
-              <video key={index} src={item.urls[0]} width={150} controls />
+              <VideoPlayer key={index}  url={item.urls[0]} width={150} />
             ))}
           </div>
         </div>
@@ -68,7 +68,7 @@ const PostMachineReviewContent = (props) => {
               <Image key={index} src={item.urls[0]} width={100} />
             ))}
             {data.media?.videos?.map((item, index) => (
-              <video key={index} src={item.urls[0]} width={150} controls />
+              <VideoPlayer key={index}  url={item.urls[0]} width={150} />
             ))}
           </div>
         </div>

src/pages/StreamerInformation/index.jsx

@@ -13,7 +13,7 @@ import Modal from "../../components/Modal";
 import VideoUploader from "../../components/VideoUploader";
 import ImageUploader from "../../components/ImageUploader";
 import baseRequest from "../../utils/baseRequest";
-
+import VideoPlayer from '../../components/VideoPlayer';
 //tab内容
 const StreamerInformationContent = () => {
   const { TextArea } = Input;
@@ -120,7 +120,7 @@ const StreamerInformationContent = () => {
           dataIndex: "displayVideo",
           key: "displayVideo",
           render: (data) => (
-            <video src={data[0].urls[0]} width={150} controls />
+            <VideoPlayer  url={data[0].urls[0]} width={150} />
           ),
         };
       case "displayGallery":
@@ -753,11 +753,7 @@ const StreamerInformationContent = () => {
                     </p>
                     {defaultMedia.displayVideo.length !== 0 && (
                       <div className="relative">
-                        <video
+                        <VideoPlayer  url={defaultMedia.displayVideo[0].urls[0]} width={150} />
-                          src={defaultMedia.displayVideo[0].urls[0]}
-                          width={150}
-                          controls
-                        />
                         <Button
                           className="absolute top-0 left-0 w-full"
                           danger

src/pages/StreamerInformationCompleteNew/index.jsx

@@ -8,7 +8,7 @@ import {
   useLocation,
 } from "react-router-dom";
 import baseRequest from "../../utils/baseRequest";
-
+import VideoPlayer from '../../components/VideoPlayer';
 const JoinContent = (props) => {
   const { TextArea } = Input;
   const current = props.current;
@@ -104,7 +104,7 @@ const JoinContent = (props) => {
       title: "封面视频",
       dataIndex: "displayVideo",
       key: "displayVideo",
-      render: (data) => <video src={data[0].urls[0]} width={150} controls />,
+      render: (data) => <VideoPlayer  url={data[0].urls[0]} width={150} />,
     },
     {
       title: "相册",

src/pages/StreamerJoin/index.jsx

@@ -1,5 +1,5 @@
 import React, { useState, useRef, useEffect } from "react";
-import { Form, Input, Button, Space, Table, Menu, Image } from "antd";
+import { Form, Input, Button, Space, Table, Menu, Image, Select } from "antd";
 import {
   Routes,
   Route,
@@ -8,7 +8,7 @@ import {
   useLocation,
 } from "react-router-dom";
 import baseRequest from "../../utils/baseRequest";
-
+import VideoPlayer from "../../components/VideoPlayer"
 const JoinContent = (props) => {
   const { TextArea } = Input;
   const current = props.current;
@@ -133,7 +133,7 @@ const JoinContent = (props) => {
       title: "封面视频",
       dataIndex: "displayVideo",
       key: "displayVideo",
-      render: (data) => <video src={data} width={150} controls />,
+      render: (data) => <VideoPlayer url={data}/>,
     },
     {
       title: "相册",

src/pages/StreamerVideoMachineReview/index.jsx

@@ -8,7 +8,7 @@ import {
   useLocation,
 } from "react-router-dom";
 import baseRequest from "../../utils/baseRequest";
-
+import VideoPlayer from '../../components/VideoPlayer';
 const StreamerVideoMachineReviewContent = (props) => {
   const { TextArea } = Input;
   const current = props.current;
@@ -48,7 +48,7 @@ const StreamerVideoMachineReviewContent = (props) => {
       render: (data) => (
         <div className="flex flex-wrap gap-1">
           {data?.map((item, index) => (
-            <video key={index} src={item.urls[0]} width={150} controls />
+            <VideoPlayer  url={item.urls[0]}width={150}/>
           ))}
         </div>
       ),
@@ -60,7 +60,7 @@ const StreamerVideoMachineReviewContent = (props) => {
       render: (data) => (
         <div className="flex flex-wrap gap-1">
           {data?.map((item, index) => (
-            <video key={index} src={item.urls[0]} width={150} controls />
+            <VideoPlayer key={index}  url={item.urls[0]} width={150} />
           ))}
         </div>
       ),

src/pages/TopPosts/index.jsx

@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from "react";
 import { Form, Input, Table, Image, Space, Button, Modal, message } from "antd";
 import baseRequest from "../../utils/baseRequest";
-
+import VideoPlayer from '../../components/VideoPlayer';
 const TopPostsContent = (props) => {
   //表头
   const columns = [
@@ -43,7 +43,7 @@ const TopPostsContent = (props) => {
             />
           ))}
           {data?.videos?.map((item, index) => (
-            <video key={index} src={item.urls[0]} width={150} controls />
+            <VideoPlayer key={index}  url={item.urls[0]} width={150} />
           ))}
         </div>
       ),

src/pages/ZonePostMachineReview/index.jsx

@@ -8,7 +8,7 @@ import {
   useLocation,
 } from "react-router-dom";
 import baseRequest from "../../utils/baseRequest";
-
+import VideoPlayer from '../../components/VideoPlayer';
 const ZonePostMachineReviewContent = (props) => {
   const { TextArea } = Input;
   const current = props.current;
@@ -52,7 +52,7 @@ const ZonePostMachineReviewContent = (props) => {
               <Image key={index} src={item.urls[0]} width={100} />
             ))}
             {data.media.videos.map((item, index) => (
-              <video key={index} src={item.urls[0]} width={150} controls />
+              <VideoPlayer key={index}  url={item.urls[0]} width={150} />
             ))}
           </div>
         </div>