视频视频播放器

wxml

<!-- 视频播放器 -->

<video id="myVideo" controls src="{{src}}" enable-danmu danmu-btn></video>

<!-- 弹幕 -->

<view class="duanmu">

  <input type="text" placeholder="请输入弹幕" bindinput="bindInputBlur"/>

  <button bindtap="Danmu" formType="submit">发送弹幕</button>

</view>

<!-- 视频列表 -->

<view class="list">

  <view class="bar" wx:for="{{list}}" data-url="{{item.videoUrl}}" bindtap="playVideo" wx:key="id">

    <image src="../../image/bofang.webp"></image>

    <text>{{item.title}}</text>

  </view>

</view>

wxss

/* pages/index3/index3.wxss */

video{

  width: 100vw;

}

.duanmu{

  display:flex;

  flex-direction:row ;

  

}

input{

  border: 1rpx solid #987938;

  flex-grow: 7;

  height: 100rpx;

}

button{

  color:white;

  background-color:#987938 ;

  width: 20rpx;

}

.list{

  width: 100%;

  min-height: 400rpx;

}

.bar{

  width: 95%;

  display: flex;

  border-bottom: 1px solid #987938;

  margin: 10rpx;

}

image{

  width: 70rpx;

  height: 70rpx;

  margin: 20rpx;

}

text{

  font-size: 45rpx;

  color: #987938;

  margin: 20rpx;

  flex-grow: 1;

}

js

// pages/index3/index3.js

Page({

  /**

   * 页面的初始数据

   */

  data: {

    inputValue: '',

 

    src:"",

    list:[

      {

     

        id:"123",

        title:"第一个视频",

videoUrl:"http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400" 

      },

      {

        id:"456",

        title:"第二个视频",

 videoUrl:"https://www.w3school.com.cn/i/movie.ogg" 

      },

      {

        id:"126",

        title:"第三个视频",

 videoUrl:"http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400" 

      }

    ]

  },

  bindInputBlur: function(e) {

    this.inputValue = e.detail.value

    console.log(e);

  },

  Danmu:function (a) {

    this.videoCtx.sendDanmu({

      text: this.inputValue,

      color: "red"

    })

    console.log(a);

  },

// getdanmu:function(e){

//     console.log(e);

// this.setData({

//   danmutxt:e.detail.value

// })

//   },

// bindSendDanmu:function(a){

//     console.log(a);

// //  var text=this.data.danmutxt

// //  this.videoCtx.senddanmu({

// //    text:text,

// //    color:"red"

// //  })

// this.videoCtx.sendDanmu({

//   text: danmutxt,

//   color:"red"

// })

//   },

playVideo:function(e){

  console.log(e);

this.videoCtx.stop()

//停止播放之前正在播放的视频

this.setData({

  src:e.currentTarget.dataset.url

})

//更新视频地址

this.videoCtx.play()

//播放新的视频

},

  /**

   * 生命周期函数--监听页面加载

   */

  onLoad: function (options) {

this.videoCtx=wx.createVideoContext('myVideo')

  },

  playVideo:function(e){

    console.log(e);

  this.videoCtx.stop()

  //停止播放之前正在播放的视频

  this.setData({

    src:e.currentTarget.dataset.url

  })

  //更新视频地址

  this.videoCtx.play()

  //播放新的视频

  },

    /**

     * 生命周期函数--监听页面加载

     */

    onLoad: function (options) {

  this.videoCtx=wx.createVideoContext('myVideo')

    },

  

  /**

   * 生命周期函数--监听页面初次渲染完成

   */

  onReady: function () {

  },

  /**

   * 生命周期函数--监听页面显示

   */

  onShow: function () {

  },

  /**

   * 生命周期函数--监听页面隐藏

   */

  onHide: function () {

  },

  /**

   * 生命周期函数--监听页面卸载

   */

  onUnload: function () {

  },

  /**

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

   */

  onPullDownRefresh: function () {

  },

  /**

   * 页面上拉触底事件的处理函数

   */

  onReachBottom: function () {

  },

  /**

   * 用户点击右上角分享

   */

  onShareAppMessage: function () {

  }

})