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

微信小程序之video組件視頻播放

 更新時(shí)間:2022年04月24日 15:46:14   作者:涼沫serendipity  
video控件是微信小程序提供的系統(tǒng)組件之一,用于實(shí)現(xiàn)播放視頻的功能,這篇文章主要給大家介紹了關(guān)于微信小程序之video組件視頻播放的相關(guān)資料,需要的朋友可以參考下

1、功能介紹

可以實(shí)現(xiàn)視頻的播放暫停,發(fā)送彈幕,獲取視頻所處位置等。

2、video組件

2.1、用處

video組件常用于視頻的播放,默認(rèn)寬度為300px,高度為225px。

2.2、屬性

屬性說(shuō)明
src視頻的資源地址
loop是否循環(huán)播放,默認(rèn)false
controls是否顯示默認(rèn)播放按鈕(暫停,播放進(jìn)度,時(shí)間)默認(rèn)為true 
danmu-list彈幕列表
danmu-btn是否顯示彈幕按鈕,只在初始化有效,不能動(dòng)態(tài)變更,默認(rèn)為false
enable-danmu是否展示彈幕,只在初始化有效,不能動(dòng)態(tài)變更,默認(rèn)false
autoplay是否自動(dòng)播放,默認(rèn)false
poster視頻封面的圖片網(wǎng)絡(luò)資源地址,如果controls屬性為false,則設(shè)置poster無(wú)效
bindplay當(dāng)播放時(shí)觸發(fā)play事件
bindpause當(dāng)暫停播放時(shí)觸發(fā)pause事件

3、index.js中的數(shù)據(jù)部分

data: {
    src:"http://localhost:3000/1.mp4",
    danmuList:[
      {text:'first',color:'#ff0000',time:1},
      {text:'second',color:'#008080',time:2},
      {text:'three',color:'#ff00ff',time:3}
    ]
  },

4、結(jié)構(gòu)布局index.wxml

<video id="myVideo" src='{{src}}' danmu-list="{{danmuList}}" enable-danmu  danmu-btn controls></video>
<input bindblur="bindInputBlur"/>
<button bindtap="bindSendDanmu">發(fā)送彈幕</button>
<button bindtap="bindButtonTap">獲取視頻</button>

5、樣式部分index.wxss

video{
  width: 100vw;
}
input{
  border: 1rpx  solid #ccc;
  margin: 20rpx;
}
button{
  background-color: rgb(76, 250, 114);
}
button{
  margin-bottom: 10rpx;
}

6、彈幕實(shí)現(xiàn)功能

 videoContext:null,
  inputValue:'',
  onReady:function(){
    this.videoContext=wx.createAudioContext('myVideo')
  },
  bindInputBlur:function(e){
    this.inputValue=e.detail.value
  },
 bindSendDanmu: function () {
    this.videoContext.sendDanmu({
      text: this.inputValue,
      color: "#f90"
    })
  },

創(chuàng)建的videoContent對(duì)象,用于對(duì)video組件進(jìn)行控制

7、獲取視頻功能

bindButtonTap:function(){
    wx.chooseVideo({
      sourceType:['album','camera'],
      maxDuration:60,
      camera: 'back',
      success:res=>{
        this.setData({
          src:res.tempFilePath
        })
      }
    })
  }

8、運(yùn)行效果

附:小程序video自定義播放按鈕

html:

<video show-center-play-btn="{{false}}" 
       controls="{{false}}" 
       id="video"
       src='{{article.video}}'></video>

<!-- 播放按鈕 -->
<view class='video-play'>
    <image  bindtap="videoPlay" class='video-btn' src='/images/icon/class/play.png'/>
    <image  bindtap="videoPause" class='video-btn' src='/images/icon/class/pause.png'/>
</view>

js:

// 播放
videoPlay() {
   console.log('開始播放')
   
   var videoplay = wx.createVideoContext('video')
   videoplay.play()
},
    
 // 暫停播放
videoPause(){
   console.log('暫停播放')
   
   var videoplay = wx.createVideoContext('video')
   videoplay.pause()
},

注意:

1. wx.createVideoContext(‘video’), 這里的’video’是對(duì)應(yīng)的<video id="video">

2. show-center-play-btn 和 controls 設(shè)置值的時(shí)候,要寫成="{{false}}"才會(huì)生效

