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

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

如图所示

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

官方组件地址

wxml

javascript 复制代码
    <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>

css

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;
}
相关推荐
The_era_achievs_hero17 分钟前
UniappDay03
vue.js·微信小程序·uni-app
说私域3 小时前
技术赋能与营销创新:开源链动2+1模式AI智能名片S2B2C商城小程序的流量转化路径研究
人工智能·小程序·开源
游戏开发爱好者816 小时前
没有 Mac,如何上架 iOS App?多项目复用与流程标准化实战分享
android·ios·小程序·https·uni-app·iphone·webview
weixin_lynhgworld18 小时前
代驾小程序系统开发:引领出行行业数字化转型
小程序
Python大数据分析20 小时前
uniapp之微信小程序标题对其右上角按钮胶囊
微信小程序·小程序·uni-app
yzx99101321 小时前
JS与Go:编程语言双星的碰撞与共生
java·数据结构·游戏·小程序·ffmpeg
说私域1 天前
基于开源链动2+1模式AI智能名片S2B2C商城小程序的私域流量池用户运营研究
人工智能·小程序·开源
一只一只妖1 天前
uniapp小程序上传图片并压缩
小程序·uni-app
zkmall1 天前
小程序卡顿到丝滑体验:ZKmall开源商城性能优化与兼容修复实战指南
性能优化·小程序
CodeUp.1 天前
校园二手交易小程序的设计与实现
小程序