今天主要是簡單的講一下小程序當中的媒體組件，媒體組件包括：視頻，音樂，圖片等。

先來看看效果圖：

image

1：圖片Image

<!--
  scaleToFill:不保持縱橫比縮放圖片，使圖片的寬高完全拉伸至填滿 image 元素
  widthFix:寬度不變，高度自動變化，保持原圖寬高比不變
  aspectFill:保持縱橫比縮放圖片，只保證圖片的短邊能完全顯示出來。
              也就是說，圖片通常只在水平或垂直方向是完整的，另一個方向?qū)l(fā)生截取。
  aspectFit: 保持縱橫比縮放圖片，使圖片的長邊能完全顯示出來。也就是說，可以完整地將圖片顯示出來。 

 -->

<image style='width: 100%; height:150px' src='../img/models.jpg' mode='scaleToFill'></image>
<image style='width: 200px; height:200px' src='../img/models.jpg' mode='widthFix'></image>
<image style='width: 200px; height:100px' src='../img/models.jpg' mode='aspectFill'></image>
<image style='width: 200px; height:100px' src='../img/models.jpg' mode='aspectFit'></image>

圖片顯示，可根據(jù) mode屬性設置不同的顯示模式。

2：音樂播放 audio

<!--
    簡單的實現(xiàn)音樂播放
    src：播放音頻的資源地址
    poster：封面圖片地址
    controls：是否顯示默認控件
    name：歌曲名稱
    author:歌曲作者
 -->
<audio src="{{url}}" poster="{{poster}}" controls="true" author="{{author}}" name="{{name}}"></audio>

3：視頻播放 video

<!--
  播放視頻
   src：視頻資源鏈接
   danmu-list:彈幕列表
   danmu-btn:是否顯示彈幕按鈕
   enable-danmu:是否展示彈幕，只在初始化有效
   loop：是否循環(huán)播放
   muted  是否靜音播放
 -->
 
<video id='videocontext' src="{{src}}" danmu-btn='true' danmu-list='{{danmuList}}' enable-danmu='true' loop='false' muted='false'></video>
<input class='text_danmu' bindblur='bindInputBlur' type='text'></input>
<button bindtap='bindSendDanmu' type='primary'>提交彈幕</button>

控件使用都和H5的差不多，代碼少，功能強大；

源碼地址

https://github.com/DickyQie/wechat-applet-basics/tree/audio-video