uni-app 实现视频点击播放效果 如微信中点击图片查看视频一样

在uni-app中实现视频点击播放效果，类似于微信中点击图片查看视频的功能，可以通过以下步骤实现。以下是一个简单的代码示例，展示如何在uni-app中通过点击按钮或图片来播放视频。

1. 创建页面结构

在页面的.vue文件中，创建一个按钮或图片作为触发视频播放的控件，以及一个<video>标签用于视频播放。

<template>
  <view class="container">
    <!-- 触发视频播放的按钮或图片 -->
    <button @click="playVideo">播放视频</button>
    <!-- 或者 -->
    <!-- <image src="/static/play_icon.png" @click="playVideo" style="width: 100px; height: 100px;"></image> -->

    <!-- 视频播放器 -->
    <video
      id="myVideo"
      src="https://www.example.com/path/to/your/video.mp4"
      controls
      style="display: {{ isVideoPlaying ? 'block' : 'none' }}; width: 100%; height: auto;"
    ></video>
  </view>
</template>

2. 添加逻辑控制

在页面的<script>部分，添加控制视频播放的逻辑。

<script>
export default {
  data() {
    return {
      isVideoPlaying: false, // 控制视频播放器的显示与隐藏
    };
  },
  methods: {
    playVideo() {
      this.isVideoPlaying = true;
      const video = document.getElementById('myVideo');
      if (video) {
        video.play();
      }
    },
    // 可选：监听视频结束事件，隐藏视频播放器
    onVideoEnd() {
      this.isVideoPlaying = false;
    },
  },
  onReady() {
    // 可选：监听视频结束事件
    const video = document.getElementById('myVideo');
    if (video) {
      video.addEventListener('ended', this.onVideoEnd);
    }
  },
  beforeDestroy() {
    // 清理事件监听器
    const video = document.getElementById('myVideo');
    if (video) {
      video.removeEventListener('ended', this.onVideoEnd);
    }
  },
};
</script>

3. 添加样式

在页面的<style>部分，添加必要的样式。

<style scoped>
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

button {
  margin-bottom: 20px;
}

video {
  max-width: 100%;
  height: auto;
}
</style>

总结

上述代码展示了如何在uni-app中实现点击播放视频的功能。通过按钮或图片触发playVideo方法，控制<video>标签的显示与隐藏，并调用视频的play方法实现播放。你还可以监听视频的其他事件（如暂停、结束等）来进一步优化用户体验。