&>&&>&&>&&>&优酷视频截图程序
优酷视频截图程序
上传大小：624KB
自动截取优酷土豆视频其中一针图片，非常适合做视频网站。
综合评分：5（1位用户评分）
所需积分：1
下载次数：13
审核通过送C币
创建者：boltnut
创建者：boltnut
创建者：boltnut
课程推荐相关知识库
上传者其他资源上传者专辑
开发技术热门标签
VIP会员动态
android服务器底层网络模块的设计方法
所需积分：0
剩余积分：720
您当前C币：0
可兑换下载积分：0
兑换下载分：
兑换失败，您当前C币不够，请先充值C币
消耗C币：0
你当前的下载分为234。
优酷视频截图程序
会员到期时间：
剩余下载次数：
你还不是VIP会员
开通VIP会员权限，免积分下载
你下载资源过于频繁，请输入验证码
你下载资源过于频繁，请输入验证码
您因违反CSDN下载频道规则而被锁定帐户，如有疑问，请联络:!
若举报审核通过，可奖励20下载分
被举报人：
举报的资源分：
请选择类型
资源无法下载
资源无法使用
标题与实际内容不符
含有危害国家安全内容
含有反动色情等内容
含广告内容
版权问题，侵犯个人或公司的版权
*详细原因：2010年 总版技术专家分年内排行榜第一2009年 总版技术专家分年内排行榜第一
2011年 总版技术专家分年内排行榜第二
2017年2月 总版技术专家分月排行榜第三
2017年2月 .NET技术大版内专家分月排行榜第一2016年10月 .NET技术大版内专家分月排行榜第一2016年8月 .NET技术大版内专家分月排行榜第一2016年7月 .NET技术大版内专家分月排行榜第一
2017年2月 总版技术专家分月排行榜第三
2017年2月 .NET技术大版内专家分月排行榜第一2016年10月 .NET技术大版内专家分月排行榜第一2016年8月 .NET技术大版内专家分月排行榜第一2016年7月 .NET技术大版内专家分月排行榜第一
本帖子已过去太久远了，不再提供回复功能。HTML5+CSS3模仿优酷视频截图功能示例
作者：鸿洋_
字体：[ ] 来源：互联网 时间：01-05 17:23:50
本篇文章主要介绍了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&);
核心代码就这几行，利用了ctx.drawImage时，第一个参数可以为video对象，然后就是通过canvas拿到DataUrl，赋值给Img标签了。关键点就这些。
下面来看整个例子：
&!DOCTYPE html&
&title&&/title&
&meta charset=&utf-8&&
&style type=&text/css&&
background-color: #999;
margin: 60px auto 0;
height: 120
width: 98%;
background-color: #000;
box-shadow: -5px -5px 10px #
border-radius: 5
padding: 2
#shotBar img
border: 3px solid #
border-radius: 5
height: 110
width: 210
margin-left: 4
&script type=&text/javascript& src=&../../../jquery-1.8.3.js&&&/script&
&script type=&text/javascript& src=&videoshot.js&&&/script&
&script type=&text/javascript&&
$(function ()
ZhangHongyang.click2shot.init();
&video src=&media/style.mp4& controls id=&video&&
&div id=&shotBar&&
html和css都是相当简单的。
主要看Js的代码:
* 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 =
var _ctx =
var _video =
function _init()
_canvas = document.createElement(&canvas&);
_ctx = _canvas.getContext(&2d&);
_video = document.getElementById(_ID_VIDEO);
_video.addEventListener(&canplay&, function ()
_canvas.width = _videoWidth = _video.videoW
_canvas.height = _videoHeight = _video.videoH
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 = $(&&img/&&);
$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&&);
$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.offsetP
while (offsetParent)
pos.x += offsetParent.offsetL
pos.y += offsetParent.offsetT
offsetParent = offsetParent.offsetP
return {init: _init}
需要注意的是，video.canplay事件中获取完属性和一些操作后，一定要removeEventLinstener，否则暂停播放会一直调用此方法。点击事件时，会暂停video，然后在video的位置生成一张图片，使用jquery动画移动到缩略图的位置，然后移除文档，缩略图显示，造成的动画效果。
得到图片之后的上传之类的操作，大家可以自己添加。还有很重要的一点：canvas.toDataURL(&image/png&);可能需要在服务器中访问才能正常使用，我把写好的页面拖到了tomcat中，大家可以随便启动个什么服务器，不然会报安全问题。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
大家感兴趣的内容
12345678910
最近更新的内容}