JS实现H5 Video视频某帧作为封面图

黑夜不再黑☞z

于 2024-06-04 09:39:18 发布

阅读量401

点赞数 2

分类专栏：前端技术文章标签： javascript 音视频前端

本文链接：https://blog.csdn.net/i_am_xiaobai/article/details/139431259

版权

前端技术专栏收录该内容

1 篇文章 0 订阅

订阅专栏

 					{
                        field: 'previewImage',
                        title: '预览图',
                        formatter: function(value, row, index) {
                            return '<canvas id="previewCanvas' + row.id + '" width="90" height="60" onclick="playVideo(\'' + row.videoUrl + '\')" style="cursor: pointer;"></canvas>';
                        }
                    },

		// 在表格初始化之后处理预览图
        $(document).on('load-success.bs.table', function (e, data) {
            data.rows.forEach(function (row) {
                generatePreviewImage(row.id, row.videoUrl);
            });
        });

        function generatePreviewImage(id, videoUrl) {
            var canvas = document.getElementById('previewCanvas' + id);
            var context = canvas.getContext('2d');
            var video = document.createElement('video');
            video.crossOrigin = "anonymous";
            video.src = 'http://localhost:8777/' + prefix + '/proxy?url=' + encodeURIComponent(videoUrl);

            video.addEventListener('loadeddata', function() {
                video.currentTime = 5;
            });

            video.addEventListener('seeked', function() {
                context.drawImage(video, 0, 0, canvas.width, canvas.height);
            });
        }