js 获取video视频标签的第一帧图片
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" ".dtd">
<html><head><title> New Document </title><meta name="Generator" content="EditPlus"><meta name="Author" content=""><meta name="Keywords" content=""><meta name="Description" content=""><script src="js/jquery-2.1.4.min.js"></script></head>
<body>
<div class="big-box"></div>
<script type="text/javascript">
(function(){// 模拟视频路径var videoFile = [".mp4?auth_key=1566529186-0-0-cacb337ee81146d35c2a2a097a5f6d39&bcevod_channel=searchbox_feed&pd=bjh&abtest=all",".mp4?auth_key=1566529371-0-0-18ba2c747ef1ebde12beb04638811edd&bcevod_channel=searchbox_feed&pd=unknown&abtest=all",".mp4?auth_key=1566529476-0-0-634832c04bbcc69a8b193a8587ab9aa4&bcevod_channel=searchbox_feed&pd=unknown&abtest=all"];// 遍历取出需要的第一帧$.each(videoFile, function(index, values){var listHtml = '<video id="video" class="video" controls="controls">'+'<source src="'+values+'">'+'</video>'+'<div class="output"></div>';$('.big-box').append(listHtml);var canvas = ateElement('canvas')var img = ateElement("img");var video = $('.video')[index];var output = $('.output')[index];video.setAttribute('crossOrigin', 'anonymous')canvas.width = video.clientWidthcanvas.height = loadeddata = (() => {Context('2d').drawImage(video, 0, 0, canvas.width, canvas.height)var dataURL = DataURL('image/png')img.src = dataURL;img.width = 400;img.height = 300; })$('.output').append(img);});// 删除掉不需要的video标签部分$('.output img:nth-child(1)').fadeIn().siblings().remove();$('.big-box .video').remove();})();
</script>
</body>
</html>
本文发布于:2024-01-30 19:48:44，感谢您对本站的认可！
本文链接：https://www.4u4v.net/it/170661532522405.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
| 留言与评论（共有 0 条评论） |
