uni-app 媒体组件

audio

属性名	类型	默认值	说明
id	String		audio 组件的唯一标识符
src	String		要播放音频的资源地址
loop	Boolean	false	是否循环播放
controls	Boolean	false	是否显示默认控件
poster	String		默认控件上的音频封面的图片资源地址，如果 controls 属性值为 false 则设置 poster 无效
name	String	未知音频	默认控件上的音频名字，如果 controls 属性值为 false 则设置 name 无效
author	String	未知作者	默认控件上的作者名字，如果 controls 属性值为 false 则设置 author 无效

示例：

<template>
	<view>
		<view class="page-body">
			<view class="page-section page-section-gap" style="text-align: center;">
					<audio style="text-align: left" :src="current.src" :poster="current.poster" :name="current.name" :author="current.author" :action="audioAction" controls></audio>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			current: {
					poster: 'https://img-cdn-qiniu.dcloud.net.cn/uniapp/audio/music.jpg',
					name: '致爱丽丝',
					author: '暂无',
					src: 'https://img-cdn-qiniu.dcloud.net.cn/uniapp/audio/music.mp3',
			},
			audioAction: {
					method: 'pause'
			}
		}
	}
}
</script>

在这里插入图片描述

camera

页面内嵌的区域相机组件。注意这不是点击后全屏打开的相机。
常用属性说明（详情属性说明请戳）

属性名	类型	默认值	说明	平台差异
mode	String	normal	有效值为 normal, scanCode	微信小程序
device-position	String	back	前置或后置，值为front, back
flash	String	auto	闪光灯，值为auto, on, off

注意:

camera 组件是由客户端创建的原生组件，它的层级是最高的，不能通过 z-index 控制层级。可使用 cover-view cover-image 覆盖在上面。
请勿在 scroll-view、swiper、picker-view、movable-view 中使用 camera 组件。
同一页面只能插入一个 camera 组件。
相关API：createCameraContext

 <template>
    <view>
        <camera device-position="back" flash="off" @error="error" style="width: 100%; height: 300px;"></camera>
        <button type="primary" @click="takePhoto">拍照</button>
        <view>预览</view>
        <image mode="widthFix" :src="src"></image>
    </view>
</template>

<script>
export default {
	data() {
	        return {
	            src:""
	        }
	    },
	    methods: {
	         takePhoto() {
	            const ctx = uni.createCameraContext();
	            ctx.takePhoto({
	                quality: 'high',
	                success: (res) => {
	                    this.src = res.tempImagePath
	                }
	            });
	        },
	        error(e) {
	            console.log(e.detail);
	        }
	    }
}
</script>

在这里插入图片描述

image

图片

属性名	类型	默认值	说明	平台差异
src	String		图片资源地址
mode	String	‘scaleToFill’	图片裁剪、缩放的模式
lazy-load	Boolean	false	图片懒加载。只针对page与scroll-view下的image有效	微信小程序、App、百度小程序、头条小程序
fade-show	Boolean	true	图片显示动画效果	仅App-nvue 2.3.4+ Android有效
@error	HandleEvent		当错误发生时，发布到 AppService 的事件名，事件对象event.detail = {errMsg: ‘something wrong’}
@load	HandleEvent		当图片载入完毕时，发布到 AppService 的事件名，事件对象event.detail = {height:‘图片高度px’, width:‘图片宽度px’}

注意:

<image> 组件默认宽度 300px、高度 225px；app-nvue平台，暂时默认为屏幕宽度
src 仅支持相对路径、绝对路径，支持 base64 码；
页面结构复杂，css样式太多的情况，使用 image 可能导致样式生效较慢，出现 “闪一下” 的情况，此时设置 image{will-change: transform} ,可优化此问题。
自定义组件里面使用 <image>时，若 src 使用相对路径可能出现路径查找失败的情况，故建议使用绝对路径。
webp格式的图片，app-vue下，iOS不支持，Android支持；app-nvue下，iOS和Android均支持。app-vue下也支持gif。

mode 有效值：
mode 有 13 种模式，其中 4 种是缩放模式，9 种是裁剪模式。（传送门）

