原生组件

收藏

我的收藏

<view class="outer">
  <textarea value="文本框在下面" />
  <image
    mode="widthFix"
    src="https://s3.pstatp.com/toutiao/resource/developer/static/img/main-logo.8e3a839.png"
  />
</view>

.outer {
  position: relative;
  border: 1px solid;
}

.outer image {
  position: absolute;
  z-index: 1;
  bottom: 5px;
  right: 5px;
  width: 100px;
}

<video
  class="myVideo"
  root-class-name="myVideo"
  id="my-video"
  src="https//sf1-cdn-tos.douyinstatic.com/obj/microapp/frontend/misc/test-upload.mp4"
  bindfullscreenchange="fullscreenchange"
  showFullscreenBtn="{{false}}"
>
  <view class="danmu-group" hidden="{{!openDanmu}}">
    <view
      tt:for="{{danmu}}"
      tt:item="i"
      style="top: {{i.t}}%; left: {{i.l}}%; font-size: {{i.s}}px; color: {{i.c}};"
    >
      这是一条弹幕
    </view>
  </view>
  <switch bindchange="toggleDanmu" checked="{{openDanmu}}" />
  <button hidden="{{fs}}" bindtap="requestFs" size="mini">
    进入全屏
  </button>
  <button hidden="{{!fs}}" bindtap="exitFs" style="top: 100rpx;" size="mini">
    退出全屏
  </button>
  <image
    hidden="{{!fs}}"
    src="https://s3.pstatp.com/toutiao/resource/developer/static/img/main-logo.8e3a839.png"
    bindtap="touchimage"
  />
</video>

Page({
  data: {
    fs: false,
  },
  onLoad: function () {
    this.ctx = tt.createVideoContext("my-video");
  },
  fullscreenchange: function (e) {
    this.setData({
      fs: e.detail.fullScreen,
    });
  },
  exitFs: function () {
    this.ctx.exitFullScreen();
  },
  requestFs: function () {
    this.ctx.requestFullScreen();
  },
  toggleDanmu: function () {
    if (!this.data.openDanmu) {
      let danmu = [];
      for (var i = 0; i < 100; i++) {
        danmu.push({
          t: ~~(Math.random() * 100),
          l: ~~(Math.random() * 200) - 20,
          s: ~~(Math.random() * 24) + 12,
          c: `rgb(${~~(Math.random() * 150) + 120},${
            ~~(Math.random() * 150) + 120
          }, ${~~(Math.random() * 150) + 120})`,
        });
      }
      this.setData({ danmu: danmu });
    }
    this.setData({
      openDanmu: !this.data.openDanmu,
    });
  },
  touchimage: function () {
    tt.showToast({
      title: "点击图片了", // 内容
      success: (res) => {
        console.log("点击图片");
      },
    });
  },
});

.myVideo image {
  position: absolute;
  right: 75rpx;
  top: 30%;
  width: 150rpx;
  height: 150rpx;
  transform: translate(-50%, -50%);
}

.myVideo button {
  position: absolute;
  left: 20rpx;
  top: 10rpx;
  z-index: 9999;
}
.myVideo .danmu-group {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 999;
}

.myVideo .danmu-group view {
  position: absolute;
  animation: 6s linear infinite loop;
}

.myVideo switch {
  position: absolute;
  top: 50rpx;
  right: 20rpx;
  z-index: 1000;
}