微信小程序 video組件詳解
更新時(shí)間:2016年10月25日 10:07:10 投稿:lqh
這篇文章主要介紹了微信小程序 video組件詳解的相關(guān)資料,需要的朋友可以參考下
主要屬性:
效果圖:
ml:
<View>1.播放網(wǎng)絡(luò)視頻</View> <view > <video style="width: 100%;height=400px;margin:1px;" src="http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400" binderror="videoErrorCallback"></video> </view> <View>2.播放本地視頻</View> <view style="display: flex;flex-direction: column;"> <video style="width: 100%;height=400px;margin:1px;" src="{{src}}"></video> <view class="btn-area"> <button bindtap="bindButtonTap">打開(kāi)本地視頻</button> </view> </view>
js:
Page({ data: { src: '' }, /** * 打開(kāi)本地視頻 */ bindButtonTap: function() { var that = this //拍攝視頻或從手機(jī)相冊(cè)中選視頻 wx.chooseVideo({ //album 從相冊(cè)選視頻,camera 使用相機(jī)拍攝,默認(rèn)為:['album', 'camera'] sourceType: ['album', 'camera'], //拍攝視頻最長(zhǎng)拍攝時(shí)間,單位秒。最長(zhǎng)支持60秒 maxDuration: 60, //前置或者后置攝像頭,默認(rèn)為前后都有,即:['front', 'back'] camera: ['front','back'], //接口調(diào)用成功,返回視頻文件的臨時(shí)文件路徑,詳見(jiàn)返回參數(shù)說(shuō)明 success: function(res) { console.log(res.tempFilePaths[0]) that.setData({ src: res.tempFilePaths[0] }) } }) }, /** * 當(dāng)發(fā)生錯(cuò)誤時(shí)觸發(fā)error事件,event.detail = {errMsg: 'something wrong'} */ videoErrorCallback: function(e) { console.log('視頻錯(cuò)誤信息:') console.log(e.detail.errMsg) } })
感謝閱讀,希望能幫助到大家,謝謝大家對(duì)本站的支持!
相關(guān)文章
JavaScript中塊級(jí)作用域與函數(shù)作用域深入剖析
這篇文章主要為大家介紹了JavaScript中塊級(jí)作用域與函數(shù)作用域的實(shí)現(xiàn)原理深入剖析,2023-05-05關(guān)于JavaScript輪播圖的實(shí)現(xiàn)
這篇文章主要介紹了關(guān)于JavaScript輪播圖的實(shí)現(xiàn),下面文章主要是利用利用html 和 css 代碼實(shí)現(xiàn)輪播圖,詳細(xì)內(nèi)容請(qǐng)參考下面詳細(xì)內(nèi)容,希望對(duì)你有所幫助2021-11-11js題解LeetCode1051 高度檢查器哈希表對(duì)比
這篇文章主要為大家介紹了JS題解LeetCode1051 高度檢查器哈希表對(duì)比,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-12-12微信小程序 時(shí)間格式化(util.formatTime(new Date))詳解
這篇文章主要介紹了微信小程序 時(shí)間格式化(util.formatTime(new Date))詳解的相關(guān)資料,這里附實(shí)例,一目了然很容易解決,需要的朋友可以參考下2016-11-11微信小程序 出現(xiàn)47001 data format error原因解決辦法
這篇文章主要介紹了微信小程序 出現(xiàn)47001 data format error原因解決辦法的相關(guān)資料,需要的朋友可以參考下2017-03-03ant-design的upload組件中實(shí)現(xiàn)粘貼上傳實(shí)例詳解
這篇文章主要為大家介紹了ant-design的upload組件中實(shí)現(xiàn)粘貼上傳實(shí)例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-05-05