微信小程序音频播放
<!-- index.wxml --> <audio id="myAudio" src="{{audioUrl}}" bindtimeupdate="onAudioTimeUpdate"></audio> <text>当前时间：{{formatTime(currentTime)}} / 总时长：{{formatTime(duration)}}</text> <slider value="{{currentTime}}" max="{{duration}}" bindchanging="onSliderChange"></slider>
在上述代码中，我们使用了<audio>组件来进行音频的播放，通过绑定src属性指定要播放的音频文件。
同时，我们使用了bindtimeupdate事件来监听音频播放时间的变化，并调用onAudioTimeUpdate方法进行处理。
在文本部分，我们展示了当前播放时间和总时长。
最后，我们使用了<slider>组件来展示音频播放的进度条，通过设置value属性为当前播放时间，max属性为总时长，来控制滑块的位置和长度。
接下来，我们需要在对应的JavaScript文件中编写相应的逻辑代码来实现获取音频的播放时长和进度。
// index.js Page({ data: { audioUrl: '音频地址', currentTime: 0, duration: 0 }, onAudioTimeUpdate(event) { const { duration, currentTime } = event.detail; this.setData({ duration, currentTime }); }, onSliderChange(event) { const { value } = event.detail; this.setData({ currentTime: value }); }, formatTime(time) { const minutes = Math.floor(time / 60); const seconds = Math.floor(time % 60); return `${minutes}:${seconds < 10 ? '0' : ''}${seconds}`; } });
在上述代码中，我们定义了一个Page对象，其中包含了一些数据和方法来处理音频的播放时长和进度。
onAudioTimeUpdate方法用于响应音频播放时间的变化事件。通过获取event.detail中的duration和currentTime，我们可以更新数据中的总时长和当前播放时间。
onSliderChange方法用于响应滑动条的变化事件，获取滑动条的值，并更新数据中的当前播放时间。
formatTime方法用于将秒数格式化为分:秒的形式，以便在界面中显示播放时间。
需要注意的是，根据实际需求，你需要替换代码中的'音频地址'为真实的音频地址，并适当调整代码结构和样式以满足你的需求。同时，你还需要在对应的页面中编写相应的视图代码来展示播放时长、进度和控制按钮等
微信小程序视频播放
微信小程序内置了控制视频播放、暂停和全屏功能的 API，可以通过调用相应的方法来实现。下面是示例代码：
wxml 文件：
<video id="video" src="视频地址" autoplay bindplay="onPlay" bindpause="onPause" bindfullscreenchange="onFullScreenChange"></video>
js 文件：
Page({ onPlay() { // 视频播放事件处理 console.log('视频开始播放'); }, onPause() { // 视频暂停事件处理 console.log('视频已暂停'); }, onFullScreenChange(event) { // 全屏状态变化事件处理 if (event.detail.fullScreen) { console.log('进入全屏'); } else { console.log('退出全屏'); } }, playVideo() { const videoContext = wx.createVideoContext('video'); videoContext.play(); }, pauseVideo() { const videoContext = wx.createVideoContext('video'); videoContext.pause(); }, enterFullScreen() { const videoContext = wx.createVideoContext('video'); videoContext.requestFullScreen(); }, exitFullScreen() { const videoContext = wx.createVideoContext('video'); videoContext.exitFullScreen(); } })
这样，你就可以在小程序中实现视频的播放/暂停功能，并且监听全屏状态的变化。点击按钮或其他触发方式来调用 playVideo()、pauseVideo()、enterFullScreen()、exitFullScreen() 方法来控制视频的播放、暂停和全屏切换。请确保将 视频地址 替换为你实际的视频链接或本地视频路径。
