H5视频上传和播放

背景

需求场景：

后台管理系统：

（1）配置中支持上传视频、上传成功后封面缩略图展示，点击后自动播放视频；

（2）配置中支持上传多个文件；

前台系统：

（1）展示视频列表并点击播放；

（2）展示文件列表并点击下载；

说明

看需求似乎很简单，再加上本身antd-design已经封装好的Upload组件，功能强大且丰富；但是具体需求场景中还是有不少交互细节，也花了一些时间调试，为以后碰到类似场景更快速高效实现，记录和分享出来

上传视频且展示缩略图

1. 上传视频处理：

获取视频数据，并执行上传方法；一般二进制处理，可以支持各类文件格式，本质视频也是文件的一种格式；这一步其实很简单，参考Upload组件的相关实例即可，

1.  
   <Upload
2.  
   multiple={true}
3.  
   fileList={videoList}
4.  
   listType="picture"
5.  
   beforeUpload={(file) => {
6.  
   const formData = new FormData();
7.  
   formData.append('file', file, file.name);
8.  
   request(`/upload/binary`, {
9.  
   method: 'post',
10.  
    body: formData,
11.  
    }).then((res: any) => {
12.  
    setVideoList([
13.  
    ...videoList,
14.  
    {
15.  
    name: file.name,
16.  
    url: res.data,
17.  
    thumbUrl: `${res?.data}`,
18.  
    },
19.  
    ]);
20.  
    });
21.  
    }}
22.  
    className={styles['upload-list-inline']}
23.  
    >
24.  
    <Button icon={<UploadOutlined />}>上传视频</Button>
25.  
    <span className={styles['upload-tip']}>
26.  
    仅支持 rm,rmvb, wmv,avi, mpg, mpeg,mp4等格式，单个视频最大不得超过500M。
27.  
    </span>
28.  
    </Upload>

上述代码listType字段设为“picture”，实例效果如下：

1. 前台展示列表，demo代码如下：

1.  
   <div className="introduction">
2.  
   <div className="app-message-title">视频教程</div>
3.  
   {videoList.map((item: FileProps, index: number) => {
4.  
   return (
5.  
   <div key={index} onClick={() => handleVideo(item)}>
6.  
    
7.  
   <img
8.  
   className="video-icon"
9.  
   src={require("icon.png")}
10.  
    />
11.  
    {/* <a href={item.url} className="file-name">
12.  
    {item.name}
13.  
    </a> */}
14.  
    <span className="file-name">
15.  
    {item.name}
16.  
    </span>
17.  
    </div>
18.  
    );
19.  
    })}
20.  
    </div>

（1）实现代码如下：被注释掉的代码：交互效果，点击直接新开页

上传的不同尺寸，播放时按原视频的宽高：

缺点：新开页打开，不利于用户操作

（2）点击后弹窗展示，实现思路是使用antd的Modal组件，承载视频播放组件：

1.  
   <Modal
2.  
   width={curVideo.width}
3.  
   bodyStyle={{ height: curVideo.height }}
4.  
   wrapClassName="video-modal"
5.  
   footer={null}
6.  
   visible={visible}
7.  
   onCancel={() => {
8.  
   setCurVideo(undefined);
9.  
   setVisble(false);
10.  
    }}
11.  
    >
12.  
    <video src={curVideo.url} controls preload="auto" autoPlay={true} />
13.  
    </Modal>

1. 这里其实有一个问题，因为上传时不显示视频上传的像素，那么弹窗的宽高需要与视频的框高相同，所以上传的时候需要拿到视频的宽高：如何拿到视频宽高？

1.  
   <Upload
2.  
   multiple={true}
3.  
   fileList={videoList}
4.  
   listType="picture"
5.  
   beforeUpload={(file) => {
6.  
   console.log('fiel = ', file);
7.  
   const videoUrl = URL.createObjectURL(file);
8.  
   const videoObj = document.createElement("video");
9.  
   videoObj.onloadedmetadata = function () {
10.  
    URL.revokeObjectURL(videoUrl);
11.  
    console.log("JJJJJ", videoObj.videoWidth, videoObj.videoHeight); // 拿到视频的宽高
12.  
    // 执行上传的方法，获取外网路径，上传进度等
13.  
    const formData = new FormData();
14.  
    formData.append('file', file, file.name);
15.  
    request(`/upload/binary`, {
16.  
    method: 'post',
17.  
    body: formData,
18.  
    }).then((res: any) => {
19.  
     
20.  
    setVideoList([
21.  
    ...videoList,
22.  
    {
23.  
    name: file.name,
24.  
    url: res.data,
25.  
    thumbUrl: `${res?.data}`, // 缩略图图片地址
26.  
    width: videoObj.videoWidth,
27.  
    height: videoObj.videoHeight,
28.  
    },
29.  
    ]);
30.  
     
31.  
     
32.  
    });
33.  
    };
34.  
    videoObj.src = videoUrl;
35.  
    videoObj.load();
36.  
    }}
37.  
    className={styles['upload-list-inline']}
38.  
    >
39.  
    <Button icon={<UploadOutlined />}>上传视频</Button>
40.  
    <span className={styles['upload-tip']}>
41.  
    仅支持 rm,rmvb, wmv,avi, mpg, mpeg,mp4等格式，单个视频最大不得超过500M。
42.  
    </span>
43.  
    </Upload>

这样就解决了，Modal弹窗承载视频播放，Modal弹窗的宽高与视频的宽高一致；

这篇好文章是转载于：学新通技术网