文章转载于：https://www.cnblogs.com/DreamerLeaf/p/6264203.html

Sewise Player简介

下面就简单的说一下这个视频插件的介绍、功能及使用

　　插件的官方文档地址为：https://github.com/jackzhang1204/sewise-player

Sewise Player是一款专业的免费网页HTML5视频、流播放器，它功能强大，体积小，跨平台，兼容性好，使用方便简洁。

播放器是主要以HTML5技术为平台开发，同时兼容Flash技术，实现了跨平台各浏览器兼容的视频播放。使用Sewise Player您可以在Windows, MacOS, Linux，Windows Phone, Android, IOS等任意平台上，通过对应的浏览器或者APP中基于WebView播放视频。
Sewise Player使用非常简单，只要在页面对应的DIV内嵌入一个JS文件即可，播放器将通过自动识别浏览器的功能来启用HTML5或Flash模式播放视频。您不需要掌握任何JavaScript或ActionScript编码技术就可以制作出专业的网页视频播放器。
Sewise Player即可以做为单一的前台播放器来在页面上播放视频和流，也可以结合Sewise Server后台技术实现专业的可交互的点播、直播视频播放。

播放器运行原理:

第一步：页面加载sewise.player.min.js文件后，该脚本会将相应的参数解析出来，并检查出当前的设备平台、浏览器特性，同时还会根据JS文件的路径取出host地址，用于播放地址请求。
第二步：通过分析出来的vod与type参数与及浏览器特性，来确定播放器是启用HTML5还是Flash模块。对于不同平台和浏览器同时支持的视频格式或流协议，将优先启用HTML5播放模块。
第三步：加载对应的皮肤文件与库文件。
第四步：在皮肤加载完成后将根据给定的参数来初始化播放器。播放器初始化完成后，开始播放视频、流同时会在当前页面中回调playerReady()（HTML5或Flash播放器都会回调playerReady方法，表示播放器API接口已可用）等相应的播放器回调方法。

特点：

播放器是主要以HTML5技术为平台开发，同时兼容Flash技术，实现了跨平台各浏览器兼容的视频播放。使用Sewise Player您可以在Windows, MacOS, Linux，Windows Phone, Android, IOS等任意平台上，通过对应的浏览器播放视频。
Sewise Player使用非常简单，只要在页面对应的DIV内嵌入一个JS文件即可，播放器将通过自动识别浏览器的功能来启用HTML5或Flash模式播放视频。您不需要掌握任何JavaScript或ActionScript编码技术就可以制作出专业的网页视频播放器。
Sewise Player即可以做为单一的前台播放器来在页面上播放视频和流，也可以结合Sewise Server后台技术实现专业的可交互的点播、直播视频播放。

功能列表：

支持HTML5，Flash视频播放技术。
支持多平台，PC包括Windows, MacOS, Linux等。Mobile包括Android, IOS, Windows Phone等。
支持多浏览器兼容，如IE6/7/8/9/10、Google Chrome、Firefox、safari、Opera等。
支持多种视频格式，如mp4、m3u8、oga、webm、theora、flv、f4v等。
支持多种协议直播流，如rtmp、hls、http等。
支持Flash播放m3u8文件，以及AES-128解码播放。
支持PC与Mobile平台播放器自动识别功能。
支持浏览器HTML5与Flash特性检测。
支持HTML5不同视频格式地址Fallback兼容播放功能。
支持Flash Fallback到HTML5视频播放功能。
支持播放地址AMF, AJAX, JOSNP类型请求。
支持自定义HTML5与Flash皮肤，让您无需了解专业的编码技术也可以制作出超烗风格的皮肤。
支持前置广告（swf, 图片, 视频）。
支持字幕。
支持多种播放参数设定，并支持启动参数设置。
支持丰富的api接口，以此可以快速打造功能强大的插件。

页面播放器嵌入方式：　

setup方式嵌入播放器。

