编写微信小程序播放10s视频后结束再次点击则重新开始
时间: 2024-09-30 20:14:12 浏览: 40
在微信小程序中实现这样的功能,你可以使用`wx.videoPlayer`组件来播放视频,并结合事件监听来控制循环播放。首先,你需要在小程序的页面文件中引入`video-player`组件:
```html
<view class="video-wrap">
<video-player src="your_video_url" duration="{{videoDuration}}"></video-player>
</view>
```
这里假设`your_video_url`是你要播放的视频URL,`videoDuration`是一个变量,用于存储视频总长度(单位秒)。然后,在对应的JS文件里设置初始状态并处理点击事件:
```javascript
Page({
data: {
videoUrl: 'your_video_url', // 替换为实际视频URL
isPlaying: false,
videoDuration: null, // 在onLoad 或者 getVideoInfo 中获取视频时长
},
onLoad: function() {
this.getVideoInfo(); // 获取视频信息
},
async getVideoInfo() {
const res = await wx.getVideoInfo({
url: this.data.videoUrl,
});
this.setData({ videoDuration: res.duration });
},
playPauseVideo(e) {
if (this.data.isPlaying) {
this.pauseVideo();
} else {
this.playVideo();
}
this.setData({ isPlaying: !this.data.isPlaying });
},
playVideo() {
wx.startVideoPlayer({
url: this.data.videoUrl,
isLoop: true, // 设置为true实现循环播放
});
this.data.isPlaying = true;
},
pauseVideo() {
wx.stopVideoPlayer();
this.data.isPlaying = false;
},
onTap: function(e) {
const target = e.target.dataset.id; // 获取触发元素的id,比如video-player
if (target === 'video-player') {
this.playPauseVideo(e);
}
},
})
```
在这个示例中,当用户点击视频区域时,会检测是否正在播放。如果暂停,则播放,如果播放则暂停。同时,通过`isLoop`属性设定为`true`使得视频在播放结束后自动从头开始。
阅读全文