溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

微信小程序媒體組件詳解（視頻，音樂，圖片）

發(fā)布時(shí)間：2020-10-14 10:15:43 來源：腳本之家 閱讀：191 作者：切切歆語(yǔ) 欄目：web開發(fā)

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

先來看看效果圖：

微信小程序媒體組件詳解（視頻，音樂，圖片）　

1、圖片Image

<!-- 
 scaleToFill:不保持縱橫比縮放圖片，使圖片的寬高完全拉伸至填滿 image 元素 
 widthFix:寬度不變，高度自動(dòng)變化，保持原圖寬高比不變 
 aspectFill:保持縱橫比縮放圖片，只保證圖片的短邊能完全顯示出來。 
    也就是說，圖片通常只在水平或垂直方向是完整的，另一個(gè)方向?qū)?huì)發(fā)生截取。 
 aspectFit: 保持縱橫比縮放圖片，使圖片的長(zhǎng)邊能完全顯示出來。也就是說，可以完整地將圖片顯示出來。 
 
 --> 
 
<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屬性設(shè)置不同的顯示模式。

2、音樂播放  audio

<!-- 
 簡(jiǎn)單的實(shí)現(xiàn)音樂播放 
 src：播放音頻的資源地址 
 poster：封面圖片地址 
 controls：是否顯示默認(rèn)控件 
 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的差不多，代碼少，功能強(qiáng)大； 

源碼地址

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持億速云。

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手