微信小程序——简易的视频播放和发送弹幕笔记

最新推荐文章于 2024-07-24 21:37:50 发布

热爱前端，学习前端

最新推荐文章于 2024-07-24 21:37:50 发布

阅读量761

点赞数 1

分类专栏：微信小程序文章标签：微信小程序音视频小程序

本文链接：https://blog.csdn.net/weixin_61972561/article/details/130773639

版权

微信小程序专栏收录该内容

22 篇文章 2 订阅

订阅专栏

以下是.wxml代码

<!--pages/vedio/vedio.wxml-->
<view class="vedio-container">
  <!-- 给视频组件创建一个id（video），用于API创建时绑定这个id -->
<video id="video" src="http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a"/>
<input bindinput="danmuText" type="text"/>
<button bindtap="danmu" type="warn">发送弹幕</button>
<button bindtap="tapPlay" type="primary">播放</button>
<button bindtap="tapPause" type="default">暂停</button>
</view>

以下是.js代码

// pages/vedio/vedio.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    // 存储弹幕内容
    text: '',
    //用于创建音频实例化
    video: ''

  },
  // 获取弹幕文字
  danmuText(e) {
    this.setData({
      text: e.detail.value
    });
  },
  // 视频设置弹幕
  danmu() {
    this.data.video.sendDanmu({
      text: this.data.text,
      color: "fff"
    })

  },
  // 视频播放
  tapPlay() {
    this.data.video.play()
  },
  // 视频暂停
  tapPause() {
    this.data.video.pause()
  },


  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    //  创建音频实例化
    this.data.video = wx.createVideoContext('video')
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  }
})

以下是.wxss代码

.vedio-container{
  padding: 20rpx;
}
video{
  width: 100%;
}
input{
  width: 100%;
  height: 100rpx;
  border: 2rpx solid #cccccc;
  padding-left: 20rpx;
}
button{
  margin-top: 40rpx;
}