详解射流研究…获取录像任意时间的画面截图

首先就是要把视频加载出来，然后使用canvas.getContext('2d ').drawImage(videoElement，0，0，canvas.width，canvas。高度)；获取到当前视频时间的截图，需要不同时间的录像视频图，设置录像的currentTime(单位秒),然后videoElement这个对象信息会实时更新。

如果是视频是在阿里云战略情报局上就更方便了，海报=" http://a-图像-演示。OSS-cn-青岛。aliyuncs.com/demo.mp4?x-OSS-process=视频/快照，t_6000，m_fast”

div内容可编辑=' true ' id=' in-box ' style=' width :1000 px；'margin : 20px auto '/div div style=' width :1000 px；margin: 20px自动输入类型=' file ' name=' id=' upload-ipt ' div class=' review ' id=' out-box '/div/div函数getvideo image(){ var obj _ file=document。getelementbyid(' upload-ipt ')；var文件=obj _ file。文件[0]；var blob=新Blob([文件]),//文件转化成二进制文件网址=网址。createobjecturl(blob)；//转化成URL if(文件/视频/g . test(文件。type)){ var $ video=$(' div视频控件src=' http : ' URL ' '/video/div/div ')；//后面加一个空格差异是为了解决在富文本中按退格时删除无反应的问题$(“# in-box”).html($视频);var video元素=$(' video ')[0]；视频元素。addeventlistener('可播放'，function(_ event){ var canvas=document。create element(' canvas ')；帆布。宽度=视频元素。视频宽度；帆布。高度=视频元素。视频高度；控制台。日志(视频元素。视频宽度)画布。getcontext(' 2d ').drawImage(videoElement，0，0，canvas.width，canvas。高度)；var img=文档。创建元素(' img ')；img。src=画布。todaytaul(' image/png ')；$(' #开箱即用')。html(img)；网址。revokeobjecturl(这。src)；//释放createObjectURL创建的对象控制台。日志('加载的元数据')})；}else{ alert('请上传一个视频文件！');obj _ file.value=' ' } }以上所述是小编给大家介绍的射流研究…获取录像任意时间的画面截图详解整合，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！