做项目时有个需求，就是播放腾讯视频，直接给的播放链接，比如：
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和https
var 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 元素 ID
autoplay: 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("结束播放----")
},
})实现效果如下：
