微信小程序之video组件视频播放

目录

• 1、功能介绍
• 2、video组件
• 2.1、用处
• 2.2、属性
• 3、index.js中的数据部分
• 4、结构布局index.wxml
• 5、样式部分index.wxss
• 6、弹幕实现功能
• 7、获取视频功能
• 8、运行效果
• 附：小程序video自定义播放按钮
• 总结

1、功能介绍

可以实现视频的播放暂停，发送弹幕，获取视频所处位置等。

2、video组件

2.1、用处

video组件常用于视频的播放，默认宽度为300px，高度为225px。

2.2、属性

属性说明src视频的资源地址loop是否循环播放，默认falsecontrols是否显示默认播放按钮(暂停，播放进度，时间）默认为true danmu-list弹幕列表danmu-btn是否显示弹幕按钮，只在初始化有效，不能动态变更，默认为falseenable-danmu是否展示弹幕，只在初始化有效，不能动态变更，默认falseautoplay是否自动播放，默认falseposter视频封面的图片网络资源地址，如果controls属性为false,则设置poster无效bindplay当播放时触发play事件bindpause当暂停播放时触发pause事件

3、index.js中的数据部分

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">发送弹幕</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、弹幕实现功能

 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"
    })
  },

创建的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.隐藏播放键在开发者工具中无效，要用真机调试才看的出来

总结

到此这篇关于微信小程序之video组件视频播放的文章就介绍到这了,更多相关小程序video视频播放内容请搜索自由互联以前的文章或继续浏览下面的相关文章希望大家以后多多支持自由互联！