视频播放组件

video 组件是 Uniapp 中用于播放视频的核心组件，支持多种平台，能够展示本地视频、网络视频，并提供多种控制属性和事件。通过该组件，开发者可以轻松实现视频播放、控制等功能，适用于多种视频播放场景，如在线视频、直播、视频广告等。

1. 什么是 video 组件？

video 组件用于在页面中播放视频资源，支持本地视频和网络视频文件，并提供丰富的播放控制属性。开发者可以通过该组件实现自动播放、静音播放、循环播放等功能，还可以控制视频的进度、全屏模式及其他高级交互功能。

使用场景

• 在线视频播放：用于在应用中嵌入在线视频播放功能。
• 视频广告展示：播放广告视频或插入前贴广告。
• 教育视频课程：提供完整的教学视频播放功能，支持弹幕、播放进度控制等。
• 直播功能：结合流媒体协议，实现实时视频直播。

2. video 组件的常用属性

video 组件提供了多种属性，用于控制视频的播放行为、界面显示以及交互体验。以下是常用属性的详细说明及使用示例。

属性名	类型	默认值	说明
src	String	无	要播放的视频资源地址，支持本地和网络路径
autoplay	Boolean	false	是否自动播放视频
loop	Boolean	false	是否循环播放视频
muted	Boolean	false	是否静音播放视频
controls	Boolean	true	是否显示默认的播放控件，包括播放、暂停按钮及进度条
poster	String	无	视频封面的图片地址
object-fit	String	contain	视频大小与容器不一致时的显示方式，支持 contain、fill、cover
show-fullscreen-btn	Boolean	true	是否显示全屏按钮
show-play-btn	Boolean	true	是否显示视频底部控制栏的播放按钮
show-center-play-btn	Boolean	true	是否显示视频中间的播放按钮
enable-progress-gesture	Boolean	true	是否开启手势控制进度
title	String	无	视频标题，支持全屏时显示
is-live	Boolean	false	是否是直播源

2.1 视频源 src

• 说明：指定视频资源的路径，支持本地视频或网络视频。
• 类型：String
• 默认值：无

<template>
  <view>
    <video :src="videoSrc" controls style="width: 100%; height: 300px;"></video>
  </view>
</template>

<script setup>
const videoSrc = 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/2minute-demo.mp4';
</script>

2.2 自动播放 autoplay

• 说明：是否在页面加载时自动播放视频。
• 类型：Boolean
• 默认值：false

<template>
  <view>
    <!-- 自动播放视频 -->
    <video :src="videoSrc" :autoplay="true" controls style="width: 100%; height: 300px;"></video>
  </view>
</template>

<script setup>
const videoSrc = 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/2minute-demo.mp4';
</script>

2.3 循环播放 loop

• 说明：是否开启循环播放模式，播放结束后自动重新开始。
• 类型：Boolean
• 默认值：false

<template>
  <view>
    <!-- 循环播放视频 -->
    <video :src="videoSrc" :loop="true" controls style="width: 100%; height: 300px;"></video>
  </view>
</template>

<script setup>
const videoSrc = 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/2minute-demo.mp4';
</script>

2.4 视频封面 poster

• 说明：指定视频的封面图片，视频加载前显示封面图，支持网络图片地址。
• 类型：String
• 默认值：无

<template>
  <view>
    <!-- 显示封面图 -->
    <video :src="videoSrc" :poster="posterImg" controls style="width: 100%; height: 300px;"></video>
  </view>
</template>

<script setup>
const videoSrc = 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/2minute-demo.mp4';
const posterImg = 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/poster.png';
</script>

2.5 视频控制按钮 controls

• 说明：是否显示默认的视频播放控制按钮，包括播放/暂停、进度条等控件。
• 类型：Boolean
• 默认值：true

<template>
  <view>
    <!-- 隐藏默认控制按钮 -->
    <video :src="videoSrc" :controls="false" style="width: 100%; height: 300px;"></video>
  </view>
</template>

<script setup>
const videoSrc = 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/2minute-demo.mp4';
</script>

2.6 视频事件监听 @play, @pause, @ended

• 说明：监听视频的播放、暂停和结束事件，获取视频播放状态并做相应处理。
• 类型：EventHandle

<template>
  <view>
    <!-- 监听视频事件 -->
    <video :src="videoSrc" controls @play="onPlay" @pause="onPause" @ended="onEnded" style="width: 100%; height: 300px;"></video>
  </view>
</template>

<script setup>
const videoSrc = 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/2minute-demo.mp4';

const onPlay = () => {
  console.log('视频开始播放');
};

const onPause = () => {
  console.log('视频暂停');
};

const onEnded = () => {
  console.log('视频播放结束');
};
</script>

3. 视频播放与弹幕功能

以下示案例展示了如何使用 video 组件，并结合弹幕功能，实现视频播放与互动弹幕展示。

<template>
  <view>
    <!-- 视频播放 -->
    <video id="myVideo" :src="videoSrc" controls :danmu-list="danmuList" enable-danmu danmu-btn @error="onVideoError" style="width: 100%; height: 300px;"></video>

    <!-- 弹幕输入 -->
    <view class="danmu-input">
      <input v-model="danmuValue" type="text" placeholder="输入弹幕内容" />
      <button @click="sendDanmu">发送弹幕</button>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue';

const videoSrc = 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/2minute-demo.mp4';
const danmuList = ref([
  { text: '第一秒弹幕', color: '#ff0000', time: 1 },
  { text: '第三秒弹幕', color: '#00ff00', time: 3 },
]);
const danmuValue = ref('');

// 发送弹幕
const sendDanmu = () => {
  const videoContext = uni.createVideoContext('myVideo');
  videoContext.sendDanmu({
    text: danmuValue.value,
    color: getRandomColor(),
  });
  danmuValue.value = '';
};

// 生成随机颜色
const getRandomColor = () => {
  const rgb = [];
  for (let i = 0; i < 3; i++) {
    let color = Math.floor(Math.random() * 256).toString(16);
    color = color.length === 1 ? '0' + color : color;
    rgb.push(color);
  }
  return '#' + rgb.join('');
};

// 处理视频播放错误
const onVideoError = (e) => {
  console.log('视频播放错误', e);
};
</script>

<style scoped>
.danmu-input {
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
}

input {
  flex: 1;
 

 padding: 8px;
  margin-right: 10px;
}

button {
  padding: 8px 16px;
  background-color: #007aff;
  color: #fff;
  border: none;
  border-radius: 4px;
}
</style>