亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

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

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

1、功能介紹

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

2、video組件

2.1、用處

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

2.2、屬性

屬性說明
src視頻的資源地址
loop是否循環(huán)播放，默認(rèn)false
controls是否顯示默認(rèn)播放按鈕(暫停，播放進(jìn)度，時間）默認(rèn)為true 
danmu-list彈幕列表
danmu-btn是否顯示彈幕按鈕，只在初始化有效，不能動態(tài)變更，默認(rèn)為false
enable-danmu是否展示彈幕，只在初始化有效，不能動態(tài)變更，默認(rèn)false
autoplay是否自動播放，默認(rèn)false
poster視頻封面的圖片網(wǎng)絡(luò)資源地址，如果controls屬性為false,則設(shè)置poster無效
bindplay當(dāng)播放時觸發(fā)play事件
bindpause當(dāng)暫停播放時觸發(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、彈幕實現(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對象，用于對video組件進(jìn)行控制

7、獲取視頻功能

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

8、運行效果

附：小程序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’是對應(yīng)的<video id="video">

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

3.隱藏播放鍵在開發(fā)者工具中無效，要用真機調(diào)試才看的出來

總結(jié)

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

相關(guān)文章

  • 一步步教你用js簡單實現(xiàn)新年倒計時

    一步步教你用js簡單實現(xiàn)新年倒計時

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

    JavaScript枚舉選擇jquery插件代碼實例

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

    JS運動特效之完美運動框架實例分析

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

    javascript原始值和對象引用實例分析

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

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

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

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

    TypeScript引入了很多靜態(tài)編譯語言的特性，今天有一個類型需要著重討論下，這就是enum，需要的朋友們下面隨著小編來一起學(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)問題

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

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

    24個實用JavaScript?開發(fā)技巧

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

    JavaScript對Json的增刪改屬性詳解

    下面小編就為大家?guī)硪黄狫avaScript對Json的增刪改屬性詳解。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2016-06-06

最新評論