Skip to main content

Command Palette

Search for a command to run...

js 获取视频封面

Published
1 min readView as Markdown
    // 获取封面
    drawVideo(video) {
      return new Promise((res, rej) => {
        const canvas = document.createElement('canvas')
        const ctx = canvas.getContext('2d')
        canvas.width = video.width
        canvas.height = video.height
        ctx.drawImage(video, 0, 0, canvas.width, canvas.height)
        canvas.toBlob(bolb => {
          res({ bolb, url: URL.createObjectURL(bolb) })
        })
        document.body.appendChild(canvas)
      })

    },
    // 根据视频地址获取获取封面
    getVideoPic(url, time = 0) {
      return new Promise((res, rej) => {
        const video = document.createElement('video')
        video.currentTime = time
        video.muted = true
        video.autoplay = true
        video.oncanplay = async () => {
          const frame = await drawVideo(video)
          res(frame)
        }
        video.src = URL.createObjectURL(url)
      })
    },

More from this blog

js 数组方法

一、增删改方法 push()方法接收任意数量的参数,并将它们添加到数组末尾,返回数组的最新长度 unshift()在数组开头添加任意多个值,然后返回新的数组长度 pop() 方法用于删除数组的最后一项,同时减少数组的 length 值,返回被删除的项 shift()方法用于删除数组的第一项,同时减少数组的 length 值,返回被删除的项 splice功能强大,可以同时对数组进行增删改的操作 二、搜索和位置方法 indexOf()返回要查找的元素在数组中第一次出现的下标,如果没找到则返回 -1 ...

Oct 16, 20231 min read

Server-Sent Events(SSE)

Server-Sent Events(SSE)是一种用于实现服务器向客户端实时推送数据的Web技术。与传统的轮询和长轮询相比,SSE提供了更高效和实时的数据推送机制。 SSE基于HTTP协议,允许服务器将数据以事件流(Event Stream)的形式发送给客户端。客户端通过建立持久的HTTP连接,并监听事件流,可以实时接收服务器推送的数据。 SSE的主要特点包括: 简单易用:SSE使用基于文本的数据格式,如纯文本、JSON等,使得数据的发送和解析都相对简单。 单向通信:SSE支持服务器向客户...

Sep 21, 20231 min read

Untitled Publication

28 posts