uni-app 多个video标签视频页加载更多video时卡顿

发布于 1周前 作者 caililin 来自 Uni-App

uni-app 多个video标签视频页加载更多video时卡顿

我的一个视频页,多个<video>标签,然后加载更多<video>的时候,就会很卡!播放页卡,向下滑动也卡,不知道问题在哪?

1 回复

在处理uni-app中多个<video>标签加载视频时可能出现的卡顿问题,通常需要考虑视频加载策略、内存管理以及性能优化。以下是一些代码示例和优化措施,可以帮助你缓解卡顿问题。

1. 使用懒加载

懒加载可以延迟加载不在视口内的视频,减少初始加载时的资源消耗。

<template>
  <view>
    <scroll-view scroll-y="true">
      <view v-for="(video, index) in videos" :key="index">
        <video
          v-if="video.inViewport"
          :src="video.src"
          controls
          @loadedmetadata="onVideoLoaded(index)"
        ></video>
      </view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      videos: [
        { src: 'video1.mp4', inViewport: false },
        // 更多视频...
      ],
    };
  },
  methods: {
    checkViewport() {
      this.videos.forEach((video, index) => {
        const el = this.$refs[`video${index}`][0];
        const rect = el.getBoundingClientRect();
        const inViewport = (
          rect.top >= 0 &&
          rect.left >= 0 &&
          rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
          rect.right <= (window.innerWidth || document.documentElement.clientWidth)
        );
        if (inViewport !== video.inViewport) {
          this.$set(this.videos, index, { ...video, inViewport });
        }
      });
    },
    onVideoLoaded(index) {
      // 视频加载完成后的处理逻辑
    },
  },
  mounted() {
    window.addEventListener('scroll', this.checkViewport);
    this.$nextTick(() => {
      this.videos.forEach(video => {
        this.$set(video, 'inViewport', true); // 初始加载可视区域内的视频
      });
      this.checkViewport();
    });
  },
  beforeDestroy() {
    window.removeEventListener('scroll', this.checkViewport);
  },
};
</script>

2. 优化视频加载

使用preload属性控制视频的预加载策略,可以减少不必要的网络请求。

<video :src="video.src" controls preload="none"></video>

3. 使用Web Worker处理视频元数据

对于视频元数据的处理,可以使用Web Worker来避免阻塞主线程。

// worker.js
self.onmessage = function(e) {
  const video = document.createElement('video');
  video.src = e.data;
  video.onloadedmetadata = function() {
    self.postMessage({ duration: video.duration });
  };
};

// main.js
const worker = new Worker('worker.js');
worker.postMessage('video.mp4');
worker.onmessage = function(e) {
  console.log('Video duration:', e.data.duration);
};

注意:Web Worker在uni-app中的直接应用可能受限,需根据平台特性调整实现方式。

通过结合上述方法,可以有效减少多个<video>标签加载时的卡顿现象,提升用户体验。

回到顶部
AI 助手
你好,我是IT营的 AI 助手
您可以尝试点击下方的快捷入口开启体验!