微信小程序媒體組件詳解（視頻，音樂，圖片）
更新時間：2022年08月28日 09:08:21 作者：切切歆語
這篇文章主要為大家詳細(xì)介紹了微信小程序媒體組件的相關(guān)資料，包括視頻，音樂，圖片，具有一定的參考價值，感興趣的小伙伴們可以參考一下
今天主要是簡單的講一下小程序當(dāng)中的媒體組件，媒體組件包括：視頻，音樂，圖片等。
先來看看效果圖：
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
<!--
簡單的實(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)大；
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
本篇文章主要介紹了js圖片加載效果實(shí)例代碼（延遲加載+瀑布流加載），非常具有實(shí)用價值，需要的朋友可以參考下2017-05-05
本篇文章主要介紹了博客內(nèi)容進(jìn)度插件的實(shí)現(xiàn)方法，具有很好的參考價值，下面跟著小編一起來看下吧2017-02-02
JavaScript數(shù)據(jù)結(jié)構(gòu)之二叉樹的計(jì)數(shù)算法示例
這篇文章主要介紹了JavaScript數(shù)據(jù)結(jié)構(gòu)之二叉樹的計(jì)數(shù)算法,結(jié)合具體實(shí)例形式分析了javascript二叉樹記錄更新次數(shù)的原理與操作技巧,需要的朋友可以參考下2017-04-04
LRU緩存就是一種常用策略,下面這篇文章主要給大家介紹了關(guān)于前端面試中常提到的LRU緩存策略的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-05-05
這篇文章主要為大家詳細(xì)介紹了js如何實(shí)現(xiàn)檢測用戶輸入密碼強(qiáng)度，從四個方面檢測用戶輸入的密碼的強(qiáng)度的，感興趣的小伙伴們可以參考一下2015-10-10
在JavaScript中，有時需要準(zhǔn)確知道一個變量的類型，顯然typeof函數(shù)不能滿足這個要求，這個函數(shù)在大多數(shù)情況下都返回object。2010-05-05
這篇文章主要介紹了異步安全加載javascript文件的方法,實(shí)例分析了javascript實(shí)現(xiàn)文件異步加載的具體技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-07-07
寫的一段拖動對象的代碼...2007-01-01
JavaScript實(shí)現(xiàn)監(jiān)控上傳和下載進(jìn)度
這篇文章主要介紹了JavaScript實(shí)現(xiàn)監(jiān)控上傳和下載進(jìn)度,文章圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價值需要的小伙伴可以參考一下2022-05-05
typescript在node.js下使用別名(paths)無效的問題詳解
這篇文章主要給大家介紹了關(guān)于typescript在node.js下使用別名(paths)無效問題的相關(guān)資料,文中通過圖文以及示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2022-07-07