uni-app nvue组件，基于video组件二次封装

专业插件开发 q 1196097915 https://ask.dcloud.net.cn/question/91948

在uni-app中，nvue组件提供了一种高效的方式来开发原生渲染的页面，尤其适合需要高性能图形渲染或视频播放的场景。针对video组件的二次封装，可以创建一个自定义组件，以便更好地管理和复用视频播放功能。以下是一个简单的示例，展示如何在nvue中基于video组件进行二次封装。

首先，创建一个名为MyVideo.nvue的自定义组件文件：

<template>
  <div class="container">
    <video
      id="videoPlayer"
      :src="videoSrc"
      :controls="controls"
      @play="onPlay"
      @pause="onPause"
      @ended="onEnded"
      style="width: 100%; height: 100%;"
    ></video>
    <div class="controls">
      <button @click="playPause">播放/暂停</button>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    videoSrc: {
      type: String,
      required: true
    },
    controls: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    playPause() {
      const video = this.$mp.page.selectComponent('#videoPlayer');
      if (video.paused) {
        video.play();
      } else {
        video.pause();
      }
    },
    onPlay() {
      console.log('Video is playing');
    },
    onPause() {
      console.log('Video is paused');
    },
    onEnded() {
      console.log('Video has ended');
    }
  }
};
</script>

<style>
.container {
  position: relative;
  width: 100%;
  height: 300px; /* Adjust height as needed */
}
.controls {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
}
button {
  padding: 10px 20px;
}
</style>

然后，在你的页面中使用这个自定义组件，例如index.nvue：

<template>
  <div>
    <MyVideo videoSrc="https://www.example.com/path/to/video.mp4" controls="true"></MyVideo>
  </div>
</template>

<script>
import MyVideo from '@/components/MyVideo.nvue';

export default {
  components: {
    MyVideo
  }
};
</script>

<style>
/* Add any global styles if needed */
</style>

在这个示例中，MyVideo组件封装了video元素，并提供了播放/暂停按钮。通过props传递视频源和控制属性，你可以灵活地控制视频的行为。同时，通过监听video元素的事件，你可以在组件内部处理视频播放的各种状态。这种封装方式使得视频播放功能更加模块化和可复用。