最新国产好看的视频,伊人天堂AV在线,国产Aaaaaa视频,蜜臀视频在线观看一区,人妻av色图,密臀久久久精品影片,青青视频免费观看毛片,久草在线观看视,国产三级精品色情在线

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

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

1、功能介紹

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

2、video組件

2.1、用處

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

2.2、屬性

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

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

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、結構布局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組件進行控制

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’是對應的<video id="video">

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

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

總結

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

相關文章

最新評論

星座| 福鼎市| 合阳县| 中山市| 凭祥市| 健康| 青冈县| 廉江市| 镇雄县| 剑河县| 织金县| 金门县| 娱乐| 宜城市| 蒙山县| 库伦旗| 维西| 紫金县| 江永县| 石城县| 广西| 桐乡市| 大英县| 聂拉木县| 汕尾市| 搜索| 婺源县| 盐源县| 莎车县| 句容市| 泗洪县| 泰宁县| 永修县| 廉江市| 淮滨县| 东兴市| 琼结县| 新津县| 盐边县| 芦山县| 衡阳县|