小程序----video视频播放

Video小程序播放视频的组件。

Video组件

wx.createVideoContext(videoId, this)创建并返回 video 上下文 videoContext 对象。在自定义组件下,第二个参数传入组件实例this,以操作组件内 <video/> 组件

API

注:

  1. video 组件是由客户端创建的原生组件,它的层级是最高的,不能通过 z-index 控制层级。 2.不能scroll-view、swiper、picker-view、movable-view 中使用 video 组件。 3.css 动画对 video 组件无效。

.wxml

<view class="section tc">
  <video src="{{src}}"   controls ></video>
  <view class="btn-area">
    <button bindtap="bindButtonTap">获取视频</button>
  </view>
</view>
<view class="section tc">
  <video id="myVideo" src="http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400" binderror="videoErrorCallback" danmu-list="{{danmuList}}" enable-danmu danmu-btn controls></video>
  <view class="btn-area">
    <button bindtap="bindButtonTap">获取视频</button>
    <input bindblur="bindInputBlur"/>
    <button bindtap="bindSendDanmu">发送弹幕</button>
  </view>
</view>
<video src="" binderror="" hidden></video>

.js代码

function getRandomColor () {
  let rgb = []
  for (let i = 0 ; i < 3; ++i){
    let color = Math.floor(Math.random() * 256).toString(16)
    color = color.length == 1 ? '0' + color : color
    rgb.push(color)
  }
  return '#' + rgb.join('')
}

Page({
  onReady: function (res) {
    this.videoContext = wx.createVideoContext('myVideo')
  },
  inputValue: '',
    data: {
        src: '',
    danmuList: [
      {
        text: '第 1s 出现的弹幕',
        color: '#ff0000',
        time: 1
      },
      {
        text: '第 3s 出现的弹幕',
        color: '#ff00ff',
        time: 3
      }
    ]
    },
  bindInputBlur: function(e) {
    this.inputValue = e.detail.value
  },
    bindButtonTap: function() {  //视频下载
        var that = this
        wx.chooseVideo({
            sourceType: ['album', 'camera'],
            maxDuration: 60,
            camera: ['front','back'],
            success: function(res) {
                that.setData({
                    src: res.tempFilePath
                })
            }
        })
    },
  bindSendDanmu: function () {
    this.videoContext.sendDanmu({
      text: this.inputValue,
      color: getRandomColor()
    })
  },
    videoErrorCallback: function(e) {
      console.log('视频错误信息:');
      console.log(e.detail.errMsg);
    }
})

结果为:

效果图

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Windows Community

Windows 8.1 应用再出发 - 几种新增控件(2)

本篇我们接着来介绍Windows 8.1 的新增控件,分别是:Flyout、MenuFlyout、SettingsFlyout、Hub 和 Hyperlink。...

34310
来自专栏安富莱嵌入式技术分享

【二代示波器教程】第11章 示波器设计—功能模块划分

二代示波器的界面上做了五个按钮,分别用于不同功能的配置,本章节就为大家讲解这五个按钮实现的功能。

932
来自专栏CSDN技术头条

React开发实践:如何做出好用的Switch组件

前言 HTML5 将 Web 开发者的战场从传统的 PC 端带到了移动端。然而移动端交互的核心在于手势和滑动,如果只是将 PC 端的点击体验简单地移植到移动端,...

2139
来自专栏大数据钻研

能用HTML/CSS解决的问题就不要使用JS

为什么说能使用html/css解决的问题就不要使用JS呢?两个字,因为简单。简单就意味着更快的开发速度,更小的维护成本,同时往往具有更好的体验,下面介绍几个实例...

2864
来自专栏DeveWork

移动Web 开发中的一些前端知识收集汇总

在开发DeveMobile 与EaseMobile 主题 的时候积累了一些移动Web 开发的前端知识,本着记录总结的目的,特写这篇文章备忘一下。 要说移动Web...

1875
来自专栏iOS开发随笔

iOS类似淘宝头条的文字滚动广告

最近两个项目都用到类似淘宝头条的功能,就是文字上下无限循环滚动,所以决定简单封装一下,以便以后使用。由于习惯用SDCycleScrollView来做广告图的无限...

3543
来自专栏守候书阁

css写作建议和性能优化小结

还有几天就到国庆中秋了,快要放假了,先祝大家节日快乐!之前写过js的写作建议和技巧,那么今天就来聊聊css吧!说到css,每一个网页都离不开css,但是对于cs...

612
来自专栏韩东吉的Unity杂货铺

零基础入门 23: UGUI ScrollView

今天要分享的内容,是近期内关于UGUI的最后一篇,UGUI里的滚动视图ScrollView,后期的内容会根据项目实用的功能组件进行分享。

1341
来自专栏程序员叨叨叨

Mac使用小技巧

许多从windows转向Mac的童鞋们都会感觉鼠标的滚动方向不习惯,这里告诉大家如何修改鼠标滚动方向:

511
来自专栏Golang语言社区

go语言 tcp通信例子

go 的tcp的应用层代码看起来极为简单 1,多个协程同时Accept , 不知道这种实现有没有什么问题 2,多个协程同时处理网络IO事件, 貌似意味着, 有多...

41316

扫码关注云+社区