其实我是讨厌码字的，但是最近工作中经常用到一些腾讯的或者优酷的视频，所以觉得还是有必要记录一下，下面会讲到两种方法
第一种 直接将腾讯或者优酷视频下方的分享代码拿过来用
根据自己的需求选择相应的代码，优酷腾讯是一样的，但是这种方法是有弊端的，首先不仅不好控制，而且逼格也不够高
第二种 就是直接调用腾讯和优酷提供的接口
先说同腾讯的,首先要引入依赖文件
<script src="http://qzs.qq.com/tencentvideo_v1/js/tvp/tvp.player.js" charset="utf-8"></script>
接下来就是一些配置项
var video = new tvp.VideoInfo(); //定义视频对象
video.setVid(id); //向视频对象传入视频vid，进入腾讯视频，上面提到的地址里面就可以找到视频的vid
video.setChannelId(直播频道id); //向视频对象传入直播频道id，这是是直播需要的，视频默认点播
var player = new tvp.Player(width,height); //定义播放器对象，参数可接受数值
player.addParam("autoplay","0"); //是否自动播放，0为否1为是
player.addParam("pic",Img); //定义视频初始页面显示的图片
player.addParam("wmode","transparent");//设置透明化，不设置时，视频为最高级，总是处于页面的最上面，此时设置z-index无效
player.write("容器ID"); //视频输出的ID
以上这些配置基本上就可以完美使用了，当然还有一些其他的配置项，根据需要自行添加
player.setCurVideo(video); //设置播放器初始化时加载的视频
player.addParam('showend',0) //结束时是否有广告
player.addParam("flashskin", "http://imgcache.qq.com/minivideo_v1/vd/res/skins/TencentPlayerMiniSkin.swf"); //flash播放器皮肤；不传入则使用默认皮肤；点播状态下可选值（注意仅限点播，直播无效）,这里是使视频窗口为小窗口
player.addParam("loadingswf", "http://imgcache.qq.com/minivideo_v1/vd/res/skins/web_small_loading.swf"); //加载视频时的swf动画; 不传入则使用默认样式
setTagStart(iStart::number) //设置看点开始时间
setTagEnd(iEnd::number) //设置看点结束时间
setTitle(sTitle::string) //设置视频标题
优酷的跟腾讯其实没多大差别
同样开始引入依赖文件
<script src="http://player.youku.com/jsapi" charset="utf-8"></script>
接下来配置项
player =newYKU.Player('youkuplayer',{
styleid:'0', //播放样式0-9
client_id: '', //登录优酷在后台创建一个应用结可以拿到
vid: 'ID', //视频ID 跟腾讯的vid是一样的道理
autoplay:true, //是否自动播放视频
show_related:true, //播放完成是否显示相关视频
embsig: '', //嵌入式播放器签名(非网站类应用必须设置)
password: 'md5('播放密码'+client_id)',//免密码播放
events:{
onPlayerReady:function(){/*your code*/},//播放器准备就绪调用
onPlayStart:function(){/*your code*/},//播放器开始播放时调用
onPlayEnd:function(){/*your code*/}//播放器结束播放时调用
player.create({
onpause:function(){
console.log('暂停了')
},
onallended:function(){
console.log('播放完了')
},
onfullscreen:function(){
if (this.isFullScreen == true) {
console.log("全屏了")
}else {
console.log("取消全屏了")
}
}
})
functionplayVideo(){
player.playVideo();//播放
}
functionpauseVideo(){
player.pauseVideo();//暂停
}
functionseekTo(s){
player.seekTo(s);//定位至指定时间
}
functioncurrentTime(){
returnplayer.currentTime();//当前播放时间
}
网友评论