微信小程序音频，视频播放

微信小程序音频播放

复制代码

<!-- 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() 方法来控制视频的播放、暂停和全屏切换。请确保将 视频地址 替换为你实际的视频链接或本地视频路径。