4.电影搜索之如何把视频播放器嵌入网页 百度影音+快播
随着网速的不断提供,下载慢慢成为一种过去式,在线观看越来越常规。现在像优酷,土豆,奇异这种视频网站,都是可以在线观看的,并且是不需要的安装任何插件的。但是大网站,由于版权的问题,影片资源是非常少的。在互联网上,比较自由,资源比较多的就应该是快播了。还有就是这两年在才出来的百度影音,由于含着金钥匙出生,所以一路风声水起,迅速打下一片江山。
先将如何将百度影音播放器嵌入网页,这个主要是参考百度影音的官方网页“网页调用” 部分的资料。
百度影音
-----------------------------------------------------------------------------------------------------------------------------------------------
一、使用平台:
播放器使用COM组件开发技术,能在用户客户端浏览器或者支持COM组件的开发程序中使用。
二、使用方法:
1、在你的网页适当位置(即想让用户观看视频的位置)插入如下代码:
<object classid="clsid:02E2D748-67F8-48B4-8AB4-0A085374BB99" width="500" height="400" id="BaiduPlayer" name="BaiduPlayer">
内容解释
1、object:HTML语言中对COM插件的统一使用方式。
2、classid:HTML语言中对WEB插件的调用语句。
3、clsid: 02E2D748-67F8-48B4-8AB4-0A085374BB99:BaiduPlayer插件类型ID值。
4、width/height 在网页中显示的该插件宽与高度。
5、id/ name/ 是要控制该BaiduPlayer插件的名字。BaiduPlayer可以更改成你喜欢并且容易记住的名字。
如果不能下载该插件安装包。请用户自行去 http://player.baidu.com下载安装
三、百度影音 插件最简使用方法:
<object classid="clsid:02E2D748-67F8-48B4-8AB4-0A085374BB99" width="500" height="400" id="BaiduPlayer" name="BaiduPlayer" onError=if(window.confirm('请您先安装百度影音软件,然后刷新本页才可以正常播放.')){window.open('http://player.baidu.com')}else{self.location='http://player.baidu.com'}><PARAM NAME='URL' VALUE='此处请替换成百度影音播放链接地址'><PARAM NAME='Autoplay' VALUE='1'></object>
四、百度影音 接口使用方法
1、属性接口:
1)URL:播放文件地址。URL值格式:bdhd://文件大小|文件hash值|文件名
如:bdhd://301568740|FCDAC749BD2BB0C009A32ABB4AF428D7|宫锁心玉01.rmvb
2) AutoPlay:是否自动播放。0:不自动播放 1:自动播放。默认是不自动播放。
< PARAM NAME='AutoPlay' VALUE='0'>
3) LastWebPage:播放器上面的上一集按钮
< PARAM NAME='LastWebPage' VALUE='http://player.baidu.com/#1'>
4) NextWebPage:播放器上面的下一集按钮(播放当前节目后自动导航到下一集或者其它网页的功能)
< PARAM NAME='NextWebPage' VALUE='http://player.baidu.com/#2'>
5)NextCacheUrl:自动缓冲下一集的播放文件地址。URL值格式:bdhd://文件大小|文件hash值|文件名
如:bdhd://216615163|5E5F4843ED84AEA1812335413084E718|宫锁心玉02.rmvb
2、方法接口:
1)播放/暂停
Play():
2)停止
Stop():
3)全屏
FullScreen():
4) 得到版本号
GetVersion():
javastricpt脚本语言:
var pos = BaiduPlayer.GetVersion();
5) 得到是否全屏
IsFullScreen():
javastricpt脚本语言:
var pos = BaiduPlayer.IsFullScreen();
6) 得到是否暂停
IsPause();
javastricpt脚本语言:
var pos = BaiduPlayer.IsPause();
7) 得到是否缓冲中
IsBuffing();
javastricpt脚本语言:
var pos = BaiduPlayer.IsBuffing();
8) 得到是否播放中
IsPlaying();
javastricpt脚本语言:
var pos = BaiduPlayer.IsPlaying();
五、百度影音 (提示下载,缓冲广告,暂停广告)综合使用实例推荐
原理:通过JS的setInterval函数定时检测播放器状态,来控制是否显示广告
<script language="javascript">
var BdPlayer = new Array();
BdPlayer['time'] = 8;//缓冲广告展示时间(如果设为0,则根据缓冲进度自动控制广告展示时间)
BdPlayer['buffer'] = 'http://player.baidu.com/lib/show.html?buffer';//贴片广告网页地址
BdPlayer['pause'] = 'http://player.baidu.com/lib/show.html?pause';//暂停广告网页地址
BdPlayer['end'] = 'http://player.baidu.com/lib/show.html?end';//影片播放完成后加载的广告
BdPlayer['tn'] = '12345678';//播放器下载地址渠道号
BdPlayer['width'] = 800;//播放器宽度(只能为数字)
BdPlayer['height'] = 550;//播放器高度(只能为数字)
BdPlayer['showclient'] = 1;//是否显示拉起拖盘按钮(1为显示 0为隐藏)
BdPlayer['url'] = 'bdhd://92448883|E828039EFE786AD7CFB0E7E4222C96F6|百度新首页.flv';//当前播放任务播放地址
BdPlayer['nextcacheurl'] = 'bdhd://258153089|948E0EB38A2DFA1AF7D1B488E86AFFDD|还珠格格之燕儿翩翩飞02.HDTV.rmvb';//下一集播放地址(没有请留空)
BdPlayer['lastwebpage'] = 'http://player.baidu.com/lib/eg.html?1';//上一集网页地址(没有请留空)
BdPlayer['nextwebpage'] = 'http://player.baidu.com/lib/eg.html?2';//下一集网页地址(没有请留空)
</script>
<script language="javascript" src="http://php.player.baidu.com/bdplayer/player.js" charset="utf-8"></script>
百度影音的播放器调用还是非常简单的,并且官方提供的js代码也非常好用,通过简单的配置就可以实现:缓冲设置,暂停,加载广告设置,播放器大小设置,播放上一页下一页设置等等。
---------------------------------------------------------------------------------------------------------------------------------------------------------------------
快播
快播其实出现的比百度影音找很多,也有一大批忠实的用户。我记得最早给我的感觉是,快播好像专门是播成人影片的,当然这是个误会。
快播的网页调用也不难,就是添加一个object 对象,这个相对简陋,而且兼容性差,并且对于是否已经安装快播的判断也不是很方便。
Qvod Player插件最简使用方法:
在你的网页适当位置源代码中插入如下代码,当用户打开该网页时,即可完成影片文件的播放功能:
- <object classid="clsid:F3D0D36F-23F8-4682-A195-74C92B03D4AF" width="500" height="400" id="QvodPlayer" name="QvodPlayer" onError=if(window.confirm('请您先安装QvodPlayer软件,然后刷新本页才可以正常播放.')){window.open('http://www.qvod.com/download.htm')}else{self.location='http://www.qvod.com/'}>
- <PARAM NAME='URL' VALUE='此处请替换成QVOD播放链接地址'>
- <PARAM NAME='Autoplay' VALUE='1'>
- <embed URL='此处请替换成QVOD播放链接地址' type='application/qvod-plugin'></embed>
- </object>
如何兼容谷歌等非IE浏览器(支持快播4.2及以上版本)
1.object标签变化
网站对谷歌浏览器支持,必须在原来的object标签中添加embed标签,例如下面红色部分:
<object classid='clsid:F3D0D36F-23F8-4682-A195-74C92B03D4AF' id='QvodPlayer' width='600' height='480'>
< PARAM NAME='URL' VALUE='qvod://167960408|8F81A848CBEB17F4D4850A13DC781FC803181594|鹿鼎记(陈小春版)-01.rmvb|'>
< PARAM NAME='Showcontrol' VALUE=1>
< PARAM NAME='AutoPlay' VALUE='1'>
<embed URL='qvod://167960408|8F81A848CBEB17F4D4850A13DC781FC803181594|鹿鼎记(陈小春版)-01.rmvb|' type='application/qvod-plugin'></embed>
</object>
embed标签不仅支持URL参数,也同样支持object标签支持的Autoplay,Mute,Showcontrol,Volume,NumLoop,SoundTrack,NextWebPage,QvodAdUrl。在object中初始化的参数,必须在embed中传入才能起效。
为了简化快播的嵌入,以及完善功能,有人开发了jquery插件。快播网页支持,jquery插件,支持自动全屏,兼容主流浏览器,未安装提示页面美化。
该插件,主要功能:
1. 根据用户当前播放页是否是全屏状态,自动设置跳转后的下一集是否全屏
设置自动全屏,有一个过程,实现的逻辑:
1).用户打开网页观看影片之后,会有一个计时器在10s后开始检测用户是否是全屏,如果是全屏状态,将会记录到cookie。
2).在用户打开网页之后,同时还有一个计时器将在20s之后开始检测用户当前状态是否是全屏,如果不是,也保存到cookie。
3).每次打开新的播放页,程序都先读取cookie中得记录,如果记录中是全屏状态,新页面也将自动全屏。
2. 加入了预缓冲下一集的功能
3. 所有参数,站长都能自定义
- var url = "qvod://69999035|DBE1429630008370A3F01A38FC0C741ED648E9C0|香格里拉01.rmvb|";
- //下一集资源地址
- var nextqvod = "qvod://530121830|7A77E443E9FB1E119E1BC24FB5389DB7572555D5|sohu_B+侦探(1).mp4|";
- //下一集播放页面 播放结束自动跳转到该页面
- var nextpage = "http://localhost/jquery/demo2.html";
- //调用播放器
- $("#player").qvod({PlayerArea:"player", width:"700", height:"500", AutoPlay:"true",QvodUrl:url,NextWebPage:nextpage, NextQvod:nextqvod});
- /*参数说明*/
- //width: "500", /*播放器的宽度*/
- //height: "400", /*播发器的高度*/
- //AutoPlay: "true", /*自动播放 默认开启*/
- //FullScreen: "false", /*自动全屏 默认关闭*/
- //PlayerArea: "", /*播放器插入的位置,标签的id属性*/
- //QvodUrl: "", /*本集资源地址*/
- //NextWebPage: "", /*下一集播放页地址*/
- //NextQvod: "", /*下一集资源地址,预缓冲时使用*/
- //ShowControl: "1", /*是否显示控制栏,0=不显示 1= 显示 默认参数是显示*/
- //AdUrl: "http://buffer-ad.qvod.com/" /*缓冲广告 注:3.0.0.58及将来发布的客户端版本才支持*/