video中视频初始化显示第1帧

原创于 2023-07-04 16:21:44 发布 · 2.3k 阅读

CC 4.0 BY-SA版权

文章标签：

文章介绍了在页面加载时遇到视频组件显示为黑色的问题及其解决方案。通过使用JavaScript操作video元素，设置crossOrigin属性，将currentTime设为0.5，并在oncanplay事件中利用canvas绘制视频帧来解决初始化黑屏现象。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1个视频url放入video组件中，页面初始化的时候是黑的
解决办法:

html

<video :src="item.video" class="images-item" controls :id="handleVideoId(index)" />
<canvas id="mycanvas" style="display: none"></canvas>

  mounted() {
    this.findvideocover(url);
  },
 methods: {
    handleVideoId(index) {
      return `video${index}`
    },
    findvideocover(url) {
      url.forEach((item, index) => {
        const video = document.getElementById(`video${index}`);
        video.src = item;
        var canvas = document.getElementById("mycanvas");
        const ctx = canvas.getContext("2d");
        video.crossOrigin = "anonymous";
        video.currentTime = 0.5;
        video.oncanplay = () => {
          canvas.width = video.clientWidth;
          canvas.height = video.clientHeight;
          ctx.drawImage(video, 0, 0, video.clientWidth, video.clientHeight);
        };
      });
    },
  },