微信小程序媒體組件詳解(視頻,音樂,圖片)
更新時間: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)文章
JavaScript數(shù)據(jù)結(jié)構(gòu)之二叉樹的計數(shù)算法示例
這篇文章主要介紹了JavaScript數(shù)據(jù)結(jié)構(gòu)之二叉樹的計數(shù)算法,結(jié)合具體實例形式分析了javascript二叉樹記錄更新次數(shù)的原理與操作技巧,需要的朋友可以參考下2017-04-04JavaScript實現(xiàn)監(jiān)控上傳和下載進度
這篇文章主要介紹了JavaScript實現(xiàn)監(jiān)控上傳和下載進度,文章圍繞主題展開詳細的內(nèi)容介紹,具有一定的參考價值需要的小伙伴可以參考一下2022-05-05typescript在node.js下使用別名(paths)無效的問題詳解
這篇文章主要給大家介紹了關(guān)于typescript在node.js下使用別名(paths)無效問題的相關(guān)資料,文中通過圖文以及示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2022-07-07