• 售前

  • 售后

热门帖子
入门百科

微信小程序使用视频播放器video组件

[复制链接]
123457033 显示全部楼层 发表于 2021-10-26 13:55:09 |阅读模式 打印 上一主题 下一主题
本文实例为各人分享了微信小程序利用视频播放器video组件的具体代码,供各人参考,具体内容如下
在app.json中配置好页面路由和权限。
1.app.json
  1. {
  2.   "pages":[
  3.     "pages/video/video"
  4. ],
  5. "permission": {
  6.     "scope.writePhotosAlbum": {
  7.       "desc": "读取相册"
  8.     }
  9.   }
  10. }
复制代码
利用video组件
2.video.wxml
  1. <view class="section tc">
  2.   <video
  3.     id="myVideo"
  4.     src="http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400"
  5.     danmu-list="{{danmuList}}"
  6.     enable-danmu
  7.     danmu-btn
  8.     controls
  9.   ></video>
  10.   <view class="btn-area">
  11.     <button bindtap="bindButtonTap">获取视频</button>
  12.     <input bindblur="bindInputBlur" />
  13.     <button bindtap="bindSendDanmu">发送弹幕</button>
  14.   </view>
  15. </view>
复制代码
3. audio.js
  1. function getRandomColor() {
  2.   const rgb = []
  3.   for (let i = 0; i < 3; ++i) {
  4.     let color = Math.floor(Math.random() * 256).toString(16)
  5.     color = color.length == 1 ? '0' + color : color
  6.     rgb.push(color)
  7.   }
  8.   return '#' + rgb.join('')
  9. }
  10. Page({
  11.   onReady(res) {
  12.     this.videoContext = wx.createVideoContext('myVideo')
  13.   },
  14.   inputValue: '',
  15.   data: {
  16.     src: '',
  17.     danmuList: [
  18.       {
  19.         text: '第 1s 出现的弹幕',
  20.         color: '#ff0000',
  21.         time: 1
  22.       },
  23.       {
  24.         text: '第 3s 出现的弹幕',
  25.         color: '#ff00ff',
  26.         time: 3
  27.       }]
  28.   },
  29.   bindInputBlur(e) {
  30.     this.inputValue = e.detail.value
  31.   },
  32.   bindButtonTap() {
  33.     const that = this
  34.     wx.chooseVideo({
  35.       sourceType: ['album', 'camera'],
  36.       maxDuration: 60,
  37.       camera: ['front', 'back'],
  38.       success(res) {
  39.         that.setData({
  40.           src: res.tempFilePath
  41.         })
  42.       }
  43.     })
  44.   },
  45.   bindSendDanmu() {
  46.     this.videoContext.sendDanmu({
  47.       text: this.inputValue,
  48.       color: getRandomColor()
  49.     })
  50.   }
  51. })
复制代码
效果:

以上就是本文的全部内容,盼望对各人的学习有所资助,也盼望各人多多支持脚本之家。

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作