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组件实现视频播放的示例代码,具体使用方式可以根据自己的需求进行调整。