import VideoCapture from 'video-capture'

async test(){
    //dataURL 捕获画面的base64
    //width画面宽
    //height画面高
    let { dataURL, width, height } = await new VideoCapture("https://vjs.zencdn.net/v/oceans.mp4").capture("10%");

    document.getElementById("imgId").src = dataURL;
}

test();

使用远程视频地址

<!DOCTYPE html>
<html>
    <head>
        ...
    </head>
    <body>
        <img id="preview1" />
        <img id="preview2" />
        <img id="preview3" />
        <script src="../dist/video-capture.min.js"></script>
        <script>
            //方法1、捕获20s处的画面，并使用preview1显示出来
            new VideoCapture("https://vjs.zencdn.net/v/oceans.mp4").capture(20, "preview1");
            //方法2、捕获20s处的画面，传入img dom
            new VideoCapture("https://vjs.zencdn.net/v/oceans.mp4").capture(20, document.getElementById("preview2"));
            //方法3、捕获50%处画面
            new VideoCapture("https://vjs.zencdn.net/v/oceans.mp4").capture("50%", "preview3"));

        </script>
    </body>
</html>

使用本地视频资源

<!DOCTYPE html>
<html>
    <head>
        ...
    </head>
    <body>
        <input id="inputFile" type="file"/>
        <img id="preview"/>
        <script src="../dist/video-capture.min.js"></script>
        <script>
            document.getElementById("inputFile").onchange = function ({ target }) {
                let [file] = target.files;
                if (!/.*\.mp4$/.test(file.name)) alert("请选择mp4视频文件");
                new VideoCapture(file).capture("50%", "preview");
            }
        </script>
    </body>
</html>

3.方法&参数

3.1 构造方法 VideoCapture(uri)

uri：可以是一个远程视频链接，也可以是一个本地视频文件对象

3.2 capture(time,img)方法

time：指定时间，可以是秒数，如10，也可以是以%结尾的百分数，如'50%'
img：可以是img标签的id，或img对象，如果有指定，那么会将捕获的画面dataURL赋值给img.src

3.3 revoke() 方法

当构造方法传入的是一个本地视频资源时，在有必要的时候，可以调用revoke方法来释放资源。

Keywords

FAQs

What is video-capture?

Is video-capture popular?

Is video-capture well maintained?

Package last updated on 09 Jul 2019

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

video-capture

效果图

1.安装

2.例子

3.方法&参数

3.1 构造方法 VideoCapture(uri)

3.2 capture(time,img)方法

3.3 revoke() 方法

Keywords

Related posts

Risky Biz Podcast: Making Reachability Analysis Work in Real-World Codebases

Nx npm Packages Compromised in Supply Chain Attack Weaponizing AI CLI Tools