微信小程序媒體組件詳解（視頻，音樂(lè)，圖片）
更新時(shí)間：2022年08月28日 09:08:21 作者：切切歆語(yǔ)
這篇文章主要為大家詳細(xì)介紹了微信小程序媒體組件的相關(guān)資料，包括視頻，音樂(lè)，圖片，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
今天主要是簡(jiǎn)單的講一下小程序當(dāng)中的媒體組件，媒體組件包括：視頻，音樂(lè)，圖片等。
先來(lái)看看效果圖：
1、圖片Image
<!--
scaleToFill:不保持縱橫比縮放圖片，使圖片的寬高完全拉伸至填滿 image 元素
widthFix:寬度不變，高度自動(dòng)變化，保持原圖寬高比不變
aspectFill:保持縱橫比縮放圖片，只保證圖片的短邊能完全顯示出來(lái)。
也就是說(shuō)，圖片通常只在水平或垂直方向是完整的，另一個(gè)方向?qū)?huì)發(fā)生截取。
aspectFit: 保持縱橫比縮放圖片，使圖片的長(zhǎng)邊能完全顯示出來(lái)。也就是說(shuō)，可以完整地將圖片顯示出來(lái)。
-->
<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、音樂(lè)播放 audio
<!--
簡(jiǎn)單的實(shí)現(xiàn)音樂(lè)播放
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í)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了p5.js繪制創(chuàng)意自畫(huà)像，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-11-11
iframe的onreadystatechange事件在firefox下的使用
firefox不支持iframe的onreadystatechange事件，不過(guò)有個(gè)方法可以實(shí)現(xiàn)同等的效果,需要的朋友可以參考下2014-04-04
利用原生js實(shí)現(xiàn)html5小游戲之打磚塊（附源碼）
這篇文章主要給大家介紹了關(guān)于利用原生js實(shí)現(xiàn)html5小游戲之打磚塊的相關(guān)資料，這是最近工作遇到的一個(gè)小需求，文中通過(guò)示例代碼介紹的非常詳細(xì)，并分享了完整的源碼供大家參考學(xué)習(xí)，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧。2018-01-01
這篇文章主要介紹了JS鼠標(biāo)拖拽實(shí)現(xiàn)方法,實(shí)例分析JavaScript鼠標(biāo)事件及頁(yè)面元素屬性動(dòng)態(tài)變換的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-11-11
本文匯總了解決js跨域問(wèn)題的5種方法，除了最后一種使用flash解決跨域問(wèn)題由于過(guò)于高端，沒(méi)有做出介紹外，其余四種都做了下總結(jié)，這里推薦給有相同需求的小伙伴。2014-12-12
Bootstrap+jfinal實(shí)現(xiàn)省市級(jí)聯(lián)下拉菜單
這篇文章主要為大家詳細(xì)介紹了Bootstrap+jfinal實(shí)現(xiàn)省市級(jí)聯(lián)下拉菜單，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-05-05
跨瀏覽器的設(shè)置innerHTML方法...2006-09-09
javascript中的undefined和not defined區(qū)別示例介紹
這篇文章主要介紹了javascript中的undefined和not defined區(qū)別,需要的朋友可以參考下2014-02-02
bootstrap table實(shí)現(xiàn)雙擊可編輯、添加、刪除行功能
這篇文章主要為大家詳細(xì)介紹了bootstrap table實(shí)現(xiàn)雙擊可編輯、添加、刪除行功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-09-09
JS?中數(shù)組的增刪改查和對(duì)象的增刪改查實(shí)例詳解
這篇文章主要介紹了JS?中數(shù)組的增刪改查和對(duì)象的增刪改查實(shí)例詳解,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-07-07