tencent cloud

<view class="page">
  <view class="page__hd">
    <text class="page__title">image</text>
    <text class="page__desc">Image</text>
  </view>
  <view class="page__bd">
    <view class="section section_gap" wx.for="{{array}}" wx.for-item="item">
      <view class="section__title">{{item.text}}</view>
      <view class="section__ctn">
        <image
          style="width: 200px; height: 200px; background-color: #eeeeee;"
          mode="{{item.mode}}"
          src="{{src}}"
        ></image>
      </view>
    </view>
  </view>
</view>

Page({
  data: {
    array: [{
      mode: 'scaleToFill',
      text: 'scaleToFill: Do not maintain aspect ratio when scaling the image, ensuring the image fully adapts.'
    }, {
      mode: 'aspectFit',
      text: 'aspectFit: Maintain aspect ratio when scaling the image, ensuring the image's longer side is fully displayed.'
    }, {
      mode: 'aspectFill',
      text: 'aspectFill: Maintain aspect ratio when scaling the image, ensuring the image's shorter side is fully displayed.'
    }, {
      mode: 'top',
      text: 'top: Only display the top region of the image without scaling the image.'
    }, {
      mode: 'bottom',
      text: 'bottom: Only display the bottom region of the image without scaling the image.'
    }, {
      mode: 'center',
      text: 'center: Only display the central region of the image without scaling the image.'
    }, {
      mode: 'left',
      text: 'left: Only display the left region of the image without scaling the image.'
    }, {
      mode: 'right',
      text: 'right: Only display the right region of the image without scaling the image.'
    }, {
      mode: 'top left',
      text: 'top left: Only display the top left region of the image without scaling the image.'
    }, {
      mode: 'top right',
      text: 'top right: Only display the top right region of the image without scaling the image.'
    }, {
      mode: 'bottom left',
      text: 'bottom left: Only display the bottom left region of the image without scaling the image.'
    }, {
      mode: 'bottom right',
      text: 'bottom right: Only display the bottom right region of the image without scaling the image.'
    }],
    src: '../resources/cat.jpg'
  },
  imageError(e) {
    console.log('Error event occurring in image3, carrying the value', e.detail.errMsg)
  }
})

<view class="section tc">
  <video src="{{src}}" controls></video>
  <view class="btn-area">
    <button bindtap="bindButtonTap">Get video</button>
  </view>
</view>

<view class="section tc">
  <video
    id="myVideo"
    src="https://qzonestyle.gtimg.cn/qzone/qzact/act/external/qq-video/qq-video.mp4"
    danmu-list="{{danmuList}}"
    enable-danmu
    danmu-btn
    controls
  ></video>
  <view class="btn-area">
    <button bindtap="bindButtonTap">Get video</button>
    <input bindblur="bindInputBlur" />
    <button bindtap="bindSendDanmu">Dispatch the barrage</button>
  </view>
</view>

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(res) {
    this.videoContext = wx.createVideoContext('myVideo')
  },
  inputValue: '',
  data: {
    src: '',
    danmuList: [
      {
        text: 'Barrage appearing at the 1st second',
        color: '#ff0000',
        time: 1
      },
      {
        text: 'Barrage appearing at the 3rd second',
        color: '#ff00ff',
        time: 3
      }]
  },
  bindInputBlur(e) {
    this.inputValue = e.detail.value
  },
  bindButtonTap() {
    const that = this
    wx.chooseVideo({
      sourceType: ['album', 'camera'],
      maxDuration: 60,
      camera: ['front', 'back'],
      success(res) {
        that.setData({
          src: res.tempFilePath
        })
      }
    })
  },
  bindSendDanmu() {
    this.videoContext.sendDanmu({
      text: this.inputValue,
      color: getRandomColor()
    })
  }
})

  <view class="wrap">
      <view class="card-area">
          <view class="top-description border-bottom">
              <view>The animation's alpha channel information is on the right side of the video</view>
              <view>alpha-direction='right'</view>
          </view>
          <view class="video-area">
              <animation-video
                  path="{{rightAlphaSrcPath}}"
                  loop="{{loop}}"
                  resource-width="800"
                  resource-height="400"
                  canvas-style="width:200px;height:200px"
                  autoplay="{{autoplay}}"
                  bindstarted="onStarted"
                  bindended="onEnded"
                  alpha-direction='right'
              ></animation-video>
          </view>
      </view>

      <view class="card-area">
          <view class="top-description border-bottom">
              <view>The animation's alpha channel information is on the left side of the video</view>
              <view>alpha-direction='left'</view>
          </view>
          <view class="video-area">
              <animation-video
                  path="{{leftAlphaSrcPath}}"
                  loop="{{loop}}"
                  resource-width="800"
                  resource-height="400"
                  canvas-style="width:200px;height:200px"
                  autoplay="{{autoplay}}"
                  bindstarted="onStarted"
                  bindended="onEnded"
                  alpha-direction='left'
              ></animation-video>
          </view>
      </view>
  </view>
  Page({
    data: {
      loop: true,
      leftAlphaSrcPath: 'https://efe-h2.cdn.bcebos.com/ceug/resource/res/2020-1/1577964961344/003e2f0dcd81.mp4',
      rightAlphaSrcPath: 'https://b.bdstatic.com/miniapp/assets/docs/alpha-right-example.mp4',
      autoplay: true
    },
    onStarted() {
      console.log('===onStarted');
    },
    onEnded() {
      console.log('===onEnded');
    }
  })

<!-- camera.wxml -->
<camera
  device-position="back"
  flash="off"
  binderror="error"
  style="width: 100%; height: 300px;"
></camera>
<button type="primary" bindtap="takePhoto">Take Photo</button>
<view>Preview</view>
<image mode="widthFix" src="{{src}}"></image>

// camera.js
Page({
  takePhoto() {
    const ctx = wx.createCameraContext()
    ctx.takePhoto({
      quality: 'high',
      success: (res) => {
        this.setData({
          src: res.tempImagePath
        })
      }
    })
  },
  error(e) {
    console.log(e.detail)
  }
})

Page({
  statechange(e) {
    console.log('live-player code:', e.detail.code)
  },
  error(e) {
    console.error('live-player error:', e.detail.errMsg)
  }
})