uni-app 视频播放器插件 video-player html5视频播放器 解决层级覆盖问题 - liusheng22 视频播放、暂停和结束的回调有吗？

针对您提到的 uni-app 视频播放器插件 video-player 的层级覆盖问题以及视频播放、暂停和结束的回调，以下是一个基于 uni-app 和 video 组件的示例代码，展示如何实现这些功能。

示例代码

1. 页面模板 (pages/video/video.vue)

<template>
  <view class="container">
    <video
      id="myVideo"
      :src="videoSrc"
      controls
      @play="onPlay"
      @pause="onPause"
      @ended="onEnded"
      style="z-index: 9999; position: relative;"
    ></video>
    <!-- 其他内容，比如遮罩层或按钮 -->
    <view class="overlay" v-if="isPlaying" @click="pauseVideo">暂停播放</view>
  </view>
</template>

2. 页面脚本 (pages/video/video.vue)

<script>
export default {
  data() {
    return {
      videoSrc: 'https://www.example.com/path/to/your/video.mp4',
      isPlaying: false,
    };
  },
  methods: {
    onPlay() {
      this.isPlaying = true;
      console.log('视频开始播放');
    },
    onPause() {
      this.isPlaying = false;
      console.log('视频暂停播放');
    },
    onEnded() {
      this.isPlaying = false;
      console.log('视频播放结束');
    },
    pauseVideo() {
      const video = uni.createSelectorQuery().select('#myVideo');
      video.fields({ node: true, size: true }).exec((res) => {
        res[0].node.pause();
      });
    },
  },
};
</script>

3. 页面样式 (pages/video/video.vue)

<style scoped>
.container {
  position: relative;
  width: 100%;
  height: 100%;
}
video {
  width: 100%;
  height: auto;
}
.overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  font-size: 18px;
}
</style>

说明

1. 层级覆盖问题：通过设置 video 组件的 style 属性中的 z-index 和 position，确保视频播放器位于其他内容之上。
2. 回调处理：使用 @play、@pause 和 @ended 事件监听视频播放、暂停和结束，并在相应的方法中处理逻辑。
3. 暂停功能：通过 uni.createSelectorQuery 获取视频节点，并调用其 pause 方法实现手动暂停。

以上代码展示了如何在 uni-app 中使用 video 组件处理视频播放、暂停和结束回调，并通过样式设置解决层级覆盖问题。您可以根据实际需求进一步调整和优化代码。