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

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

1. Vue实现腾讯视频播放

1.1 方式1：使用iframe

简单实现如下：

<template><div class="videoPlay"><iframe ref="iframe" class="video-iframe" style="z-index:1;" :src="videoSrc" frameborder="0"  scrolling="no" allowfullscreen="true"   webkitallowfullscreen="true" mozallowfullscreen="true"></iframe></div>
</template>

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

<script>export default {data() {return {videoSrc:'',};},mounted(){var that = this;var videoUrl = 'https://v.qq.com/x/page/b0136et5ztz.html'var t = videoUrl.split('/');var vid = t[t.length-1].split('.')[0];//使用相对协议，同时支持http和httpsvar videoSrc = '//v.qq.com/iframe/player.html?vid='+vid+'&tiny=0&auto=0';this.$set(this,'videoSrc',videoSrc)}}
</script>

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

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

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

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

<template><div class="videoPlay"><div id="container" class="video-wrapper"></div></div>
</template>

引入 txplayer.js

<script>import './txplayer.js'export default {data() {return {videoSrc:'',};},methods: {playerInit(vid){var video = new tvp.VideoInfo();video.setVid(vid);var player =new tvp.Player();player.create({width: "100%",       //播放器的宽度height: "19rem", //播放器的高度video: video,       //默认的视频对象modId: "container",       //默认的 DOM 元素 IDautoplay: false,});player.onplaying = function (vid){console.log(vid)}player.onallended = function (vid){console.log(vid)};}},mounted(){var that = this;var videoUrl = 'https://v.qq.com/x/page/b0136et5ztz.html'var t = videoUrl.split('/');var vid = t[t.length-1].split('.')[0];this.playerInit(vid);}}
</script>

实现效果如下：

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

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

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文件

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

<view><txv-video class="video-player" vid="{{vid}}" playerid="txv1"  bindplay="videoPlay" bindpause="videoPause" bindended="videoEnd"></txv-video>
</view>

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("结束播放----")},
})

实现效果如下：