Vue/微信小程序 -- 引入腾讯视频

做项目时有个需求，就是播放腾讯视频，直接给的播放链接，比如：https://v.qq.com/x/page/b0136et5ztz.html （该链接是网上找的）。最初的做法，就是用vue开发h5页面实现播放腾讯视频，然后嵌入到小程序中。但是发版时，发现不能播放。最后无奈只能用小程序原生代码去实现播放腾讯视频。具体整个过程如下：

1. Vue实现腾讯视频播放

1.1 方式1：使用iframe

简单实现如下：

如果后台返回的是链接：https://v.qq.com/x/page/b0136et5ztz.html，则只需要取“b0136et5ztz”这部分

注意：这个方式的实现，有个问题，就是部分手机不可以全屏看视频

1.2 方式1：使用腾讯视频统一播放器

文档：https://m.v.qq.com/txp/v3/

下载txplayer.js：https://vm.gtimg.cn/tencentvideo/txp/js/txplayer.js，放到合适的目录下

引入 txplayer.js

实现效果如下：

如上实现方式，最终嵌入小程序中，发布后并不可以播放，原因可能是因为，最终解析出来的视频实际地址，这个地址是多变的，而我们所知，小程序所有用到的地址，都需要到小程序后台进行域名配置。不确定性的地址导致我们并不能完全的配置。

所以我们只能弃掉如上方式，使用小程序原生代码去实现。具体如下：

2. 微信小程序实现腾讯视频播放

2.1 登录小程序后台：https://mp.weixin.qq.com/，添加“腾讯视频”插件，步骤如下：

2.1.1 设置->第三方设置->添加插件

2.1.2 搜索“腾讯视频”，选择插件，点击添加即可。

2.1.3添加成功后，点击“详情”

2.1.4 查看“腾讯视频”插件信息，复制AppID（wxa75efa648b60994b）和选择一个版本号（比如1.3.9），开发用到。

此外，点击“开发文档”，根据开发文档，进行开发。

2.2 开发

2.2.1 app.json里面引入插件，其中version值为上面获取的版本号（注意插件版本号填最新的版本号），provider为上面获取的AppID【看步骤2.1.4】。

"plugins": {
    "tencentvideo": {
      "version": "1.3.9",
      "provider": "wxa75efa648b60994b"
    }
  },

2.2.2 在所需引入腾讯视频的页面的json文件插入如下：

"usingComponents": {
    "txv-video": "plugin://tencentvideo/video"
  }

2.2.3 wxml文件

注意：如果是引入多个组件，则每个组件的playerid的值必须是不同的，唯一的。

2.2.4 js文件

// pages/tcVideo/tcVideo.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    vid: "b0136et5ztz",
    txvContext: null,
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var txv = requirePlugin("tencentvideo");
    var txvContext = txv.getTxvContext('txv1') // txv1即播放器组件的playerid值

    this.setData({
      txvContext: txvContext,
    })
  },
  videoPlay: function (e) { 
    //正在播放
  },
  videoPause: function () {
    console.log("暂停播放----")
  },
  videoEnd: function () {
    console.log("结束播放----")
  },
})

实现效果如下：