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 种是裁剪模式。（传送门