欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

微信小程序媒體組件詳解(視頻,音樂,圖片)

 更新時間:2022年08月28日 09:08:21   作者:切切歆語  
這篇文章主要為大家詳細介紹了微信小程序媒體組件的相關(guān)資料,包括視頻,音樂,圖片,具有一定的參考價值,感興趣的小伙伴們可以參考一下

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

先來看看效果圖:

 

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屬性設(shè)置不同的顯示模式。

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的差不多,代碼少,功能強大; 

源碼地址

以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

最新評論