首页 > 代码库 > 把腾讯视频嵌入到html中
把腾讯视频嵌入到html中
---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
淘宝店铺:
,或复制这条信息¥tOYO0bf4asx¥后打开手机淘宝
-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
想要在网页中嵌入优酷、土豆、爱奇艺的视频很简单,但是现在将腾讯视频嵌入网页后却不能正常显示,而腾讯视频现在的资源也越来越多,想直接将腾讯视频嵌入到网页中怎么操作呢?其实只需要一段代码就可以了。
首先,提供一个腾讯视频嵌入网页代码。我们只需替换这段代码的一部分就可以了。
<p style="text-align: center"><iframe class="video_iframe" style="z-index:1;" src="http://v.qq.com/iframe/player.html?vid=t01662frswa&width=500&height=375&auto=0" allowfullscreen="" frameborder="0" height="375" width="500"></iframe></p>
找到一段腾讯视频,比如地址:
http://v.qq.com/boke/page/d/0/i/d0163kxz8di.html
这是一段《工业机器人工作场景》的视频,将这个网址的蓝色部分,替换到上面给出的代码中的红色部分,就可以了。
最终效果为:
<p style="text-align: center"><iframe class="video_iframe" style="z-index:1;" src="http://v.qq.com/iframe/player.html?vid=d0163kxz8di&width=500&height=375&auto=0" allowfullscreen="" frameborder="0" height="375" width="500"></iframe></p>
把vid参数从腾讯视频网页查找
想将优酷视频、土豆视频、新浪视频等网站的视频调用到个人网站上面的方法非常简单,这些网站,均提供了直接调用的代码。如下图所示:
1、优酷网
2、土豆网
3、新浪视频
但是腾讯视频则是这样的(并没有提供嵌入网页的代码):
应该怎么办呢?
可以从微信公众平台中学习一下,因为腾讯视频,可以直接嵌入微信公众平台啊?点击查看:微信公众平台转载别人发的视频的方法
方法一:将视频在微信公众平台中的调用代码提取出来,如下所示:
<iframe class="video_iframe" style=" z-index:1; " src="http://v.qq.com/iframe/player.html?vid=m0137rrajuc&width=300&height=200&auto=0" allowfullscreen="" frameborder="0" height="200" width="300"></iframe>
打开需要添加的腾讯视频网址,例如:http://v.qq.com/cover/z/zrxyhghf3n8xhxl/k0015trfczz.html
将上述代码中的vid=后面的内容替换成上述网址中标红的部分,然后将上述网址重新复制出来:
<iframe class="video_iframe" style=" z-index:1; " src="http://v.qq.com/iframe/player.html?vid=k0015trfczz&width=300&height=200&auto=0" allowfullscreen="" frameborder="0" height="200" width="300"></iframe>
效果参见下方:
其中的视频的宽度(width)和高度(height)可以分别通过修改代码中对应的数值(本视频中width=300,height=200)来进行修改。
不自动播放
<iframe class="video_iframe" style=" z-index:1; " src="http://v.qq.com/iframe/player.html?vid=k0344pfymze&tiny=0&auto=0&isAutoPlay=false;width=300&height=200&auto=0" allowfullscreen="" frameborder="0" height="200" width="300"></iframe>
把腾讯视频嵌入到html中