Video

获取video链接/可以本地预览 (方法封装)

/**
 * 获取video信息
 * @param {File} videoFile 获取视频详细信息，包含视频大小、时长、名称、地址
 */
export const file = (videoFile: File) => {
    return new Promise((reponse) => {
        // 获取选择的file文件
        // 兼容设置
        window.URL = window.URL || window.webkitURL;
        // 创建本地路径的映射
        const url = window.URL.createObjectURL(videoFile);

        // 创建Audio对象
        const audioElement = new Audio(url);

        // 当视频准备完毕后触发该事件
        audioElement.addEventListener("loadedmetadata", () => {
            // 视频大小
            const size = `${(videoFile.size / 1024 / 1024).toFixed(1)}MB`;
            // 视频时长
            const duration = audioElement.duration;
            // 视频名称
            const name = videoFile.name;
            reponse({
                status: 200,
                msg: "读取成功",
                type: "video",
                data: {
                    // 视频大小
                    size,
                    // 视频时长
                    duration,
                    // 视频地址
                    url,
                    // 视频名称
                    name,
                },
            });
        });
    });
};

使用方法

await file(e.target.files[0]);

进入全屏 (全屏播放方法)

/**
 * 进入全屏 (全屏播放方法)
 * @param element html元素 <HTMLElement>
 */
export const QP = (element: HTMLElement | any): void => {
    let document = <HTMLElement | any>Document
    //此方法不可以在異步任務中執行，否則火狐無法全屏
    if (element.requestFullscreen) {
        element.requestFullscreen();
    } else if (element.mozRequestFullScreen) {
        element.mozRequestFullScreen();
    } else if (element.msRequestFullscreen) {
        element.msRequestFullscreen();
    } else if (element.oRequestFullscreen) {
        element.oRequestFullscreen();
    } else if (element.webkitRequestFullscreen) {
        element.webkitRequestFullScreen();
    } else {
        var docHtml = document.documentElement;
        var docBody = document.body;
        var videobox = element;
        var cssText = "width:100%;height:100%;overflow:hidden;";
        docHtml.style.cssText = cssText;
        docBody.style.cssText = cssText;
        videobox.style.cssText = cssText + ";" + "margin:0px;padding:0px;";
        document.IsFullScreen = true;
    }
};

退出全屏 (退出全屏播放方法)

/**
 * 退出全屏 (退出全屏播放方法)
 * @param element html元素 <HTMLElement>
 */
export const EX = (element: HTMLElement | any): void => {
    let document = <HTMLElement | any>Document
    if (document.exitFullscreen) {
        document.exitFullscreen();
    } else if (document?.msExitFullscreen) {
        document.msExitFullscreen();
    } else if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen();
    } else if (document.oRequestFullscreen) {
        document.oCancelFullScreen();
    } else if (document.webkitExitFullscreen) {
        document.webkitExitFullscreen();
    } else {
        var docHtml = document.documentElement;
        var docBody = document.body;
        var videobox = element;
        docHtml.style.cssText = "";
        docBody.style.cssText = "";
        videobox.style.cssText = "";
        document.IsFullScreen = false;
    }
};

视频下载

/**
 * fetch下载文件
 * @param url 目标文件地址
 */
export const fetchDownload = (url: string): void => {
  // 发送请求获取文件
  fetch(url).then(async (res) => {
    return {
        name: res.url,
        blob: await res.blob()
    }
  }).then(({ blob, name }) => {
    // 分割出文件名
    let arr = name.split("/");
    // 创建a标签下载文件
    const a = document.createElement("a");
    // 追加到body中
    document.body.appendChild(a);
    // 设置a标签的样式为隐藏
    a.style.display = "none";
    // 设置a标签的href属性为blob对象的URL
    const url = window.URL.createObjectURL(blob);
    // 设置a标签的href属性为blob对象的URL
    a.href = url;
    // 设置a标签的download属性为文件名
    a.download = arr[arr.length - 1];
    // 模拟点击a标签下载文件
    a.click();
    // 移除a标签
    document.body.removeChild(a);
    // 释放blob对象的URL
    window.URL.revokeObjectURL(url);
  });
}