微信小程序实现视频播放按钮的代码
时间: 2024-09-24 20:10:13 浏览: 42
微信小程序实现抖音播放效果的实例代码
在微信小程序中,你可以使用`<video>`标签配合JavaScript来实现实体视频播放按钮的功能。下面是一个基本示例:
```html
<!-- video.wxml -->
<view class="video-player">
<button bindtap="playVideo">播放</button>
<video id="myVideo" src="{{videoSrc}}" style="display:none;"></video>
</view>
<!-- video.js -->
Page({
data: {
videoSrc: 'your_video_url', // 替换为你实际的视频URL
isPlaying: false,
},
playVideo: function() {
if (!this.data.isPlaying) {
this.setData({ isPlaying: true });
document.getElementById('myVideo').style.display = 'block';
this.myVideo.play();
} else {
this.setData({ isPlaying: false });
this.myVideo.pause();
document.getElementById('myVideo').style.display = 'none';
}
},
})
```
在这个例子中,当用户点击“播放”按钮时,如果视频未播放会调用`play()`方法开始播放,反之则暂停并隐藏视频。你需要将`videoSrc`替换为你想要播放的实际视频链接。
阅读全文