uni-app 插入视频播放器

原创

已于 2022-03-30 16:02:30 修改 · 4.9k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #uni-app

于 2022-03-30 15:54:58 首次发布

本文介绍了如何在uni-app中插入视频播放器，通过使用uni-app官方文档中的video组件，设置属性如show-mute-btn、autoplay和controls来实现视频播放、静音和控制条展示。同时，文章提到从后台请求视频链接，并在交互中显示消息提示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

套个播放器的空壳从后台请求视频链接

uni-app官方文档中的video组件地址:video | uni-app官网

   <view>
	<u-button type="primary">实时监控---{
  
  {isType}}</u-button>
	    <view class="uni-padding-wrap uni-common-mt">
		    <video id="myVideo" class="video" :src="message" @error="videoErrorCallback" 
          show-mute-btn autoplay controls>
            </video>
		</view>
	</view>

show-mute-btn 显示静音按钮; autoplay 自动播放; controls 展示进度暂停等控件

下面这一坨是复制的在methods里不知道啥意思.....

//回放所用方法
			videoErrorCallback: function(e) {
				uni.showModal({
					content: e.target.errMsg,
					showCancel: false
				})
			},
			//实时所用方法
			statechange(e) {
				console.log('live-player code:'