Sewise Player播放器的使用

╰半夏微凉° 2022-06-03 07:06 203阅读 0赞

#  #

# 文章转载于：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][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>

*  点播，实际地址播放。

*  点播，节目ID播放。

*  直播，实际地址播放。

*  直播，节目ID播放。

#  #

# 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][http_sewise.com_logo.png]
 *  对应：通用

### volume ###

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

### poster ###

*  说明：\[可选\]视频播放前显示的图像
 *  类型：字符串
 *  取值：如，[http://www.sewise.com/img/01.png][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][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_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);
    });

[APP_WebView]: https://github.com/jackzhang1204/webview-embed-sewise-player
[http_sewise.com_logo.png]: http://sewise.com/logo.png
[http_www.sewise.com_img_01.png]: http://www.sewise.com/img/01.png
[http_192.168.1.219_5080_flvseek_data_201310_25102442M.flv]: http://192.168.1.219:5080/flvseek/data/201310/25102442M.flv
[http_192.168.1.219_5080_livestream_v2qrgj3a.flv_rtmp_192.168.1.219_1935_livestream_v2qrgj3a]: http://192.168.1.219:5080/livestream/v2qrgj3a.flv'%20rel=