微信小程序开发中的视频播放和直播功能

微信小程序开发中的视频播放和直播功能是非常常见的需求。本文将通过具体的代码案例，详细介绍如何在微信小程序中实现视频播放和直播功能。

一、视频播放功能的实现

1.1 播放本地视频

首先，我们需要准备一个视频文件，将其放置在小程序的根目录下。

在 wxml 文件中添加一个 video 组件，用于显示视频内容：

<video src="/video/demo.mp4"></video>

在 js 文件中，对 video 组件进行相关设置，例如自动播放、控制栏显示等：

Page({
  onReady() {
    this.videoContext = wx.createVideoContext('myVideo');
  },
  onLoad() {
    this.videoContext = wx.createVideoContext('myVideo');
  },
  onShow() {
    this.videoContext.play();
  },
  onHide() {
    this.videoContext.pause();
  }
})

1.2 播放网络视频

与播放本地视频类似，只需将视频链接作为 src 属性传递给 video 组件即可：

<video src="https://example.com/demo.mp4"></video>

1.3 播放器控制

通过 video 组件的自带方法和事件，可以实现播放、暂停、停止、全屏等功能。以下是一些常用的控制方法和事件：

Page({
  onReady() {
    this.videoContext = wx.createVideoContext('myVideo');
  },
  playVideo() {
    this.videoContext.play();
  },
  pauseVideo() {
    this.videoContext.pause();
  },
  stopVideo() {
    this.videoContext.stop();
  },
  fullscreenVideo() {
    this.videoContext.requestFullScreen({ direction: 90 });
  },
  exitFullscreen() {
    this.videoContext.exitFullScreen();
  },
  videoEnded() {
    console.log('视频播放完毕');
  },
  videoError(err) {
    console.log('视频播放出错', err);
  }
})

在 wxml 文件中，调用相应的方法：

<video id="myVideo" src="/video/demo.mp4" onEnded="videoEnded" onError="videoError"></video>
<button bindtap="playVideo">播放</button>
<button bindtap="pauseVideo">暂停</button>
<button bindtap="stopVideo">停止</button>
<button bindtap="fullscreenVideo">全屏</button>
<button bindtap="exitFullscreen">退出全屏</button>

通过上述代码，我们可以实现基本的视频播放功能，并对视频进行控制。

二、直播功能的实现

2.1 推流

要在小程序中实现直播功能，需要使用微信小程序提供的实时音视频（TRTC）能力。首先，我们需要引入 TRTC SDK：

const trtcroom = require('../../utils/trtcroom.js');

然后，在 js 文件中创建推流房间：

Page({
  data: {
    roomID: '',
    userID: '',
    userSig: ''
  },
  onLoad() {
    this.data.roomID = '123456'; // 房间 ID
    this.data.userID = 'user1'; // 用户 ID
    this.data.userSig = 'xxxxxxxxxx'; // 用户签名
  },
  startPublish() {
    trtcroom.joinRoom(this.data.roomID, this.data.userID, this.data.userSig, (code, msg) => {
      if (code === 0) {
        console.log('加入房间成功');
        trtcroom.startPublish(() => {
          console.log('开始推流');
        });
      } else {
        console.log('加入房间失败', msg);
      }
    });
  },
  stopPublish() {
    trtcroom.stopPublish(() => {
      console.log('停止推流');
    });
  }
})

在 wxml 文件中，添加开始推流和停止推流的按钮：

<button bindtap="startPublish">开始推流</button>
<button bindtap="stopPublish">停止推流</button>

2.2 拉流

要实现直播观看功能，我们需要引入 TRTCPlayer SDK：

const trtcplayer = require('../../utils/trtcplayer.js');

然后，在 js 文件中创建拉流房间：

Page({
  data: {
    roomID: ''
  },
  onLoad() {
    this.data.roomID = '123456'; // 房间 ID
  },
  startPlay() {
    trtcplayer.enterRoom(this.data.roomID, (code, msg) => {
      if (code === 0) {
        console.log('进入房间成功');
        trtcplayer.startPlay(() => {
          console.log('开始拉流');
        });
      } else {
        console.log('进入房间失败', msg);
      }
    });
  },
  stopPlay() {
    trtcplayer.stopPlay(() => {
      console.log('停止拉流');
    });
  }
})

在 wxml 文件中，添加开始拉流和停止拉流的按钮：

<button bindtap="startPlay">开始拉流</button>
<button bindtap="stopPlay">停止拉流</button>

通过以上代码，我们可以实现简单的直播推拉流功能。当然，实际项目中可能还需要进行更多的配置和处理，以满足具体的需求。

三、总结

本文详细介绍了微信小程序开发中的视频播放和直播功能的实现方法。通过代码案例，我们可以实现基本的视频播放和直播推拉流功能。当然，这只是一个基础示例，实际项目中可能还需要根据具体需求进行更多的处理和配置。

希望本文对你理解和实现微信小程序中的视频播放和直播功能有所帮助。如果有任何问题或疑问，欢迎留言讨论。