<div style="width: 640px; height: 360px; ">
 <script type="text/javascript" src="../player/sewise.player.min.js"></script>  <script type="text/javascript">  SewisePlayer.setup({  server: "vod",  type: "mp4",  videourl: "http://jackzhang1204.github.io/materials/mov_bbb.mp4",  skin: "vodWhite",  title: "Tile 标题",  lang: 'zh_CN',  fallbackurls:{  ogg: "http://jackzhang1204.github.io/materials/mov_bbb.ogg",  webm: "http://jackzhang1204.github.io/materials/mov_bbb.webm"  }  });  </script> </div>

点播，实际地址播放。

<div style="width: 640px; height: 360px; ">
 <script type="text/javascript" src="../player/sewise.player.min.js?server=vod&type=mp4&videourl=http://www.w3schools.com/html/mov_bbb.mp4&sourceid=&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="http://219.232.161.202/libs/swfplayer/player/sewise.player.min.js?server=vod&sourceid=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="../player/sewise.player.min.js?server=live&type=rtmp&streamurl=rtmp://219.232.161.204/livestream/mtzysunq&autostart=true&pid=&shifttime=&buffer=5&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="http://219.232.161.204/libs/swfplayer/player/sewise.player.min.js?server=live&autostart=true&pid=vk5nx2cj&shifttime=&buffer=5&lang=en_US&logo=http://onvod.sewise.com/libs/swfplayer/skin/images/logo.png&skin=liveWhite"></script> </div>

Sewise Player参数说明

一、参数说明

1、点、直播通用参数：

autostart

说明：[可选]加载视频地址等信息后是否自动开始播放
类型：字符串
取值："true"、"false"，为空表示："true"
对应：通用

skin

说明：[可选]播放器皮肤的相对路径
类型：字符串
取值：如，"vodOrange"
对应：通用

buffer

说明：[可选]播放器开始播放前所需下载的缓冲数据时长，单位：秒
类型：浮点数
取值：如，5
对应：通用

sourceid, pid

说明：[可选]被播放节目的id，sourceid用于点播，pid用于直播
类型：字符串
取值：sewise点播或直播服务中节目的id，如：'5v6s3gkk'，为空表示：需要从JS调用相关方法进行视频播放
对应：通用

title

说明：[可选]所播放节目的标题
类型：字符串
取值：如，"深圳卫视"
对应：通用

server

说明：[可选]服务器类型
类型：字符串
取值："vod"、live"，值为vod时播放器将启用点播模式，值为live时播放器将启用直播模式。
对应：通用

type

说明：[可选]播放视频类型
类型：字符串
取值："rtmp"、"http"、"flv"、"mp4"、"m3u8" 为空表示：默认的flv播放模式，其中rtmp、http为直播的播放模式；flv、mp4、m3u8为点播的播放模式
对应：通用

draggable

说明：[可选]进度条是否可以拖动
类型：字符串
取值："true"、"false"，缺省默认值为："true"
对应：通用

published

说明：[可选]是否去检查节目发布状态的开关参数
类型：数值
取值：0或1,0表示：不需要检查节目是否发布，即无论节目是否发布都尝试去播放节目的源；1表示：需要检查节目的发布状态，未发布则不请求节目源地址
对应：通用

lang

说明：[可选]播放器显示语言
类型：字符串
取值："en_US"或"zh_CN"
对应：通用

logo

说明：[可选]播放器角落logo
类型：字符串
取值：如，http://sewise.com/logo.png
对应：通用

volume

说明：[可选]播放器默认音量值
类型：字符串
取值：0 - 1
对应：通用

poster

说明：[可选]视频播放前显示的图像
类型：字符串
取值：如，http://www.sewise.com/img/01.png
对应：通用

claritybutton

说明：[可选]是否显示多码率按钮
类型：字符串
取值："enable"、"disable"，缺省默认值为："enable"
对应：通用

timedisplay

说明：[可选]是否显示播放控制栏上的时间
类型：字符串
取值："enable"、"disable"，缺省默认值为："enable"
对应：通用

controlbardisplay

