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

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

如图所示

使用原生小程序组件 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;
}
相关推荐
2401_845937538 小时前
PHP一键约课高效健身智能健身管理系统小程序源码
微信·微信小程序·小程序·微信公众平台·微信开放平台
程序员入门进阶10 小时前
基于微信小程序的科创微应用平台设计与实现+ssm(lw+演示+源码+运行)
微信小程序·小程序
计算机源码社18 小时前
分享一个基于微信小程序的居家养老服务小程序 养老服务预约安卓app uniapp(源码、调试、LW、开题、PPT)
android·微信小程序·uni-app·毕业设计项目·毕业设计源码·计算机课程设计·计算机毕业设计开题
DreamByte19 小时前
Python Tkinter小程序
开发语言·python·小程序
说私域20 小时前
开源 AI 智能名片小程序:开启内容营销新境界
人工智能·小程序
汇匠源20 小时前
零工市场小程序:保障灵活就业
java·小程序·零工市场
哈尔滨财富通科技20 小时前
家居小程序有什么用?
小程序
双普拉斯20 小时前
微信小程序点赞动画特效实现
nginx·微信小程序·notepad++
程序员阿龙21 小时前
【2025】基于微信小程序的网上点餐系统设计与实现、基于微信小程序的智能网上点餐系统、微信小程序点餐系统设计、智能点餐系统开发、微信小程序网上点餐平台设计
微信小程序·小程序·毕业设计·订单管理·在线点餐·订单跟踪·在线支付
Angus-zoe21 小时前
uniapp+vue+微信小程序实现侧边导航
vue.js·微信小程序·uni-app