H5 Video截取第一帧 Canvas 动态视频渲染、截取

Html

Css


    
    视频播放器-VIDEO



    
        
            
            获取当前帧到-IMG
        
        
            
            视频同步渲染到-CANVAS

html,body {
	width:100%;
	height:100%;
	text-align:center;
}
li {
	position:relative;
	display:inline-block;
	list-style:none;
}
canvas,img {
	width:400px;
	height:220px;
	border:1px solid darkgray;
}
button {
	padding:6px 20px;
	margin:6px 3px;
}

(function() {

var video = document.getElementById("video");
    var canvas = document.getElementById("canvas");
    var interval = null;

//截取视频画面
    var CaptureFirstFrame = function() {

this.CaptureVideo = function(img, rsy, bbg) {
            //canvas 缩放比率
            this.scale = 1;

//创建canvas元素
            this.canvas = document.createElement("canvas");

//设置canvas画布大小
            this.canvas.width = canvas.width = video.videoWidth * this.scale;
            this.canvas.height = canvas.height = video.videoHeight * this.scale;

//设置canvas画布内容、位置
            this.canvas.getContext('2d').drawImage(video, 0, 0, this.canvas.width, this.canvas.height);

//注：
            /*
             * canvas.toDataURL("image/png", 1) 方法可能会出错！！！
             * 因为 【 如果视频文件所在的 域 和 当前index.html页面所在域不同，就会出现跨域传输的问题】，【及便是给img标签加上crossOrigin': 'anonymous' 也没用！】
             * 所以 请将 视频文件 和 当前index.html页面放在同一个域中，才能正常运行。
             */

if (img) {
                $('#rendering-img').attr({
                    'crossOrigin': 'anonymous',
                    'src': this.canvas.toDataURL("image/png", 1)
                });
            };

if (rsy) {
                canvas.getContext('2d').drawImage(video, 0, 0, this.canvas.width, this.canvas.height);
            };

if (bbg) {
                $(document.body).css('background-image', 'url(' + this.canvas.toDataURL("image/png", 1) + ')');
            };
        }
    };

//打开全屏方法
    CaptureFirstFrame.prototype.openFullscreen = function(element) {
        if (element.requestFullscreen) {
            element.requestFullscreen();
        } else if (element.mozRequestFullScreen) {
            element.mozRequestFullScreen();
        } else if (element.msRequestFullscreen) {
            element.msRequestFullscreen();
        } else if (element.webkitRequestFullscreen) {
            element.webkitRequestFullScreen();
        }
    };

var V = new CaptureFirstFrame();

//监听视频加载完成时 获取第一帧
    video.addEventListener('loadeddata', function() {
        V.CaptureVideo(true);
    }, false);

//监听视频播放时
    video.addEventListener('play', function() {
        //播放时
    }, false);

//监听视频暂停时
    video.addEventListener('pause', function() {
        clearInterval(interval);
    }, false);

//视频播放
    document.getElementById("video-play-btn").addEventListener('click', function() {
        video.play();
    }, false);

//视频暂停
    document.getElementById("video-pause-btn").addEventListener('click', function() {
        video.pause();
    }, false);

//音量增大
    document.getElementById("video-volumed-btn").addEventListener('click', function() {
        (video.volume > 1 || video.volume == 1) ? video.volume = 1: video.volume = video.volume + 0.1;
        console.log(video.volume)
    }, false);

//音量增大
    document.getElementById("video-volumex-btn").addEventListener('click', function() {
        (video.volume < 0.2 || video.volume == 0) ? video.volume = 0: video.volume = video.volume - 0.1;
        console.log(video.volume)
    }, false);

//视频全屏
    document.getElementById("fullscreen-btn").addEventListener('click', function() {
        V.openFullscreen(video);
    }, false);

//获取当前帧
    document.getElementById("get-current-btn").addEventListener('click', function() {
        V.CaptureVideo(true);
    }, false);

//视频同步渲染
    document.getElementById("rendering-btn").addEventListener('click', function() {
        clearInterval(interval);
        interval = window.setInterval(function() {
            V.CaptureVideo(false, true);
        }, 1);
    }, false);

//渲染到body背景
    document.getElementById("body-bg-btn").addEventListener('click', function() {
        clearInterval(interval);
        interval = window.setInterval(function() {
            V.CaptureVideo(false, false, true);
        }, 1);
    }, false);

})();

