HTML5与CSS3技术概述
HTML5和CSS3可是网页设计的神器！它们能帮助我们做出更炫酷、功能更强的页面，这主要得归功于HTML5对新功能的支持，比如视频、音频等等；以及它改善了文档的结构和可读性。再说说CSS3，有了这个，我们就可以玩出更多花样来！网站变得更活泼有趣，让用户忍不住多看几眼。那么，今天就让我来给大家介绍一下如何用HTML5和CSS3仿照优酷视频那样截图的功能，看看它是怎么做到的，以及关键步骤有哪些。
视频截图功能介绍
每个视频网站上都有上传视频就得配张图片当封面的设定，为了招揽大家点开看，但如果你学会了用HTML5和CSS3代码去实现优酷那个视频截图功能的话，就能在用户上传影片之后自动给它截个图然后放在网页上！这样一来，用户就可以省下不少时间，同时也让整个页面更有趣、更吸引人呐~
核心代码解析
_canvas = document.createElement("canvas");
_ctx = _canvas.getContext("2d");
_ctx.fillStyle = '#ffffff';
_ctx.fillRect(0, 0, _videoWidth, _videoWidth);
_ctx.drawImage(_video, 0, 0, _videoWidth, _videoHeight, 0, 0, _videoWidth, _videoHeight);
var dataUrl = _canvas.toDataURL("image/png");
咱就来聊聊怎样弄个类似于优酷视频截图功能，关键环节就是用Canvas来画视频截图，然后就像听到口令一样，监控视频加载事件，以及搞定缩略图啥的。首先，用ctx.drawImage把视频对象送入Canvas画布，接下来就该用toDataURL方法拿到画布里的东西，然后给img标签喂进去，这样视频截图就能出炉了。在敲代码的时候也别忘了监控下视频加载事件，必要时清除一下防止卡顿现象发生。
HTML结构设计
搞定仿照优酷截屏功能，其实HTML结构设计挺直观的！就用video标签来看视频，canvas用来画截图，img就在那显示做好的缩小图片啥的。只要把这些东西摆摆好，加上些特定属性，整个网页看起来不但清爽，还挺条理！
CSS样式设置
利用 CSS3 就能让网页变得更美，更吸引人！你看，像我们做YouTube视频截图仿真时，就得靠这些CSS样式来调整video、canvas、img之类的东西位置、大小啥的，还能加入过渡和动画，整个页面的视觉效果一下子就上去了。
JavaScript交互实现
你知道吗？JavaScript这门脚本语言在前端开发里可是个大有用处！尤其是做优酷视频截图这种功能，更离不开它。只要写点JavaScript代码，就能搞定播放、暂停这些动态事件，当用户按下截图按钮时，就能让缩略图动起来，用jQuery库弄点儿特效啥的，缩略图就能从视频那儿飞过来然后展示出来了~
安全性考虑与部署方式
要用Canvas.toDataURL来生成图不容易！因为这个方法可能受浏览器安全政策影响而不能用。所以，最好把你写的网页放在像Tomcat这种网站服务器上试试看效果如何，这样就能避免那些安全问题影响到我们的功能！
扩展与优化建议
/**
* Created with JetBrains WebStorm.
* User: zhy
* Date: 14-6-18
* Time: 上午12:24
* To change this template use File | Settings | File Templates.
*/
var ZhangHongyang = {};
ZhangHongyang.click2shot = (function ()
{
var _ID_VIDEO = "video";
var _ID_SHOTBAR = "shotBar";
var _videoWidth = 0;
var _videoHeight = 0;
var _canvas = null;
var _ctx = null;
var _video = null;
function _init()
{
_canvas = document.createElement("canvas");
_ctx = _canvas.getContext("2d");
_video = document.getElementById(_ID_VIDEO);
_video.addEventListener("canplay", function ()
{
_canvas.width = _videoWidth = _video.videoWidth;
_canvas.height = _videoHeight = _video.videoHeight;
console.log(_videoWidth + " , " + _videoHeight);
_ctx.fillStyle = '#ffffff';
_ctx.fillRect(0, 0, _videoWidth, _videoWidth);
$("#" + _ID_SHOTBAR).click(_click2shot);
_video.removeEventListener("canplay", arguments.callee);
});
}
function _click2shot(event)
{
_video.pause();
_ctx.drawImage(_video, 0, 0, _videoWidth, _videoHeight, 0, 0, _videoWidth, _videoHeight);
var dataUrl = _canvas.toDataURL("image/png");
//创建一个和video相同位置的图片
var $imgBig = $("");
$imgBig.width(_videoWidth).height(_videoHeight).css({position: "absolute", left: _video.offsetLeft, top: _video.offsetTop,
width: _videoWidth + "px", height: _videoWidth + "px"}).attr("src", dataUrl);
$("body").append($imgBig);
//创建缩略图，准备加到shotBar
var $img = $("");
$img.attr("src", dataUrl);
$(this).append($img);
var offset = _getOffset($img[0]);
$img.hide();
//添加动画效果
$imgBig.animate({left: offset.x + "px", top: offset.y + "px", width: $img.width() + "px", height: $img.height() + "px"}, 200, function ()
{
$img.attr("src", dataUrl).show();
$imgBig.remove();
_video.play();
});
}
/**
* 获取元素在显示区域的leftOffset和topOffset
* @param elem
* @returns {{x: (Number|number), y: (Number|number)}}
* @private
*/
function _getOffset(elem)
{
var pos = {x: elem.offsetLeft, y: elem.offsetTop};
var offsetParent = elem.offsetParent;
while (offsetParent)
{
pos.x += offsetParent.offsetLeft;
pos.y += offsetParent.offsetTop;
offsetParent = offsetParent.offsetParent;
}
return pos;
}
return {init: _init}
})();
除了最基础的截屏功能以外，我们还可以拓展和优化这个模拟视频的功能！比如加入把图片传到服务器上的功能，可以试着做一下GIF动图缩略图的功能，再优化调整一下图片清晰度的设置，这些都能大大提高用户的使用感受和功能的完备程度！
评论0