<template>
	<view class="page">
		<view class="image-list">
				<view class="image-item" v-for="(item,index) in array" :key="index">
						<view class="image-content">
								<image style="width: 200px; height: 200px; background-color: #eeeeee;" :mode="item.mode" :src="src"
										@error="imageError"></image>
						</view>
						<view class="image-title">{{item.text}}</view>
				</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			array: [{
					mode: 'scaleToFill',
					text: 'scaleToFill：不保持纵横比缩放图片，使图片完全适应'
			}, {
					mode: 'aspectFit',
					text: 'aspectFit：保持纵横比缩放图片，使图片的长边能完全显示出来'
			}, {
					mode: 'aspectFill',
					text: 'aspectFill：保持纵横比缩放图片，只保证图片的短边能完全显示出来'
			}, {
					mode: 'top',
					text: 'top：不缩放图片，只显示图片的顶部区域'
			}, {
					mode: 'bottom',
					text: 'bottom：不缩放图片，只显示图片的底部区域'
			}, {
					mode: 'center',
					text: 'center：不缩放图片，只显示图片的中间区域'
			}, {
					mode: 'left',
					text: 'left：不缩放图片，只显示图片的左边区域'
			}, {
					mode: 'right',
					text: 'right：不缩放图片，只显示图片的右边边区域'
			}, {
					mode: 'top left',
					text: 'top left：不缩放图片，只显示图片的左上边区域'
			}, {
					mode: 'top right',
					text: 'top right：不缩放图片，只显示图片的右上边区域'
			}, {
					mode: 'bottom left',
					text: 'bottom left：不缩放图片，只显示图片的左下边区域'
			}, {
					mode: 'bottom right',
					text: 'bottom right：不缩放图片，只显示图片的右下边区域'
			}],
			src: 'https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/shuijiao.jpg'
		}
	},
	methods: {
		imageError: function(e) {
				console.error('image发生error事件，携带值为' + e.detail.errMsg)
		}
	}
}
</script>

video

视频

属性说明
只列举几个：（全部属性请戳）

属性名	类型	默认值	说明	平台差异
src	String		要播放视频的资源地址
autoplay	Boolean	false	是否自动播放
loop	Boolean	false	是否循环播放	头条小程序不支持
muted	Boolean	false	是否静音播放	头条小程序不支持
initial-time	Number		指定视频初始播放位置，单位为秒（s）。
duration	Number	true	是否显示默认播放控件（播放/暂停按钮、播放进度、时间）

<template>
    <view>
        <view class="uni-padding-wrap uni-common-mt">
            <view>
                <video id="myVideo" src="https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/%E7%AC%AC1%E8%AE%B2%EF%BC%88uni-app%E4%BA%A7%E5%93%81%E4%BB%8B%E7%BB%8D%EF%BC%89-%20DCloud%E5%AE%98%E6%96%B9%E8%A7%86%E9%A2%91%E6%95%99%E7%A8%[email protected]"
                    @error="videoErrorCallback" :danmu-list="danmuList" enable-danmu danmu-btn controls></video>
            </view>
            <!-- #ifndef MP-ALIPAY -->
            <view class="uni-list uni-common-mt">
                <view class="uni-list-cell">
                    <view>
                        <view class="uni-label">弹幕内容</view>
                    </view>
                    <view class="uni-list-cell-db">
                        <input v-model="danmuValue" class="uni-input" type="text" placeholder="在此处输入弹幕内容" />
                    </view>
                </view>
            </view>
            <view class="uni-btn-v">
                <button @click="sendDanmu" class="page-body-button">发送弹幕</button>
            </view>
            <!-- #endif -->
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            src: '',
            danmuList: [{
                    text: '第 1s 出现的弹幕',
                    color: '#ff0000',
                    time: 1
                },
                {
                    text: '第 3s 出现的弹幕',
                    color: '#ff00ff',
                    time: 3
                }
            ],
            danmuValue: ''
        }
    },
    onReady: function(res) {
        // #ifndef MP-ALIPAY
        this.videoContext = uni.createVideoContext('myVideo')
        // #endif
    },
    methods: {
        sendDanmu: function() {
            this.videoContext.sendDanmu({
                text: this.danmuValue,
                color: this.getRandomColor()
            });
            this.danmuValue = '';
        },
        videoErrorCallback: function(e) {
            uni.showModal({
                content: e.target.errMsg,
                showCancel: false
            })
        },
        getRandomColor: function() {
            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('')
        }
    }
}
</script>

<style lang="scss">

</style>

live-player

实时音视频播放，也称直播拉流。
属性说明
只列举几个：（全部属性请戳）

