小程序php调用腾讯视频,小程序里插入播放腾讯视频

野性酷女 2023-01-15 11:27 848阅读 0赞

![9b4074cd24f0][]

效果图

在小程序内容管理后台只要在编辑器中直接输入腾讯视频的分享代码即可，如图：

![9b4074cd24f0][]

内容管理后台界面

小程序的文章内容页是用wxParse解析html网页内容的。主要做以下2件事：

第一，在小程序管理平台https://mp.weixin.qq.com，在第三方设置中，添加插件“腾讯视频”，如下图：

![9b4074cd24f0][]

小程序管理平台

按插件“详情”的使用说明，处理相关页面。

![9b4074cd24f0][]

使用说明

![9b4074cd24f0][]

app.json代码段

![9b4074cd24f0][]

文章内容页.json代码段

第二，修改wxparse的源码过程：

1.支持iframe的转化

首先在html2json.js文件中支持iframe的转化，因为小程序默认就不支持iframe所以在源码中并没有iframe的转化，需要我们自己添加

可以看到之前源码对于img标签的处理，我们就照猫画虎对于iframe进行处理

并取出有效的vid以便之后的程序视频插件使用。

html2json.js文件修改：

function html2json(html, bindName) \{

HTMLParser(html, \{

start: function (tag, attrs, unary) \{

...

//对img添加额外数据

if (node.tag === 'img') \{

node.imgIndex = results.images.length;

var imgUrl = node.attr.src;

if(!imgUrl) \{

return

if (imgUrl\[0\] == '') \{

imgUrl.splice(0, 1);

imgUrl = wxDiscode.urlToHttpUrl(imgUrl, \_\_placeImgeUrlHttps);

node.attr.src = imgUrl;

node.from = bindName;

results.images.push(node);

results.imageUrls.push(imgUrl);

// 下面是需要我们添加的代码

// 处理iframe的地址，取出vid并放入数据中，

if(node.tag === 'iframe') \{

// safeGetValue 只是一个取值的函数，可自行编写自己的取值函数。

node.vid = safeGetValue(\[1\], node.attr.src.match(/https:\\/\\/v\\.qq\\.com.\*vid=(\\w\*)/))

.....

\};

// 此函数作用类似于ramda的path和pathOr，用于安全取值。

function safeGetValue() \{

const argsLength = arguments.length

if (argsLength !== 2 && argsLength !== 3) \{

throw '必须为两个或者三个参数'

var defaultValue

if (argsLength === 3) \{

var \[\_defaultValue, keys, item\] = arguments

defaultValue = \_defaultValue

\} else \{

var \[keys, item\] = arguments

if (!Array.isArray(keys)) \{

throw '参数有误，取值的keys必须为数组'

try \{

keys.forEach(key => \{

item = item\[key\]

\})

\} catch (e) \{

return defaultValue

return item

2.在wxParse.wxml添加腾讯视频插件的模板

在html2json中保存的vid属性，在这时有了用处

width="100%"

height="600rpx"

playerid="txv1"

vid="\{ \{item.vid\}\}"

autoplay="\{ \{false\}\}"

3.修改wxParse.wxml的循环模板,添加视频插件的模板

中间的腾讯视频插件正是我们需要添加的。

ps: 循环模板在源码中有10个，甚至更多，所以需要我们把每一个循环模板中都添加插件，这样才能保证你的视频能够正常播放。

当这些都配置完成后，就可以在详情页面播放腾讯视频了

[9b4074cd24f0]: /images/20221022/90f3c348dd2f47a09bb366c4ed89a59a.png

小程序php调用腾讯视频,小程序里插入播放腾讯视频

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关微信小程序video组件播放腾讯视频等热门视频

相关小程序播放腾讯视频

相关在uniapp开发的微信小程序中使用腾讯视频

相关小程序php调用腾讯视频,小程序里插入播放腾讯视频

相关腾讯位置服务路线规划小程序

相关 uniapp微信小程序引入腾讯视频插件

相关 kali安装腾讯视频

相关小程序腾讯兔小巢对接

相关调用腾讯视频播放器APi代码

相关微信小程序授权腾讯云