小程序半屏内嵌案例

这篇文章距离上次修改已过274天，其中的内容可能已经有所变动。

在微信小程序中实现半屏内嵌，可以使用cover-view组件来创建一个可以覆盖在原生组件之上的视图，结合cover-image可以实现类似的效果。以下是一个简单的示例代码：

<view class="container">
  <video id="myVideo" src="http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400" controls="{{true}}" danmu-list="{{danmuList}}" enable-danmu="{{true}}" danmu-btn="{{true}}" show-center-play-btn="{{false}}" show-play-btn="{{false}}" show-fullscreen-btn="{{false}}" show-progress="{{true}}" bindplay="bindplay" bindpause="bindpause" bindtimeupdate="bindtimeupdate" bindended="bindended" poster="{{poster}}"></video>
  <cover-view class="controls">
    <cover-view class="play-btn" bindtap="bindPlay">{{isPlay ? '暂停' : '播放'}}</cover-view>
  </cover-view>
</view>

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
video {
  width: 100%;
  height: 50%;
}
.controls {
  position: absolute;
  width: 100%;
  bottom: 0;
  display: flex;
  justify-content: center;
}
.play-btn {
  padding: 10rpx;
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  border-radius: 5rpx;
}

Page({
  data: {
    isPlay: false,
    poster: 'http://y.gtimg.cn/music/photo_new/T002R300x300M000003rsKF44GyaSk.jpg?max_age=2592000',
    danmuList: [
      { text: '第1s出现的弹幕', time: 1 },
      { text: '第3s出现的弹幕', time: 3 }
    ]
  },
  bindplay: function() {
    this.setData({
      isPlay: true
    })
  },
  bindpause: function() {
    this.setData({
      isPlay: false
    })
  },
  bindtimeupdate: function(e) {
    // 处理播放时间更新
  },
  bindended: function() {
    // 处理播放结束
  },
  bindPlay: function() {
    this.videoContext.pause() || this.videoContext.play();
  },
  onReady: function(e) {
    this.videoContext = wx.createVideoContext('myVideo')
  }
})

在这个示例中，我们使用了cover-view来创建一个遮盖在视频组件上的播放按钮，实现了视频的半屏内嵌和播放按钮的覆盖。当用户点击cover-view按钮时

小程序半屏内嵌案例

评论已关闭

推荐阅读