flv 自动播放 html autostart="true",GitHub - fesiong/sewise: 一款免费、开源的多媒体播放器,以HTML5技术为平台开发,同时兼容flash技术,实现了...

sewise播放器3.2.1_release版本

主要特性

1、 全新的架构,代码结构更加合理清晰,简洁易懂,易扩展,易维护。

2、 flash和html5播放器共用一套皮肤。

3、 支持一个页面多个播放器实例同时播放

4、 轻松支持插件扩展

播放器使用方式:

一:(1)播放器嵌入方式(一个页面只能嵌入一个播放器)

.点播,实际地址播放

.点播,节目ID播放。

.直播,实际地址播放。

.直播,节目ID播放。

(2)播放器实例化方式(支持一个页面多个播放器实例)

.点播实际地址播放

var config={

elid:"container1",//包裹播放器的div容器ID属性值

autostart:true,

url:"video/test.mp4",

skin:"vodWhite"

};

var config2={

elid:"container2",//包裹播放器的div容器ID属性值

autostart:true,

url:"video/test2.m3u8",

skin:"vodTransparent"

};

$(document).ready(dowReady);//页面加载完成

var player,player2;

function dowReady(){

player=new Sewise.SewisePlayer(config);

player.startup();

player2=new Sewise.SewisePlayer(config2);

player2.startup();

};

.点播节目ID播放

只要把上面config对象的url属性设置成如下格式: url:"vod://192.168.3.88/dff999"。

"dff999"表示节目ID。

.直播实际地址播放

var config={

elid:"container1",//包裹播放器的div容器ID属性值

autostart:true,

url:"rtmp://192.168.1.53:1935/livestream/2bsprtda",

duration:3600,

skin:"liveWhite"

};

var config2={

elid:"container2",//包裹播放器的div容器ID属性值

autostart:true,

server:"live",

url:"http://192.168.1.53:1935/livestream/3ggprtda.m3u8",

duration:3600,

skin:"liveWhite"

};

$(document).ready(dowReady);//页面加载完成

var player,player2;

function dowReady(){

player=new Sewise.SewisePlayer(config);

player.startup();

player2=new Sewise.SewisePlayer(config2);

player2.startup();

};

.直播节目ID播放

只要把上面config对象的url属性设置成如下格式:

直播rtmp url:"live://192.168.3.88/dff999/rtmp"

直播m3u8 url:"live://192.168.3.88/dff999/hls"

"dff999"表示节目ID。

二:API接口调用和说明

播放器嵌入方式:var player= window.SewisePlayer;

播放器实例化方式:var player=new Sewise.SewisePlayer(config);

(1)点播直播通用接口

`

/*

播放

*/

player.play();

/*

暂停

*/

player.pause();

/*

停止

*/

player.stop();

/*

跳转到指定时间播放,

@param time

time类型点播时为数值表示要跳转到的位置(秒),直播时为字符串表示要跳转到的日期(如:’20110503123456’)

*/

player.seek(time);

/*

设置声音

@param volume 值0-1

*/

player.setVolume(volume);

/*

设置是否静音

@param bool 值true,false

*/

palyer.muted(bool);

/*

根据节目id播放视频

@param programId 节目ID

@param startTime 点播时值为(秒),直播时值为(日期:’20110503123456’)

@param autostart 是否自动播放

*/

player.playProgram(programId, startTime, autostart);

/*

根据视频地址播放

@param videoUrl 视频地址

@param title 节目标题

@param startTime 点播时为数值表示开始播放的位置(秒)。 直播时为字符串表示开始播放位置的日期:’20110503123456’

@param autostart 是否自动播放true false

*/

player.toPlay(videoUrl, title, startTime, autostart);

/*

返回视频总时长(秒)

*/

player.duration();

/*

返回当前播放时间位置、日期

点播返回当前视频播放到的位置(秒),直播返回当前视频播放到的时间点(日期)

*/

player.playTime ();

/*

获取播放器根容器

*/

player.getPlayerContainer();

/*

获取视频容器

*/

player.getVideoContainer();

/*

获取皮肤容器

*/

player.getSkinContainer();

/*

获取视频元素对象

*/

player.getVideo();

/*

设置播放速率(只支持html5)

1.0 正常速度

0.5 半速(更慢)

2.0 倍速(更快)

-1.0 向后,正常速度

-0.5 向后,半速

*/

player.setPlaybackRate(value);

/*

获取播放速率(只支持html5)

*/

player.getPlaybackRate();

/**

强制刷新皮肤页面布局

*/

player.forceRefreshSkinSize();

/**

开启全屏(必须用户手动触发,比如通过点击按钮事件调用这个接口触发)

*/

player.fullScreen();

/**

退出全屏

*/

player.normalScreen();

(2)点、直播专用接口方法

/* 点播方法

更新多清晰度播放列表

jsonObj(json对象)--- 对应播放器参数videosjsonurl

*/

player.updateVideosjsonurl(jsonObj);

/* 直播方法

回到直播

*/

player.live();

/* 直播方法

返回当前视频最新的直播时间日期

*/

player.liveTime();

/*直播方法

设置直播时间跨度

value类型为数值,表示播放进度条上规化的时长

默认值3600

*/

player.setDuration (value);

`

