微信小程序——video视频播放

1、功能介绍

 

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

2、video组件

2.1、用处

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

2.2、属性

属性说明
src视频的资源地址
loop是否循环播放,默认false
controls是否显示默认播放按钮(暂停,播放进度,时间)默认为true 
danmu-list弹幕列表
danmu-btn是否显示弹幕按钮,只在初始化有效,不能动态变更,默认为false
enable-danmu是否展示弹幕,只在初始化有效,不能动态变更,默认false
autoplay是否自动播放,默认false
poster视频封面的图片网络资源地址,如果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、运行效果


原文连接:https://blog.csdn.net/qq_50582468/article/details/121192610

相关推荐

我用了九个小时给高中同学写了一款留言板!

【小程序】快来开发你的第一个微信小游戏(详细流程)

【微信小程序】组件使用及属性参考

【微信小程序】页面导航详解

微信小程序---全局配置及页面配置

微信小程序实验案例:简易成语小词典

密码太多不知道怎么记录?不如自己写个密码箱小程序

助力乡村振兴,我为农民伯伯开发了这款微信小程序

【微信小程序】常用组件及基本使用详解

微信小程序--》你真的了解小程序组件的使用吗?

微信小程序---wxss模板样式

微信小程序使用echarts/数据刷新重新渲染/图层遮挡问题

【微信小程序】使出千手浮图—回滚式

微信小程序--》小程序简介与工具安装配置

【小程序项目开发-- 京东商城】uni-app之商品列表页面 (上)

【微信小程序】页面配置,网络数据请求

uniapp+vue3 setup+ts 开发小程序实战(路由篇)

uniapp+vue3 setup+ts 开发小程序实战(网络请求封装篇)

《微信小程序-进阶篇》package.json版本说明及各类版本符号详解(一)

微信小程序开发学习1(小程序的入门知识)