這篇文章主要介紹微信小程序中媒體組件的示例分析，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！

成都創新互聯公司專注于桓臺企業網站建設,成都響應式網站建設公司,商城開發。桓臺網站建設公司,為桓臺等地區提供建站服務。全流程定制制作，專業設計，全程項目跟蹤，成都創新互聯公司專業和態度為您提供的服務

先來看看效果圖：

1、圖片Image

<!-- 
 scaleToFill:不保持縱橫比縮放圖片，使圖片的寬高完全拉伸至填滿 image 元素 
 widthFix:寬度不變，高度自動變化，保持原圖寬高比不變 
 aspectFill:保持縱橫比縮放圖片，只保證圖片的短邊能完全顯示出來。 
    也就是說，圖片通常只在水平或垂直方向是完整的，另一個方向將會發生截取。 
 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>

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

2、音樂播放  audio

<!-- 
 簡單的實現音樂播放 
 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：是否循環播放 
 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的差不多，代碼少，功能強大；

以上是“微信小程序中媒體組件的示例分析”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注創新互聯行業資訊頻道！

文章名稱：微信小程序中媒體組件的示例分析-創新互聯
URL鏈接：http://www.2m8n56k.cn/article15/jepgi.html

成都網站建設公司_創新互聯，為您提供企業網站制作、手機網站建設、網站制作、建站公司、動態網站、Google

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：[email protected]。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