Video

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

export const file = (videoFile: object | any) => {
    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;
    }
};

视频下载

/**
 * 视频下载
 * @param vidoUrl 目标文件地址
 */
export const downLoadVideo = (url: string): void => {
    fetch(url).then(async (res) => {
        return {
            name: res.url,
            blob: await res.blob()
        }
    }).then(({ blob, name }) => {
        let arr = name.split("/");
        const a = document.createElement("a");
        document.body.appendChild(a);
        a.style.display = "none";
        const url = window.URL.createObjectURL(blob);
        a.href = url;
        // a.download = "视频.mp4";
        a.download = arr[arr.length - 1];
        a.click();
        document.body.removeChild(a);
        window.URL.revokeObjectURL(url);
    });
}