首页 » 网站建设 »

在网页中嵌入QQ视频的步骤和代码

2015年11月17日 / 231次阅读

打开支付宝首页,搜索“529018372”,即可领取红包!可重复领。

特色图片

QQ视频,或者我们叫腾讯视频(v.qq.com),跟优酷不太一样。对于每个视频页面,QQ视频并没有提供可以让我们便捷地将视频资源嵌入其它页面(论坛,或者自己的wordpress博客页面)的代码,而是只能通过各种分享按钮来进行站外传播。麦新杰还没有想清楚QQ视频这样做的原因,不过,我却找到了一种非常简单的,在网页中嵌入QQ视频的方法。本文提供这个方法的步骤和代码。

1, 获取视频资源链接

QQ视频网站没有直接给出视频资源的链接,我们通过下面这个方法获取。

随便打开一个QQ视频的页面,通过页面的链接,我们可以直接获取视频的VID,如下图:

通过页面链接获取视频资源的VID

通过页面链接获取视频资源的VID

然后,自己拼接一个可以嵌入其它网页的视频资源完成的链接:
http://cache.tv.qq.com/qqplayerout.swf?vid=c0171w7qaep
 

以上链接由两个部分组成,蓝色部分是QQ视频专属的播放器前缀,后面红色部分就是刚刚通过上图的方式获取的视频VID。组合在一起,就是一个可用的链接。

2, 准备好嵌入视频的代码

先给出代码,然后解释:

 

<div style="text-align: center;">
<iframe id="youku" style="width: 96%;" src="http://cache.tv.qq.com/qqplayerout.swf?vid=c0171w7qaep" width="300" height="150" allowfullscreen="allowfullscreen"></iframe></div>

 

上面这段代码是麦新杰在介绍如何将优酷视频进行移动版网页自适应时用到的代码结构。你可以根据自己的需要调整。这段代码的关键之处,就是iframe里面的src参数,这个参数的内容,就是我们前面介绍的第1步获取的视频资源链接。

将这段代码嵌入网页,或者按照你自己的需要进行修改之后,就可以直接使用了。关键就是iframe的src参数,其它没有什么重要的,你可以按需定制。使用上面这段代码的好处,还可以实现视频移动版网页的自适应(请看上面的那个链接并详细了解)。

本文链接:http://www.maixj.net/wz/qq-shipin-9478
云上小悟 麦新杰(QQ:1093023102)

相关文章

评论是美德

无力满足评论实名制,评论对非实名注册用户关闭,有事QQ:1093023102.


前一篇:
后一篇:

栏目精选

云上小悟,麦新杰的独立博客

栏目

支付宝红包.每天领一次.

支付宝扫码领红包

©Copyright 麦新杰 Since 2014 云上小悟独立博客版权所有 备案号:苏ICP备14045477号-1。云上小悟网站部分内容来源于网络,转载目的是为了整合信息,收藏学习,服务大家,有些转载内容也难以判断是否有侵权问题,如果侵犯了您的权益,请及时联系站长,我会立即删除。

网站二维码
go to top