三、播放器回调的函数

/*

播放器准备好了

*/

player.on("playerReady",function(){

});

/*

*视频开始播放后回调的函数

*/

player.on("start",function(){

});

/*

*视频暂停播放后回调

*/

player.on("pause",function(){

});

/*

视频播放前回调

*/

player.on("beforePlay",function(){

});

/*

*视频停止播放后回调

*/

player.on("ended",function(){

});

/*

视频时长改变时回调

*/

player.on("durationChange",function(){

});

/*

*视频实时播放回调

*/

player.on("timeupdate",function(){

});

/*

视频加载进度回调

@parame pt

*/

player.on("loadProgress",function(pt){

});

/*

视频缓冲开始回调

*/

player.on("bufferBegin",function(){

});

/*

视频缓冲结束回调

*/

player.on("bufferComplete",function(){

});

/*

播放器获取到视频metadata信息后回调

*/

player.on("metadata",function(obj){

});

/*

视频时移播放后回调的函数

/

player.on("seek",function(e){

});

/

皮肤控制条改变显示状态时回调

*/

player.on("controlbarShowState",function(obj){

console.log(obj.isShow);

});

/*

全屏后回调

*/

player.on("fullScreen",function(){

});

/*

退出全屏后回调

*/

player.on("cancelFullScreen",function(){

});

/*

flash端播放hls流时相关事件回调

*/

player.on("hlsEvents",function(obj){

console.log("hls----"+obj.eventName+":"+obj.data);

});

四:播放器参数说明

1、点、直播通用参数:

autostart

说明:[可选]加载视频地址等信息后是否自动开始播放

类型:字符串

取值:”true”、”false”,为空表示:”true”

对应:通用

skin

说明:播放器皮肤

类型:字符串

取值:如,”vodOrange”

对应:通用

type

说明:[可选]播放视频类型,此参数不是必须的,播放器内部会通过url参数自行判断类型,如果视频地址比较特殊,需要设置此参数

类型:字符串

取值:”rtmp”、”flv”、”mp4”、”m3u8”

对应:通用

title

说明:[可选]所播放节目的标题

类型:字符串

取值:如,”深圳卫视”

对应:通用

server

说明:[可选]服务器类型

类型:字符串

取值:”vod”、live”,值为vod时播放器将启用点播模式,值为live时播放器将启用直播模式。

对应:通用

lang

说明:[可选]播放器显示语言

类型:字符串

取值:”en_US”或”zh_CN”

对应:通用

logo

说明:[可选]播放器logo

类型:字符串

取值:如,http://sewise.com/logo.png

对应:通用

volume

说明:[可选]播放器默认音量值

类型:字符串

取值:0 - 1

对应:通用

poster

说明:[可选]视频播放前显示的图像

类型:字符串

取值:如,http://www.sewise.com/img/01.png

对应:通用

claritybtndisplay

说明:[可选]是否显示多码率按钮

类型:字符串

取值:”enable”、”disable”,缺省默认值为:”enable”

对应:通用

timedisplay

说明:[可选]是否显示播放控制栏上的时间

类型:字符串

取值:”enable”、”disable”,缺省默认值为:”enable”

对应:通用

