uni-app按照视频写一个demo

当然，以下是一个简单的 uni-app 示例代码，用于创建一个视频播放的 Demo。假设你已经安装并配置好了 uni-app 开发环境，以下是项目的关键代码部分。

1. 创建项目

首先，使用 HBuilderX 创建一个新的 uni-app 项目，命名为 VideoDemo。

2. 编写页面代码

在 pages/index/index.vue 中编写如下代码：

<template>
  <view class="content">
    <video
      id="myVideo"
      src="https://www.w3schools.com/html/mov_bbb.mp4"
      controls
      autoplay
      @play="onPlay"
      @pause="onPause"
      @ended="onEnded"
    ></video>
    <view class="controls">
      <button @click="playVideo">播放</button>
      <button @click="pauseVideo">暂停</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      videoContext: null,
    };
  },
  mounted() {
    this.videoContext = uni.createVideoContext('myVideo');
  },
  methods: {
    playVideo() {
      this.videoContext.play();
    },
    pauseVideo() {
      this.videoContext.pause();
    },
    onPlay() {
      console.log('视频开始播放');
    },
    onPause() {
      console.log('视频暂停');
    },
    onEnded() {
      console.log('视频播放结束');
    },
  },
};
</script>

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

video {
  width: 300px;
  height: 200px;
  margin-bottom: 20px;
}

.controls {
  display: flex;
  gap: 10px;
}

button {
  padding: 10px 20px;
}
</style>

3. 运行项目

确保你已经在 HBuilderX 中连接了手机或选择了模拟器，然后点击运行按钮，你应该会看到一个包含视频播放控件和自定义播放/暂停按钮的页面。

解释

• video 标签用于嵌入视频，并绑定了 play、pause 和 ended 事件。
• 在 mounted 生命周期钩子中，通过 uni.createVideoContext 获取视频上下文，用于控制视频播放。
• playVideo 和 pauseVideo 方法分别用于播放和暂停视频。
• onPlay、onPause 和 onEnded 方法用于处理视频播放的相应事件。

这个示例展示了如何使用 uni-app 创建一个简单的视频播放页面，并提供了基本的播放控制功能。你可以根据需要进一步扩展功能，比如添加进度条、音量控制等。