uni-app 中如何使用 video 组件播放视频？

推荐答案

在 uni-app 中使用 video 组件播放视频的代码如下：

// www.javascriptcn.com code example
<template>
  <view>
    <video 
      src="https://www.example.com/sample.mp4" 
      controls 
      autoplay 
      style="width: 100%; height: 300px;">
    </video>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 可以在这里定义视频源
    };
  }
};
</script>

<style>
/* 可以在这里添加样式 */
</style>

本题详细解读

1. video 组件的基本用法

video 组件是 uni-app 中用于播放视频的组件。它支持多种属性来控制视频的播放行为。以下是一些常用的属性：

• src: 视频的源地址，可以是本地路径或网络 URL。
• controls: 是否显示默认的视频控制条，如播放、暂停、音量等。
• autoplay: 是否自动播放视频。
• style: 可以设置视频的宽度、高度等样式。

2. 示例代码解析

在示例代码中，我们使用了 video 组件来播放一个网络视频。src 属性指定了视频的 URL，controls 属性启用了默认的控制条，autoplay 属性使得视频在加载完成后自动播放。style 属性用于设置视频的宽度和高度。

3. 其他常用属性

除了上述属性外，video 组件还支持以下常用属性：

• loop: 是否循环播放视频。
• muted: 是否静音播放。
• poster: 视频封面图片的 URL，在视频播放前显示。
• initial-time: 指定视频开始播放的时间点（单位：秒）。

4. 事件监听

video 组件还支持多种事件监听，如 play、pause、ended 等。可以通过 @ 符号来监听这些事件：

<video 
  src="https://www.example.com/sample.mp4" 
  controls 
  autoplay 
  @play="onPlay" 
  @pause="onPause" 
  @ended="onEnded">
</video>

在 script 中定义相应的事件处理函数：

// www.javascriptcn.com code example
export default {
  methods: {
    onPlay() {
      console.log('视频开始播放');
    },
    onPause() {
      console.log('视频暂停');
    },
    onEnded() {
      console.log('视频播放结束');
    }
  }
};

5. 兼容性

video 组件在 H5、微信小程序、支付宝小程序等平台上都有良好的兼容性。但在不同平台上，部分属性或事件可能有所不同，建议在实际开发中根据目标平台进行测试。