• JavaScrip获取视频第一帧作为封面图

    在JavaScript中，你可以使用HTML5的

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <title>Video Thumbnailtitle>
    7. head>
    8. <body>
    9.  
    10. <video id="myVideo" width="320" height="240" controls>
    11.     <source src="your-video.mp4" type="video/mp4">
    12.     Your browser does not support the video tag.
    13. video>
    14.  
    15. <script>
    16.     document.addEventListener('DOMContentLoaded', function() {
    17.         // 获取 video 元素
    18.         var video = document.getElementById('myVideo');
    19.  
    20.         // 监听 video 的 loadeddata 事件
    21.         video.addEventListener('loadeddata', function() {
    22.             // 创建一个 Canvas 元素
    23.             var canvas = document.createElement('canvas');
    24.             canvas.width = video.videoWidth;
    25.             canvas.height = video.videoHeight;
    26.  
    27.             // 获取 2D 上下文
    28.             var context = canvas.getContext('2d');
    29.  
    30.             // 在 Canvas 上绘制视频的第一帧
    31.             context.drawImage(video, 0, 0, canvas.width, canvas.height);
    32.  
    33.             // 将 Canvas 转换为 data URL
    34.             var dataURL = canvas.toDataURL('image/jpeg');
    35.  
    36.             // 创建一个图片元素用于显示封面图
    37.             var img = document.createElement('img');
    38.             img.src = dataURL;
    39.  
    40.             // 将图片元素添加到页面
    41.             document.body.appendChild(img);
    42.         });
    43.     });
    44. script>
    45.  
    46. body>
    47. html>

    请注意，这个例子中使用了loadeddata事件，该事件在视频的第一帧加载完成后触发。这里创建了一个Canvas元素，通过drawImage方法将视频的第一帧绘制在Canvas上，然后将Canvas转换为data URL。最后，创建一个图片元素用于显示封面图，并将其添加到页面上。

    替换代码中的"your-video.mp4"为你实际的视频文件路径。这段代码适用于支持HTML5的现代浏览器。

  • 相关阅读:
    数据结构和算法（3）：列表
    有关范数的学习笔记
    springboot基于itextpdf将html生成pdf
    构造shiro poc
    Netty再学习1
    Python 实现：记忆（缓存）函数返回值
    政务场景下-基于OAuth2.0 统一认证中心架构设计
    【案例】3D地球
    java servlet 返回图片验证码
    BERT(二)--论文理解：BERT 模型结构详解
  • 原文地址：https://blog.csdn.net/m0_52537869/article/details/134472309