Detailed explanation of WeChat mini program video, music, and picture components

This article mainly introduces relevant information about the media components of WeChat mini programs, including videos, music, and pictures. It has certain reference value. Interested friends can refer to it.

Today is mainly simple Let’s talk about the media components in the mini program. Media components include: video, music, pictures, etc.

Let’s take a look at the renderings first:

　

1. Picture Image

<!-- 
 scaleToFill:不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素 
 widthFix:宽度不变，高度自动变化，保持原图宽高比不变 
 aspectFill:保持纵横比缩放图片，只保证图片的短边能完全显示出来。 
    也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。 
 aspectFit: 保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。 
 
 --> 
 
<image style=&#39;width: 100%; height:150px&#39; src=&#39;../img/models.jpg&#39; mode=&#39;scaleToFill&#39;></image> 
<image style=&#39;width: 200px; height:200px&#39; src=&#39;../img/models.jpg&#39; mode=&#39;widthFix&#39;></image> 
<image style=&#39;width: 200px; height:100px&#39; src=&#39;../img/models.jpg&#39; mode=&#39;aspectFill&#39;></image> 
<image style=&#39;width: 200px; height:100px&#39; src=&#39;../img/models.jpg&#39; mode=&#39;aspectFit&#39;></image>

Picture display, different display modes can be set according to the mode attribute.

2. Music playback audio

<!-- 
 简单的实现音乐播放 
 src：播放音频的资源地址 
 poster：封面图片地址 
 controls：是否显示默认控件 
 name：歌曲名称 
 author:歌曲作者 
 --> 
<audio src="{{url}}" poster="{{poster}}" controls="true" author="{{author}}" name="{{name}}"></audio>

3. Video playback video

<!-- 
 播放视频 
 src：视频资源链接 
 danmu-list:弹幕列表 
 danmu-btn:是否显示弹幕按钮 
 enable-danmu:是否展示弹幕，只在初始化有效 
 loop：是否循环播放 
 muted 是否静音播放 
 --> 
 
<video id=&#39;videocontext&#39; src="{{src}}" danmu-btn=&#39;true&#39; danmu-list=&#39;{{danmuList}}&#39; enable-danmu=&#39;true&#39; loop=&#39;false&#39; muted=&#39;false&#39;></video> 
<input class=&#39;text_danmu&#39; bindblur=&#39;bindInputBlur&#39; type=&#39;text&#39;></input> 
<button bindtap=&#39;bindSendDanmu&#39; type=&#39;primary&#39;>提交弹幕</button>

The controls are similar to those of H5, with less code and powerful functions;

The above is the detailed content of Detailed explanation of WeChat mini program video, music, and picture components. For more information, please follow other related articles on the PHP Chinese website!