JS实现预加载视频音频/视频获取截图（返回canvas截图）

下面是“JS实现预加载视频音频/视频获取截图（返回canvas截图）”的完整攻略。

一、准备工作

首先要在HTML文件中引入jQuery和video.js库：

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<link href="https://vjs.zencdn.net/7.15.4/video-js.css" rel="stylesheet" />
<script src="https://vjs.zencdn.net/7.15.4/video.min.js"></script>

二、预加载视频音频

使用 video.js 加载音频视频，并设置 preload 属性为 auto，实现自动加载。

<video id="myvideo" class="video-js vjs-default-skin" preload="auto" width="640" height="264">
  <source src="your_video_path.mp4" type="video/mp4" />
  <source src="your_video_path.webm" type="video/webm" />
  <source src="your_video_path.ogg" type="video/ogg" />
</video>

三、截取视频画面生成图片

视频截图需要依赖 canvas，截图需要在视频播放前或者播放时执行。

1.添加一个空的canvas元素：

<canvas id="mycanvas"></canvas>

2.使用 video.js 开始播放：

const myPlayer = videojs('myvideo');
myPlayer.play();

3.在 video.js 中，提供了 createTimeRange() 方法，该方法用于自动创建表示整个视频的范围，并返回 TimeRanges 对象，该对象包含一系列范围和其长度。

针对 TimeRanges 移除有效的视频帧：

myPlayer.on('timeupdate', function() {
    const timeRanges = myPlayer.buffered();
    let bufferedTime = 0;

    // 遍历 TimeRanges 的长度
    for(let i = 0; i < timeRanges.length; i++) {
        bufferedTime += timeRanges.end(i) - timeRanges.start(i);
    }

    // 如果bufferedTime大于播放器的当前时间，表示已经加载完毕至少一个关键帧
    if(bufferedTime >= myPlayer.currentTime()) {

        //获取当前画面
        const $canvas = $('#mycanvas');
        const canvas = $canvas[0];

        const ctx = canvas.getContext('2d');

        canvas.width = myPlayer.videoWidth()
        canvas.height = myPlayer.videoHeight()
        ctx.drawImage(myPlayer.el(), 0, 0, canvas.width, canvas.height);

        // 获取 canvas 截图数据
        const dataURL = canvas.toDataURL();
        console.log(dataURL);
    }
})

在每一帧播放时间改变的时候，使用 canvas 抓取出当前帧的图片，并利用 toDataURL() 方法获取图片数据。

示例

示例一

一个基于 video.js + jQuery 的简单应用，预加载音频视频，开始播放后实时截取视频画面并生成图片。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Video screenshot</title>
  <link href="https://vjs.zencdn.net/7.15.4/video-js.css" rel="stylesheet" />
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script src="https://vjs.zencdn.net/7.15.4/video.min.js"></script>
</head>

<body>
  <button id="btn">Capture</button>
  <br>
  <video id="myvideo" class="video-js vjs-default-skin" preload="auto" width="640" height="264">
    <source src="https://vjs.zencdn.net/v/oceans.mp4" type="video/mp4" />
  </video>
  <canvas id="mycanvas"></canvas>

  <script>
    $(function() {
      const myPlayer = videojs('myvideo');
      myPlayer.play();

      myPlayer.on('timeupdate', function() {
        const timeRanges = myPlayer.buffered();
        let bufferedTime = 0;

        for(let i = 0; i < timeRanges.length; i++) {
          bufferedTime += timeRanges.end(i) - timeRanges.start(i);
        }

        if(bufferedTime >= myPlayer.currentTime()) {
          const $canvas = $('#mycanvas');
          const canvas = $canvas[0];

          const ctx = canvas.getContext('2d');

          canvas.width = myPlayer.videoWidth()
          canvas.height = myPlayer.videoHeight()
          ctx.drawImage(myPlayer.el(), 0, 0, canvas.width, canvas.height);

          const dataURL = canvas.toDataURL();
          console.log(dataURL);
        }
      })


      $('#btn').on('click', function () {
        const dataURL = canvas.toDataURL();
        const url = window.URL.createObjectURL(dataURL);

        const a = document.createElement('a');
        document.body.append(a);
        a.href = url;
        a.download = 'screenshot.png';
        a.click();

        setTimeout(() => {
          window.URL.revokeObjectURL(url);
          a.remove();
        }, 100)
      })
    });
  </script>
</body>

</html>

示例二

一个基于 video.js + Vue.js 的全功能应用，预加载音频视频，开始播放后实时截取视频画面并生成图片。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Video screenshot</title>
  <link href="https://vjs.zencdn.net/7.15.4/video-js.css" rel="stylesheet" />
  <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.min.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script src="https://vjs.zencdn.net/7.15.4/video.min.js"></script>
</head>

<body>
  <div id="app">
    <div class="controls">
      <button @click="play" :disabled="playing">播放</button>
      <button @click="pause" :disabled="!playing">暂停</button>
      <button @click="capture" :disabled="!playing">截屏</button>
    </div>
    <div class="player-container">
      <video id="myvideo" class="video-js vjs-default-skin" preload="auto" v-bind:width="width" v-bind:height="height">
        <source v-bind:src="src" type="video/mp4" />
      </video>
      <canvas id="mycanvas" class="player-canvas"></canvas>
    </div>
  </div>

  <script>
    const app = new Vue({
      el: '#app',
      data: {
        src: 'https://vjs.zencdn.net/v/oceans.mp4',
        width: 640,
        height: 264,
        playing: false,
      },
      computed: {
        videoPlayer: function() {
          return videojs('myvideo')
        }
      },
      methods: {
        play() {
          this.videoPlayer.play()
          this.playing = true;
        },
        pause () {
          this.videoPlayer.pause()
          this.playing = false;
        },
        capture() {
          const $canvas = $('#mycanvas');
          const canvas = $canvas[0];
          const ctx = canvas.getContext('2d');
          const video = this.videoPlayer.el();

          canvas.width = video.videoWidth;
          canvas.height = video.videoHeight;

          ctx.drawImage(video, 0, 0, canvas.width, canvas.height);

          const dataURL = canvas.toDataURL();
          console.log(dataURL);
        },
      },
      mounted() {
        this.videoPlayer.play();
        this.playing = true;

        this.videoPlayer.on('timeupdate', function() {
          const timeRanges = this.buffered();
          let bufferedTime = 0;

          for(let i = 0; i < timeRanges.length; i++) {
            bufferedTime += timeRanges.end(i) - timeRanges.start(i);
          }

          if(bufferedTime >= this.currentTime()) {
            const $canvas = $('#mycanvas');
            const canvas = $canvas[0];
            const ctx = canvas.getContext('2d');
            const video = this.el();

            canvas.width = video.videoWidth;
            canvas.height = video.videoHeight;

            ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
          }
        });
      }
    })
  </script>
</body>

</html>