controlbardisplay

说明:[可选]是否显示播放控制栏

类型:字符串

取值:”enable”、”disable”,缺省默认值为:”enable”

对应:通用

topbardisplay

说明:[可选]是否显示顶部标题

类型:字符串

取值:”enable”、”disable”,缺省默认值为:”enable”

对应:通用

bigplaybtndisplay

说明:[可选]是否显示皮肤中间的大播放按钮

类型:字符串

取值:”enable”、”disable”,缺省默认值为:”enable”

对应:通用

primary

说明:[可选]播放器启用的优先模块,当视频、流同时支持HTML5或Flash播放时,该参数用于确定优先HTML5还是Flash播放。

类型:字符串

取值:如,”html5”, “flash”,缺省默认值为:”html5”

对应:通用

playsinline

说明:[可选]给html5的video标签增加webkit-playsinline属性

类型:字符串

取值:如true,false

对应:通用

2.点播专用参数

url

说明:点播视频时的播放地址

类型:字符串

取值:(1)视频地址播放 http://192.168.1.219:5080/flvseek/data/25102442M.flv (2)节目ID播放 vod://192.168.1.210/节目ID (3)当不想传入播放地址时,可以设置为url:"#"

对应:flv、mp4、m3u8

videosjsonurl

说明:点播视频时的JSON集播放地址(配合vodFlowPlayer皮肤用于多码率切换),播放器同时必须设置type参数

类型:字符串或JSON对象

取值:如,

videosjsonurl: {

“programname”:”节目名”,

“videos”: [

{ “name”:”普通”, “url”:”http://219.232.161.206:5080/flvseek/201311/TRo4TUsO.flv” },

{ “name”:”标清”, “url”:”http://219.232.161.202:5080/flvseek/201402/OVNNwRk1.flv” }

]

}

对应:flv、mp4、m3u8

fallbackurls

说明:点播视频播放时的兼容回退地址,当url地址不支持时将一一验证回退地址的可播放性

类型:字符串或JSON对象

取值:如,

fallbackurls:{

mp4: "http://192.168.1.11/materials/mov_bbb.mp4",

ogg: "http://192.168.1.11/materials/mov_bbb.ogg”,

webm: "http://192.168.1.11/materials/mov_bbb.webm",

m3u8: "http://192.168.1.11/materials/mov_bbb.m3u8"

}

starttime

说明:[可选]视频播放的开始时间

类型:数值

取值:开始播放的时间,如:234.341,缺省默认值为:从头开始

对应:flv、mp4、m3u8

3.直播专用参数

url

说明:直播视频时的播放地址

类型:字符串

取值:(1)视频地址播放rtmp://192.168.1.219:5080/livestream/v2qrgj3a;http://192.168.1.219:5080/hls/v2qrgj3a.m3u8

(2)节目ID播放 live://192.168.1.219/节目ID/rtmp; live://192.168.1.219/节目ID/hls;

(3)当不想传入播放地址时,可以设置为url:"#"

对应:http、rtmp

duration

说明:[可选]直播时播放器的进度条代表的时间跨度

类型:数字

取值:如:3600

对应:http、rtmp

shifttime

说明:[可选]直播启动播放时的开始播放时间

类型:字符串

取值:14位绝对时间字符串,如,20130413102312

对应:http、rtmp

五:目录结构说明

(1)文件夹说明

css文件夹:播放器css文件

flash文件夹:flash播放器

html文件夹:播放器皮肤文件

js文件夹:播放器需要调用的js库文件

plugin文件夹:播放器插件源代码(比如弹幕插件,浏览器播放m3u8视频插件)

sewise.player.dev.js: 未压缩版本播放器源文件

sewise.player.min.js: 压缩版本播放器源文件

(2)皮肤介绍

html文件夹里有四套点播皮肤(vod开头的文件夹)和一套直播皮肤(live开头的文件夹);

以vodWhite皮肤为例: skin.css 播放器皮肤的样式文件

skin.html 播放器皮肤的DOM元素

skin.html.js 播放器皮肤js格式的DOM元素,用于兼容跨域加载

sewise.player.dev.js源代码里的SkinController类控制皮肤逻辑,自定义皮肤时可以修改里面的代码。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值