上传视频成功后需要为视频做封面，如何取得？

html5 上传视频后 如何取得视频当中的片段作为视频封面？

maxmin

22619

发布于
2017-09-12

啊欧....刚做了一个这样的功能，这是总结的文章，你可以参考一下
https://segmentfault.com/a/11...

FUCKER

据我所知，那些图片都是自己截取放上面的

自己截取一个，然后用poster="图片地址"

试试这个：js 实现视频截图

测试结果：

完整代码:

<!doctype html>
<html lang="zh-CN">
    <head>
        <title>测试页</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>
    <body>
        <video id="video" controls="controls">
            <source src="movie.ogg"></source>
            <source src="movie.mp4"></source>
            您的浏览器不支持html5
        </video>
        <button id="capture">截屏</button>
        <div id="output"></div>
        <script src="https://cdn.bootcss.com/jquery/1.12.3/jquery.js"></script>
        <script>
        $(function(){
            var video, $output;
            var scale = 0.25;
            var initialize = (function() {
                $output = $('#output');
                video = $('#video').get(0);
                $('#capture').on('click', function(){
                    captureImage();
                })
            })()
            var captureImage = function(){
                var canvas = document.createElement("canvas");
                canvas.width = video.videoWidth * scale;
                canvas.height = video.videoHeight * scale;
                canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);
                var image = document.createElement('img');
                image.src = canvas.toDataURL();
                $output.prepend(image);
            }
        })
        </script>
    </body>
</html>

注意：视频必须部署在本地，否则会出现截图跨域问题，视频可以从下面的地址下载到本地
http://www.w3school.com.cn/i/...
http://www.w3school.com.cn/i/...

html5 上传视频后如何取得视频当中的片段作为视频封面？

扁平化数组转换成树形?

省市区街道数据在哪里可以下载？

两个promise问题？

Vue项目一个报错无法找到原因?

如何在JavaScript中从外部中断for循环的执行？

如何自定义设置虚线边框的样式？

Quartz如何根据cron表达式计算任务开始前发送通知的时间？

html5 上传视频后 如何取得视频当中的片段作为视频封面？

扁平化数组转换成树形?

省市区街道数据在哪里可以下载？

两个promise问题？

Vue项目一个报错无法找到原因?

如何在JavaScript中从外部中断for循环的执行？

如何自定义设置虚线边框的样式？

Quartz如何根据cron表达式计算任务开始前发送通知的时间？

html5 上传视频后如何取得视频当中的片段作为视频封面？