UniApp提供了多种视频播放组件,包括视频播放器(video)、多媒体组件(media)、WebView(内置Video标签)等。其中,video和media组件是最常用的。
video组件
video组件是基于HTML5 video标签的UniApp视频播放组件,支持常见的视频格式(如MP4、M4V、MOV等)。使用video组件需要引入uni-ui组件库。
示例代码:
<template>
<view>
<video
id="myVideo"
:src="src"
:controls="controls"
:autoplay="autoplay"
style="width: 100%; height: 300px;"
></video>
</view>
</template>
<script>
export default {
data() {
return {
src: 'http://example.com/video.mp4', // 视频地址
controls: true, // 是否显示控制条
autoplay: false, // 是否自动播放
}
},
}
</script>
media组件
media组件是基于uni-app原生组件的视频播放组件,支持更多视频格式(如FLV、RTMP等)。使用media组件需要在App.vue中全局引入uni-plugin-aliplayer插件。
示例代码:
<template>
<view>
<media
class="aliplayer-wrapper"
:source="source"
:autoplay="autoplay"
:controls="controls"
:muted="muted"
width="100%"
height="300px"
></media>
</view>
</template>
<script>
export default {
data() {
return {
source: {
type: 'video',
sources: [
{
type: 'video/mp4',
src: 'http://example.com/video.mp4',
},
],
},
autoplay: false, // 是否自动播放
controls: true, // 是否显示控制条
muted: false, // 是否静音
}
},
}
</script>
<style>
.aliplayer-wrapper {
height: 100% !important;
}
</style>
以上是使用video和media组件实现视频播放的示例代码,具体使用方式可以根据自己的需求进行调整。