说明：[可选]是否显示播放控制栏
类型：字符串
取值："enable"、"disable"，缺省默认值为："enable"
对应：通用

topbardisplay

说明：[可选]是否显示顶部标题
类型：字符串
取值："enable"、"disable"，缺省默认值为："enable"
对应：通用

customdatas

说明：[可选]自定义参数对象，皮肤开发者专用定义参数
类型：JSON对象
取值：如，customdatas: { "logoLink": "http://www.baidu.com/" }
对应：通用

primary

说明：[可选]播放器启用的优先模块，当视频、流同时支持HTML5或Flash播放时，该参数用于确定优先HTML5还是Flash播放。
类型：字符串
取值：如，"html5", "flash"，缺省默认值为："html5"
对应：通用

2、非通用参数：

a.点播专用参数

videourl

说明：点播视频时的播放地址
类型：字符串
取值：如，'http://192.168.1.219:5080/flvseek/data/201310/25102442M.flv'
对应：flv、mp4、m3u8

videosjsonurl

说明：点播视频时的JSON集播放地址
类型：字符串或JSON对象
取值：如， videosjsonurl: { "programname":"json url ? : 测试 % 地址", "videos": [ { "name":"普通", "url":"http://219.232.161.206:5080/flvseek/data/userdata/vismam/receive/201311/TRo4TUsO.flv" }, { "name":"标清", "url":"http://219.232.161.202:5080/flvseek/data/userdata/vod/resource/201402/OVNNwRk1.flv" } ] }
对应：flv、mp4、m3u8

fallbackurls

说明：点播视频播放时的兼容回退地址，当videourl地址不支持时将一一验证回退地址的可播放性
类型：字符串或JSON对象
取值：如， fallbackurls:{ mp4: "http://jackzhang1204.github.io/materials/mov_bbb.mp4", ogg: "http://jackzhang1204.github.io/materials/mov_bbb.ogg", webm: "http://jackzhang1204.github.io/materials/mov_bbb.webm", m3u8: "http://jackzhang1204.github.io/materials/mov_bbb.m3u8" }
对应：mp4、ogg、webm、m3u8

starttime

说明：[可选]视频播放的开始时间
类型：数值
取值：开始播放的时间，如：234.341，缺省默认值为：从头开始
对应：flv、mp4、m3u8

b.直播专用参数

streamurl

说明：http-flv模式直播流的播放地址，rtmp模式直播服务器应用连接地址 + 流名称。另，通过“_”字符在流地址后添加14位的开始时间和结束时间（如："rtmp://192.168.1.219/livestream/qq3tvegb_20130812094010_20130812094210"）,可以实现流从开始时间播放到结束时间后停止流播放。
类型：字符串
取值：如，'"http://192.168.1.219:5080/livestream/v2qrgj3a.flv'，或：'rtmp://192.168.1.219:1935/livestream/v2qrgj3a'
对应：http、rtmp

duration

说明：[可选]直播时播放器的进度条代表的时间跨度
类型：数字
取值：时间称数，如：3600
对应：http、rtmp

shifttime

说明：[可选]直播启动播放时的开始播放时间
类型：字符串
取值：14位绝对时间字符串，如，20130413102312
对应：http、rtmp

二、参数优先级

1、pid与视频播放地址（如：videourl/httpurl/rtmpurl+streamname）之间，pid播放优先。

Sewise Player接口方法说明

一、点、直播通用接口方法

doPlay()

说明：启动、恢复播放
参数：无
返回：无
示例：

SewisePlayer.doPlay();

doPause()

说明：暂停播放
参数：无
返回：无
示例：

SewisePlayer.doPause();

doStop()

说明：停止播放
参数：无
返回：无
示例：

SewisePlayer.doStop();

doSeek(time)

说明：跳转播放
参数：time类型点播时为数值表示要跳转到的位置（秒），直播时为字符串表示要跳转到的日期（如：'20130503123456'）
返回：无
示例：
点播

SewisePlayer.doSeek(20);

