乐趣区

关于javascript:记一次OSS跨域视频截取封面图实现方案

jiezi

需要背景

经营共事 PC 端公布的视频，能够间接在视频中抉择工夫，将以后工夫的帧，作为视频的封面图。在这个过程中遇到了跨域问题，时间轴同步问题，video 标签跨域问题，前端视频缓存问题

指标成果

遇到的问题

1. 本地抉择视频能够实现截图，OSS 中的视频会爆跨域问题，无奈实现截图

本地抉择的视频是 blob 格局是没问题的，而 OSS 中抉择的视频域名和 PC 端管理系统的域名不雷同，导致呈现问题。解决办法：在 OSS 中设置跨域规定

2. 后端跨域解决之后，前端渲染的 video 组件无奈胜利执行截图办法，会报错

本地渲染的视频地址曾经被浏览器缓存，导致报错。解决办法：应用 js 创立一个 dispaly:”none” 的视频 video，咱们叫他 new_video new_video 的 URL 地址沿用 video 的视频地址加上随机数（加随机数的目标是避免被缓存）, 最重要的一点 new_video 要设置 crossOrigin 属性

3. 批改 video 的时间轴，要联动批改 new_video 的时间轴

解决办法：减少一个对 old_video 的监听办法，动静赋值

代码 

<!doctype html>
<html lang="zh-CN">
<head>
    <title>OSS 跨域视频截取封面图实现计划 </title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no,maximum-scale=1,minimum-scale=1">
</head>
<style>
    #output img {border: 1px solid red;}

    #video {width: 200px;}

    #new_video {display: none;}
</style>
<body>
<video id="video" controls="controls">
    <source id="src" src="http://cdn.domain.com/set/nice_bird.mp4">
</video>
<video id="new_video"></video>
<button id="capture"> 截取封面图 </button>
<div id="output"></div>
<script src="jquery.js"></script>
<script>
    $(function () {
        let old_video, output;
        output = document.getElementById('output');
        old_video = document.getElementById("video");
        // 监听按钮点击事件
        $('#capture').on('click', function () {captureImage();
        })

        // 获取新的视频
        let new_video = document.getElementById('new_video')
        // 获取老的视频链接地址
        let url = $("#src").attr("src")

        // 重点 为新 video 的 src 赋值 这里给 URL 减少后缀是避免浏览器对视频进行缓存，否则截图无奈胜利
        new_video.src = url + "?t=" + new Date();
        // 重点 此处新 video 的视频进度如果是 0 则无奈截取图片，随便这是一个比 0 大的数字即可
        new_video.currentTime = 0.000001

        // 重点 开启跨域反对
        new_video.crossOrigin = 'anonymous';

        // 重点 应用事件监听形式捕获事件（通过扭转老的视频播放工夫扭转新的视频播放工夫）old_video.addEventListener("timeupdate", function () {new_video.currentTime = old_video.currentTime}, false);

        // 截图函数
        let captureImage = function () {let canvas = document.createElement("canvas");
            canvas.width = new_video.videoWidth * 0.5;
            canvas.height = new_video.videoHeight * 0.5;

            console.log('宽', new_video.videoWidth, '高', new_video.videoHeight);
            // 将所截图片绘制到 canvas 上，并转化成图片
            canvas.getContext('2d').drawImage(new_video, 0, 0, canvas.width, canvas.height);
            let image = document.createElement('img');
            // 将 base64 传递给 image.src
            image.src = canvas.toDataURL();

            // 打印图片 base64 字符串
            console.log(canvas.toDataURL());
            // 增加到展现区域
            output.prepend(image);
        }
    })
</script>
</body>
</html>
退出移动版