Giters

fesiong / sewise

一款免费、开源的多媒体播放器，以HTML5技术为平台开发，同时兼容flash技术，实现了跨平台的视频播放

Home Page:http://www.sewise.com/?mod=index&do=product&key=7

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

sewise播放器3.2.1_release版本

主要特性

1、 全新的架构，代码结构更加合理清晰，简洁易懂，易扩展，易维护。 2、 flash和html5播放器共用一套皮肤。 3、 支持一个页面多个播放器实例同时播放 4、 轻松支持插件扩展

播放器使用方式：

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

.点播，实际地址播放

<div style="width: 640px; height: 360px; "> 
<script type="text/javascript" src="sewise.player.min.js#url=http://www.w3schools.com/html/mov_bbb.mp4&autostart=true&starttime=0&lang=en_US&logo=http://onvod.sewise.com/libs/swfplayer/skin/images/logo.png&title=VodVideo&buffer=5&skin=vodWhite"></script> 
</div>

.点播，节目ID播放。

<div style="width: 640px; height: 360px; "> 
<script type="text/javascript" src="sewise.player.min.js#url=vod://192.168.3.88/eQgPHj4N&autostart=true&starttime=0&lang=en_US&logo=http://onvod.sewise.com/libs/swfplayer/skin/images/logo.png&buffer=5&skin=vodWhite"></script> 
</div>

.直播，实际地址播放。

<div style="width: 640px; height: 360px; "> 
<script type="text/javascript" src="sewise.player.min.js#url=rtmp://219.232.161.204/livestream/mtzysunq&autostart=true&shifttime=&lang=en_US&logo=http://onvod.sewise.com/libs/swfplayer/skin/images/logo.png&title=LiveVideo&skin=liveWhite"></script> 
</div>

.直播，节目ID播放。

<div style="width: 640px; height: 360px; "> 
<script type="text/javascript" src="sewise.player.min.js#url=live://192.168.3.88/vk5nx2cj/rtmp&autostart=true&shifttime=&lang=en_US&logo=http://onvod.sewise.com/libs/swfplayer/skin/images/logo.png&skin=liveWhite"></script> 
</div>

(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类控制皮肤逻辑,自定义皮肤时可以修改里面的代码。

About

一款免费、开源的多媒体播放器，以HTML5技术为平台开发，同时兼容flash技术，实现了跨平台的视频播放

http://www.sewise.com/?mod=index&do=product&key=7