属性名	类型	默认值	说明	平台差异
id	String		live-player 属性的唯一标志符
src	String	false	音视频地址。百度小程序支持 m3u8 格式；微信小程序支持 flv, rtmp 格式
mode	String	live	live（直播），RTC（实时通话，该模式时延更低）	微信小程序
autoplay	Boolean	false	自动播放
muted	Boolean	false	是否静音
orientation	String	vertical	画面方向，可选值有 vertical，horizontal

注意：

百度小程序 iOS 端不支持设置 orientation 属性；
微信小程序已废弃 background-mute 属性，默认为进入后台静音；
live-player 默认宽度 300px、高度 225px；
live-player 是原生组件，层级高于前端组件，请勿在 scroll-view、swiper、picker-view、movable-view 中使用
小程序下覆盖live-player需要使用cover-view。详见
live-player 组件相关 JS API：createLivePlayerContext
小程序平台使用live-player有审核限制，请注意参考各家文档，

<live-player
  src="https://domain/pull_stream"
  autoplay
  @statechange="statechange"
  @error="error"
  style="width: 300px; height: 225px;"
/>
export default {
    methods:{
        statechange(e){
            console.log('live-player code:', e.detail.code)
        },
        error(e){
            console.error('live-player error:', e.detail.errMsg)
        }
    }
}

live-pusher

实时音视频录制，也称直播推流。
参数说明
只列举几个：（全部参数请戳）

属性名	类型	默认值	必填	说明
url	string		是	推流地址，支持RTMP协议。
mode	string	SD	否	推流视频模式，可取值：SD（标清）, HD（高清）, FHD（超清）。
aspect	string	3:2	否	视频宽高比例
muted	Boolean	false	否	是否静音
enable-camera	Boolean	true	否	开启摄像头。
auto-focus	Boolean	true	否	自动聚焦

<template>
	<view>
			<live-pusher id='livePusher1' ref="livePusher" class="livePusher" url=""
			mode="SD" :muted="true" :enable-camera="true" :auto-focus="true" :beauty="1" whiteness="2"
			aspect="9:16" @statechange="statechange" @netstatus="netstatus" @error = "error"
			></live-pusher>
			<button class="btn" @click="start">开始推流</button>
			<button class="btn" @click="pause">暂停推流</button>
			<button class="btn" @click="resume">resume</button>
			<button class="btn" @click="stop">停止推流</button>
			<button class="btn" @click="snapshot">快照</button>
			<button class="btn" @click="startPreview">开启摄像头预览</button>
			<button class="btn" @click="stopPreview">关闭摄像头预览</button>
			<button class="btn" @click="switchCamera">切换摄像头</button>
	</view>
</template>


<script>
export default {
		data: {
				fil: true
		},
		onReady() {
				// 注意：需要在onReady中 或 onLoad 延时
				this.context = uni.createLivePusherContext("livePusher", this);
		},
		methods: {
			statechange(e) {
				console.log("statechange:" + JSON.stringify(e));
			},
			netstatus(e) {
				console.log("netstatus:" + JSON.stringify(e));
			},
			error(e) {
				console.log("error:" + JSON.stringify(e));
			},
			start: function() {
				this.context.start({
						success: (a) => {
								console.log("livePusher.start:" + JSON.stringify(a));
						}
				});
			},
			close: function() {
				this.context.close({
						success: (a) => {
								console.log("livePusher.close:" + JSON.stringify(a));
						}
				});
			},
			snapshot: function() {
				this.context.snapshot({
						success: (e) => {
								console.log(JSON.stringify(e));
						}
				});
			},
			resume: function() {
				this.context.resume({
						success: (a) => {
								console.log("livePusher.resume:" + JSON.stringify(a));
						}
				});
			},
			pause: function() {
				this.context.pause({
						success: (a) => {
								console.log("livePusher.pause:" + JSON.stringify(a));
						}
				});
			},
			stop: function() {
				this.context.stop({
						success: (a) => {
								console.log(JSON.stringify(a));
						}
				});
			},
			switchCamera: function() {
				this.context.switchCamera({
						success: (a) => {
								console.log("livePusher.switchCamera:" + JSON.stringify(a));
						}
				});
			},
			startPreview: function() {
				this.context.startPreview({
						success: (a) => {
								console.log("livePusher.startPreview:" + JSON.stringify(a));
						}
				});
			},
			stopPreview: function() {
				this.context.stopPreview({
						success: (a) => {
								console.log("livePusher.stopPreview:" + JSON.stringify(a));
						}
				});
			}
		}
}
</script>

<style lang="scss">

</style>

bbiu~biu~

发布了22 篇原创文章 · 获赞 56 · 访问量 8506

私信关注