↑上面代码改变，会自动显示代码结果 jQuery调用版本：2.0.0

立即下载

H5 Video截取第一帧 Canvas 动态视频渲染、截取



代码描述：canvas动态获取视频第一帧， canvas动态视频渲染，获取html5的video的第一帧作为播放前的图片。

前言：
在Web开发过程中，由于现在的新媒体技术、资源、客户体验、需求等也越来越广、多、高，作为HTML5中较为重要的新媒体video视频API，也是用得非常之多。比如之前有个项目要在微信中做直播（半屏）播放（rtmp, m3u8等视频流），在IOS手机还好（听说ios手机微信没那么大的操控权限），而在Android手机下（Android系统毕竟是开源产品），只要在微信X5内核浏览器中播放视频就会自动全屏，而且z-index层级也是最高的（当然以qq.什么的域名的视频就不全屏，这是腾讯自已的东西，爱怎么搞就怎么搞咯！我们第三方开发者也没办法，后来他们又搞了一个同层策略在video标签中加上 x5-video-player-type="h5" 属性，然而还是有一堆这那样的问题），然后不能发东西，打字聊天等【如有朋友已经解决的情况下，还请多多指教，在此先谢过了！！！】，还有前两天有个项目就用到了, 其中有个需求就是要获取html5的video视频第一帧作为播放前的图片，还有自定义控制相关播放按扭等等。所以就和大家一起分享。如有更好解决办法的朋友，欢迎指导！
原理：
主要是靠canvas中的
canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);
这个方法可以根据图片，视频等进行绘制图片（也可反复重绘），而
canvas.toDataURL("image/png", 1)
可以得到canvas所绘制的图像（Base64）。无论是抓取图片或动态加载视频都一样，其区别就在于：如果是抓取（图片）一帧就是只获取一次
canvas.toDataURL("image/png", 1)
而如果是加载视频的话就设置一个定时器不停的canvas.toDataURL("image/png", 1)抓取每帧的画面。
最后将其添加到Canvas画布, img标签，甚至div、body等标签元素的src属性或 url背景里面都是可以的 [在这里用了 img、canvas 以及body] 这3个标签来做的实例。
问题：
方法虽然好用但是canvas.toDataURL("image/png", 1)；有一个问题就是不能跨域获取，简间来说就是所抓取的视频文件和执行抓取的html文件页面要在同一个域里才行。还有就是当Canvas所渲染元素如Canvas画布, img标签，div标签、body 标签等太多了的情况下，页面就会出现卡顿现象。
解决办法：
第一个toDataURL("image/png", 1)跨域问题，我在网上找了好多办法，如：
image.setAttribute('crossOrigin', 'anonymous');
等都不管用。最后就不跨域，把要抓取的视频文件和执行抓取的html文件页面都放在同一个域名下。【如有朋友已经解决的情况下，还请多多指教，在此先谢过了！！！】
问题2
渲染元素太多，有卡顿现象，经测试将toDataURL("image/png", 1)输出的图像作为背景的形式给元素添加稍微好点，但实在多了也还是会卡顿的（当然这也和每个人所使用的电脑性能也有点关系的）。
代码说明：
1、在代码中已经有非常详细的注释和说明。
2、该功能除jQuery以外，没有使用其他任何插件。
3、如在使用时遇到上而所说toDataURL("image/png", 1)跨域问题，请将资源放在同一域名下再试。

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

沐枫自然

相关代码

H5 Video截取第一帧 Canvas 动态视频渲染、截取

前言：

原理：

问题：

解决办法：

代码说明：

最新