3.隱藏播放鍵在開發(fā)者工具中無(wú)效,要用真機(jī)調(diào)試才看的出來(lái)

總結(jié)

到此這篇關(guān)于微信小程序之video組件視頻播放的文章就介紹到這了,更多相關(guān)小程序video視頻播放內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

  • 一步步教你用js簡(jiǎn)單實(shí)現(xiàn)新年倒計(jì)時(shí)

    一步步教你用js簡(jiǎn)單實(shí)現(xiàn)新年倒計(jì)時(shí)

    一轉(zhuǎn)眼已經(jīng)臘月了,相信小伙伴們一定想知道我們距離2023新年還有多少天,下面這篇文章主要給大家介紹了關(guān)于如何一步步教你用js簡(jiǎn)單實(shí)現(xiàn)新年倒計(jì)時(shí)的相關(guān)資料,需要的朋友可以參考下
    2022-12-12
  • JavaScript枚舉選擇jquery插件代碼實(shí)例

    JavaScript枚舉選擇jquery插件代碼實(shí)例

    這篇文章主要介紹了JavaScript枚舉選擇jquery插件代碼實(shí)例,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
    2020-11-11
  • JS運(yùn)動(dòng)特效之完美運(yùn)動(dòng)框架實(shí)例分析

    JS運(yùn)動(dòng)特效之完美運(yùn)動(dòng)框架實(shí)例分析

    這篇文章主要介紹了JS運(yùn)動(dòng)特效之完美運(yùn)動(dòng)框架,結(jié)合實(shí)例形式分析了javascript針對(duì)運(yùn)動(dòng)中的元素屬性檢測(cè)與判斷相關(guān)操作技巧,需要的朋友可以參考下
    2018-01-01
  • javascript原始值和對(duì)象引用實(shí)例分析

    javascript原始值和對(duì)象引用實(shí)例分析

    這篇文章主要介紹了javascript原始值和對(duì)象引用的方法,實(shí)例分析了javascript原始值和對(duì)象引用的功能、定義與相關(guān)技巧,需要的朋友可以參考下
    2015-04-04
  • 使用js Math.random()函數(shù)生成n到m間的隨機(jī)數(shù)字

    使用js Math.random()函數(shù)生成n到m間的隨機(jī)數(shù)字

    何使用js生成n到m間的隨機(jī)數(shù)字,主要目的是為后期的js生成驗(yàn)證碼做準(zhǔn)備,Math.random()函數(shù)返回0和1之間的偽隨機(jī)數(shù)
    2014-10-10
  • 為什么TypeScript的Enum會(huì)出現(xiàn)問(wèn)題

    為什么TypeScript的Enum會(huì)出現(xiàn)問(wèn)題

    TypeScript引入了很多靜態(tài)編譯語(yǔ)言的特性,今天有一個(gè)類型需要著重討論下,這就是enum,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2021-06-06
  • 兼容FF/IE跟隨鼠標(biāo)的層的效果

    兼容FF/IE跟隨鼠標(biāo)的層的效果

    兼容FF/IE跟隨鼠標(biāo)的層的效果...
    2007-08-08
  • 輕松理解Javascript變量的相關(guān)問(wèn)題

    輕松理解Javascript變量的相關(guān)問(wèn)題

    這篇文章主要給大家介紹了關(guān)于Javascript變量的相關(guān)問(wèn)題,文中給出了詳細(xì)的介紹和示例代碼,相信對(duì)大家的理解和學(xué)習(xí)具有一定的參考借鑒價(jià)值,有需要的朋友們下面來(lái)一起看看吧。
    2017-01-01
  • 24個(gè)實(shí)用JavaScript?開發(fā)技巧

    24個(gè)實(shí)用JavaScript?開發(fā)技巧

    這篇文章主要給大家分享了24個(gè)實(shí)用JavaScript?的開發(fā)技巧,文章圍繞JavaScript?的開發(fā)技巧講解展開全文,具有一定的參考價(jià)值,需要的朋友可以參考一下,希望對(duì)你有所幫助
    2021-12-12
  • JavaScript對(duì)Json的增刪改屬性詳解

    JavaScript對(duì)Json的增刪改屬性詳解

    下面小編就為大家?guī)?lái)一篇JavaScript對(duì)Json的增刪改屬性詳解。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2016-06-06

最新評(píng)論