文章总结:

文章介绍了使用HTML5的Canvas元素和JavaScript在网页上播放视频的方法，以解决video标签在不同浏览器上的兼容性问题。首先，在HTML中创建隐藏的视频元素和用于显示视频内容的Canvas元素。然后，通过JavaScript获取这两个元素，并设置Canvas的宽高为窗口大小。通过调用video.play()方法开始播放视频，并使用setInterval每16毫秒执行一次绘制操作，将视频的当前帧绘制到Canvas上，确保视频帧在Canvas中居中显示。这样，当页面加载完成后，视频会自动播放，且每一帧都会实时绘制到Canvas上，可以用于实现视频特效处理、实时滤镜应用等高级功能。

使用Canvas播放视频

有时候需要开屏播放自动视频的时候，如果使用video标签，在浏览器会有兼容性问题，所以可以使用Canvas来播放视频。

  1. 创建Video标签和Canvas标签
    首先，我们需要在 HTML 中创建一个视频元素和一个 Canvas 元素。视频将自动播放、静音、循环播放并隐藏，而 Canvas 将用于显示视频内容。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    <video
      class="video"
      autoplay
      playsinline
      webkit-playsinline
      loop
      muted
      x5-video-player-type="h5"
      x5-playsinlin="true"
      v-show="false"
      id="video1"
    >
      <source src="./video.mp4" type="video/mp4">
    </video>
    <canvas id="canvas-1" class="canvas"></canvas>

  2. 编写 JavaScript 实现视频绘制

接下来，我们编写 JavaScript 代码来实现将视频内容绘制到 Canvas 上的功能。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
function play() {
  var video = document.getElementById('video1');
  var canvas = document.getElementById('canvas-1');
  var ctx = canvas.getContext('2d');

  // 设置Canvas宽高
  function CanvasW() {
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
  }

  CanvasW();

  video.play();

  this.timer = setInterval(function () {
    ctx.drawImage(
      video,
      (canvas.width - video.videoWidth) / 2,
      (canvas.height - video.videoHeight) / 2,
      video.videoWidth,
      video.videoHeight
    ); // 绘制视频
  }, 16);
}

// 页面加载后执行播放功能
window.onload = function() {
  play();
};

  1. 代码解析

    • HTML 部分：
      1. 创建了一个隐藏的视频元素和一个用于显示的 Canvas 元素。
      2. 视频元素设置了自动播放、静音、循环播放以及内嵌播放。
    • JavaScript 部分：
      1. 获取视频元素和 Canvas 元素，以及 Canvas 的 2D 绘图上下文。
      2. 定义 CanvasW 函数来设置 Canvas 的宽高为窗口的宽高。
      3. 调用 video.play() 开始播放视频。
      4. 使用 setInterval 每 16 毫秒（约 60 帧每秒）执行一次绘制操作。
      5. 使用 ctx.drawImage 方法将视频的当前帧绘制到 Canvas 上，并确保视频帧在 Canvas 中居中显示。

  2. 实现效果

通过以上代码，当页面加载完成后，视频将自动开始播放，并且每一帧都将实时绘制到 Canvas 上。这种方法可以用于实现视频特效处理、实时滤镜应用等高级功能。