前端播放音频, 视频不能拖动、快进的问题

序言: 在使用 vue 配合 element-ui 进行开发时, 上传附件为音视频时, 播放过程中, 进度不能拖动的问题.

交流

在开发中, 上传一些附件的时候(PDF, MP4, image/*), 大部分都是拿取后端返回的一个路径地址进行展示; 这时基本的效果已经是实现了, 但追求细节的朋友会发现在快进的时候, 是没有这个功能的, 针对这一的一个情况, 下方有示例, 和一些解决的办法.

eg:

问题产生的原因:

后端返回的视频地址, 作为 video, audio的src属性使用的时候, 它里面的请求头是不完整的;

解决方法:

1. 后端解决

--

2. 前端解决

• 可以通过一些插件进行解决(video.js)

• 把完整的文件信息下载下来, 转成 blobUrl 赋值给 audio 或 video 的 src 进行使用.

export const downFile = (
    src: string
): Promise<{
    isVideo: boolean;
    url: string;
}> => {
    return new Promise((resolve) => {
        const xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function () {
            if (this.readyState === 4 && this.status === 200) {
                const r = xhr.getResponseHeader("Content-Disposition")!;
                resolve({
                    isVideo: r.endsWith(".mp4"),
                    url: window.URL.createObjectURL(this.response),
                });
            }
        };
        xhr.open("GET", src);
        xhr.responseType = "blob";
        xhr.send(null);
    });
};

结尾

本篇参考于下方网址

附上原创地址: 【播放音视频时不能拖动的问题】 www.bilibili.com/video/BV1xG…