.

3.腾讯视频组件

老赵发表于:2015年04月25日 16:15:02更新于:2021年07月30日 13:30:05

一、案例效果


blob.png


案例体验地址:https://www.epub360.com/manage/book/ysef0e/present/


二、应用场景

腾讯视频组件主要是插入视频链接,好处是可以在手机端页面内播放。但是由于腾讯视频本身会对H5中的视频进行一些压缩,所以在H5中看到的腾讯视频链接会感觉不是很清晰,这个是该组件的缺点。作为微信朋友圈广告指定视频源,腾讯视频无疑是大家投放视频的首选平台。


三、组件用法

需要提前将自己的视频上传到腾讯,尺寸是1080X1920,上传完成并成功通过审核发布后的腾讯视频,我们可以拿到这个视频的链接。接下来就是在意派的腾讯组件里加入这个链接。


1.获取腾讯视频链接。

(1)比如我们打开一个腾讯视频,点击上方的视频网址,复制即可。

注意网址的格式,是以【html】结尾的 https://v.qq.com/x/cover/bzfkv5se8qaqel2.html

0015cb008f244a2c5385572aa97af86


(2)可以获取自己上传QQ视频网址

blob.png


2.获取链接还有另外一种方式,可以获取腾讯视频的分享链接。

点击分享,显示弹窗,点击获取通用代码,即可将代码复制。

0015cb009b49be7b4406e5f3d339ca0


3. 打开一个“记事本”或者一个聊天对话框,粘贴刚才获取到的代码。在这个例子里,就是:https://v.qq.com/txp/iframe/player.html?vid=p0841bviac9

也可以获取以【html】结尾的网址:https://v.qq.com/txp/iframe/player.html

0015cb00b2e724f87d65a67678fd460


4. 在Epub360中插入一个腾讯视频组件0015cb00bc3c5d643794fe9aca56c8a


5.在右侧对应位置,粘贴刚才获取到的网址

0015cb00cf6a2c58e7ffbd257e761bd


6.注意:腾讯视频的播放不支持自动播放,必须用过点击触发播放;全屏播放要通过添加触发按钮,点击触发播放才可实现。

0015cb00d520ae44cb6c049b6e264da


7.小结。

(1)QQ视频网址必须是如下两种格式之一:

http://v.qq.com/cover/k/kknxjprtwyr2b5m.html?vid=g0017wsudls 
http://v.qq.com/boke/page/f/0/u/f0183wvcecu.html


(2)其他类型的腾讯视频网址,可能无法识别。比如:http://v.qq.com/cover/w/wmb7h4wtpgn69xi.html 是一个播放列表,无法直接解析出具体是哪一个视频的。需要点击具体的视频后再粘贴到视频链接内,比如我点击第一个视频链接后网址变为:http://v.qq.com/cover/w/wmb7h4wtpgn69xi.html?vid=h0185725xzg

注意:前缀是一样的,但是后面多了个具体的视频ID,这样的网址添加后就可以正常解析了。

另外,经过搜索后点击的视频,它的地址也是可以放心地添加到腾讯视频链接内解析的。


8.兼容性说明。目前在安卓系统中,视频一旦播放就会处于最上层,所以有一些交互效果可能暂时无法实现了,期待有更好的解决方案,我们给出的解决方法是用序列帧代替视频,关于序列帧的使用请点击《序列帧教程》

--------- 不了解设计的程序员不是好客服 ---------------