直播

SewisePlayer.doSeek("20130503123055");

toPlay(url, title, startTime, autoPlay)

说明：根据视频地址播放视频
参数：url类型为字符串表示要播放的视频地址，title类型为字符串表示视频标题，startTime类型点播时为数值表示开始播放的位置（秒）。直播时为字符串表示开始播放位置的日期（如：'20130503123456'），autoPlay类型为布尔值表示是否自动开始播放。另，直播时当流地址后添加了14位的开始时间和结束时间后（如："rtmp://192.168.1.219/livestream/qq3tvegb_20130812094010_20130812094210"），流将从开始时间点播放到结束时间点后停止流播放。
返回：无
示例：
点播

SewisePlayer.toPlay("http://192.168.1.219:5080/flvseek/data/26144610yg.flv","深圳卫视", 20, true);

直播

SewisePlayer.toPlay("rtmp://192.168.1.219/livestream/6jzcdjgi", "深圳卫视", "20130927150000", true);

setVolume(volue)

说明：设置音量
参数：volue类型为数值（0 - 1）,表示要设置的音量值
返回：无
示例：

SewisePlayer.setVolume(0.5);

playTime()

说明：获取当前播放时间位置、日期
参数：无
返回：点播返回当前视频播放到的位置（秒）。直播返回当前视频播放到的时间点（日期）
示例：

SewisePlayer.playTime();

fullScreen()

说明：进入全屏播放
参数：无
返回：无
示例：

SewisePlayer.fullScreen();

noramlScreen()

说明：退出全屏播放
参数：无
返回：无
示例：

SewisePlayer.noramlScreen();

bufferProgress()

说明：获取当前缓冲进度
参数：无
返回：当前缓冲进度比
示例：

SewisePlayer.bufferProgress();

二、点、直播专用接口方法

1.点播专用方法

playProgram(pid, startTime, autoPlay)

说明：通过节目ID来播放视频
参数：无
返回：pid类型为字符串表示节目ID，startTime类型为数值表示视频开始播放的位置（秒），autoPlay类型为布尔值表示是否自动开始播放
示例：

SewisePlayer.playProgram("jCAH3SAY", 20, true);

duration()

说明：获取视频的总时长
参数：无
返回：返回当前播放视频的总时长
示例：

SewisePlayer.duration();

2.直播专用方法

doLive()

说明：回到直播
参数：无
返回：无
示例：

SewisePlayer.doLive();

playChannel(cid, startTime, autoPlay)

说明：通过频道ID来播放视频
参数：cid类型为字符串表示节目ID，startTime类型为字符串表示开始播放的时间点（日期）（如：'20130503123456'），autoPlay类型为布尔值表示是否自动开始播放
返回：无
示例：

SewisePlayer.playChannel("y894tgf3", "20130503123456", true);

liveTime()

说明：获取最新直播时间
参数：无
返回：当前视频最新的直播时间日期
示例：

SewisePlayer.liveTime();

setDuration(duration)

说明：设置直接时间跨度
参数：duration类型为数值，表示播放进度条上规化的时长。
返回：无
示例：

SewisePlayer.setDuration(645);

三、播放器回调的函数

1、点、直播通用回调函数

playerReady(id)

说明：播放器准备好后回调的函数
参数：id类型为字符串，表示播放器当前id。
返回：无
示例：

function playerReady(id) {
	SewisePlayer.doSeek(10);
}
或
SewisePlayer.playerReady(function(id){
	SewisePlayer.doSeek(10);
});

onStart(id)

说明：视频开始播放后回调的函数
参数：无
返回：id，播放器当前id。
示例：

function onStart(id){
	console.log("play start 1")
}
或
SewisePlayer.onStart(function(id){
	 console.log("play start 2");
});

onPause(id)

说明：视频暂停播放后回调的函数
参数：id，播放器当前id。
返回：无
示例：

function onPause(id){
	console.log("play pause 1")
}
或
SewisePlayer.onPause(function(id){
	 console.log("play pause 2");
});

