【Kevin Learn 小程序】--＞video

Kevin-Dev

已于 2022-03-16 14:20:30 修改

阅读量1.2k

点赞数

分类专栏： Android -- 小程序文章标签：小程序

于 2020-02-23 12:53:20 首次发布

本文为博主原创文章，未经博主允许不得转载。

本文链接：https://blog.csdn.net/duoduo_11011/article/details/104458188

版权

本文介绍了如何在Kevin Learn小程序中使用video组件，包括展示效果图、详细解释组件属性，并通过具体的实例代码（如app.js, app.json, video.js, video.json, video.wxml, video.wxss以及引入的weui.wxss）来演示其应用。" 101472520,6710781,Java实现ICMP Ping程序详解,"['Java编程', '网络编程', ' ICMP协议', '网络诊断', '命令行工具']

摘要由CSDN通过智能技术生成

效果图

在这里插入图片描述

属性

参考：video

实例

app.js

//app.js
App({
   
  onLaunch: function () {
   
    console.log('App Launch')
  },
  onShow: function () {
   
    console.log('App Show')
  },
  onHide: function () {
   
    console.log('App Hide')
  },
  globalData: {
   
    hasLogin: false
  }
})

app.json

{
   
  "pages": [
    "pages/video/video"
  ],
  "window": {
   
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle": "black"
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

video.js

function getRandomColor() {
   
  const 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)
  }
})

video.json

{
   
  "navigationBarTitleText": "video 组件"
}

video.wxml

<view class="container">
  <view class="page-body">
    <view class="page-section tc">
      <video id="myVideo"              src="https://www.apple.com/105/media/cn/mac/family/2018/46c4b917_abfd_45a3_9b51_4e3054191797/films/bruce/mac-bruce-tpl-cn-2018_1280x720h.mp4" 
      binderror="videoErrorCallback" danmu-list="{
   {danmuList}}" enable-danmu danmu-btn controls></video>

      <view class="weui-cells">
        <view class="weui-cell weui-cell_input">
          <view class="weui-cell__hd">
            <view class="weui-label">弹幕内容</view>
          </view>
          <view class="weui-cell__bd">
            <input bindblur="bindInputBlur" class="weui-input" type="text" placeholder="在此处输入弹幕内容" />
          </view>
        </view>
      </view>
      <view class="btn-area">
        <button bindtap="bindSendDanmu" class="page-body-button" type="primary" formType="submit">发送弹幕</button>
      </view>
    </view>
  </view>
</view>

video.wxss

@import "../../common/lib/weui.wxss";

.weui-cells{
   
  margin-top: 80rpx;
  text-align: left;
}
.weui-label{
   
  width: 5em;
}

weui.wxss

page {
   
  line-height: 1.6;
  font-family: -apple-system-font, "Helvetica Neue", sans-serif;
}
icon {
   
  vertical-align: middle;
}
.weui-cells {
   
  position: relative;
  margin-top: 1.17647059em;
  background-color: #FFFFFF;
  line-height: 1.41176471;
  font-size: 17px;
}
.weui-cells:before {
   
  content: " ";
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  height: 1px;
  border-top: 1rpx solid #D9D9D9;
  color: #D9D9D9;
}
.weui-cells:after {
   
  content: " ";
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  height: 1px;
  border-bottom: 1rpx solid #D9D9D9;
  color: #D9D9D9;
}
.weui-cells__title {
   
  margin-top: .77em;
  margin-bottom: .3em;
  padding-left: 15px;
  padding-right: 15px;
  color: #999999;
  font-size: 14px;
}
.weui-cells_after-title {
   
  margin-top: 0;
}
.weui-cells__tips {
   
  margin-top: .3em;
  color: #999999;
  padding-left: 15px;
  padding-right: 15px;
  font-size: 14px;
}
.weui-cell {
   
  padding: 10px 15px;
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
          align-items: center;
}
.weui-cell:before {
   
  content: " ";
  position: absolute;
  left: 0;
  top: 0;
  right: