Sewise Player播放器的使用

文章转载于：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);
});