其实我是讨厌码字的,但是最近工作中经常用到一些腾讯的或者优酷的视频,所以觉得还是有必要记录一下,下面会讲到两种方法
第一种 直接将腾讯或者优酷视频下方的分享代码拿过来用
根据自己的需求选择相应的代码,优酷腾讯是一样的,但是这种方法是有弊端的,首先不仅不好控制,而且逼格也不够高
第二种 就是直接调用腾讯和优酷提供的接口
先说同腾讯的,首先要引入依赖文件
<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();//当前播放时间
}