微信小程序可拖拽视频播放案例

微信小程序可拖拽视频播放案例

如图所示

使用原生小程序组件 movable-area movable-view 注意movable-view必须在area内

官方组件地址

wxml

    <movable-area class="movableArea">
      <movable-view class="movableView" out-of-bounds="false" x="10" y="10" scale direction="all">
        <view class="movableAreaMask">
          <video id="myVideo" src="**" autoplay="{{videoAutoPlay}}" binderror="videoErrorCallback" controls>
          </video>
        </view>
      </movable-view>
    </movable-area>
1
2
3
4
5
6
7
8

css

.movableArea {
  pointer-events: none;
  width: 100%;
  height: 100%;
  z-index: 999;
  position: absolute;
  left: 0px;
  top: 0px;
}

.movableView {
  width: 720rpx;
  height: 300rpx;
  pointer-events: auto;
}

.movableAreaMask {
  background: rgba(0, 0, 0, .25);
  border-radius: 20rpx;
  box-sizing: border-box;
  padding: 10rpx;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22