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>

四、总结

以上就是本次攻略的完整内容，通过上述步骤可以轻松地预加载音频视频并实现获取视频截图的功能，同时，两个示例也提供了帮助我们更加快速高效完成音视频处理工作的方法。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：JS实现预加载视频音频/视频获取截图（返回canvas截图） - Python技术站

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

一、准备工作

二、预加载视频音频

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

示例

示例一

示例二

四、总结

相关文章