onStop(id)

说明：视频停止播放后回调的函数
参数：id，播放器当前id。
返回：无
示例：

function onStop(id){
	console.log("play stopped 1")
}
或
SewisePlayer.onStop(function(id){
	 console.log("play stopped 2");
});

onSeek(time, id)

说明：视频时移播放后回调的函数
参数：time时移时间点，id，播放器当前id。
返回：无
示例：

function onSeek(time, id){
	console.log("play seek 1: " + time)
}
或
SewisePlayer.onSeek(function(time, id){
	console.log("play seek 2: " + time);
});

onPlayTime(time, id)

说明：视频实时播放回调
参数：time, id。time当前播放头位置，id，播放器当前id。
返回：无
示例：

function onPlayTime(time, id){
	console.log("onPlayTime 1: " + time);
}
或
SewisePlayer.onPlayTime(function(time, id){
	console.log("onPlayTime 2: " + time);
});

onMetadata(meta, id)

说明：播放器获取到播放视频metadata信息后回调的函数
参数：meta类型为JSON对象，表示metadata信息数据对象，id，播放器当前id。
返回：无
示例：

function onMetadata(meta, id){
	console.log("onMetadata 1");
}
或
SewisePlayer.onMetadata(function(meta, id){
	 console.log("onMetadata 2");
});

onClarity(clarity, id)

说明：切换清晰度后回调的函数
参数：clarity类型为Object对象，表示清晰度信息数据对象，id，播放器当前id。
返回：无
示例：

function onClarity(clarity, id){
	console.log(clarity.id + "\n" + clarity.name + '\n' + clarity.videoUrl);
}
或
SewisePlayer.onClarity(function(clarity, id){
	 console.log(clarity.id + "\n" + clarity.name + '\n' + clarity.videoUrl);
});

onBuffer(pt, id)

说明：播放器进入缓冲后回调的函数
参数：pt, id。pt当前缓冲下载进度比，id，播放器当前id。
返回：无
示例：

function onBuffer(pt, id){
	console.log("onBuffer 1: " + pt);
}
或
SewisePlayer.onBuffer(function(pt, id){
	console.log("onBuffer 2: " + pt);
});

Sewise Player播放器的使用

文章转载于：https://www.cnblogs.com/DreamerLeaf/p/6264203.html

Sewise Player简介

Sewise Player是一款专业的免费网页HTML5视频、流播放器，它功能强大，体积小，跨平台，兼容性好，使用方便简洁。

播放器运行原理:

特点：

功能列表：

页面播放器嵌入方式：

Sewise Player参数说明

一、参数说明

1、点、直播通用参数：

autostart

skin

buffer

sourceid, pid

title

server

type

draggable

published

lang

logo

volume

poster

claritybutton

timedisplay

controlbardisplay

topbardisplay

customdatas

primary

2、非通用参数：

a.点播专用参数

videourl

videosjsonurl

fallbackurls

starttime

b.直播专用参数

streamurl

duration

shifttime

二、参数优先级

1、pid与视频播放地址（如：videourl/httpurl/rtmpurl+streamname）之间，pid播放优先。

Sewise Player接口方法说明

一、点、直播通用接口方法

doPlay()

doPause()

doStop()

doSeek(time)

toPlay(url, title, startTime, autoPlay)

setVolume(volue)

playTime()

fullScreen()

noramlScreen()

bufferProgress()

二、点、直播专用接口方法

1.点播专用方法

playProgram(pid, startTime, autoPlay)

duration()

2.直播专用方法

doLive()

playChannel(cid, startTime, autoPlay)

liveTime()

setDuration(duration)

三、播放器回调的函数

1、点、直播通用回调函数

playerReady(id)

onStart(id)

onPause(id)

onStop(id)

onSeek(time, id)

onPlayTime(time, id)

onMetadata(meta, id)

onClarity(clarity, id)

onBuffer(pt, id)

猜你喜欢

页面播放器嵌入方式：　