智汇云-企业数智化核心引擎

### WEB播放器介绍

智汇云以SDK形式提供视频直播、点播播放器，可以帮助开发者快速实现视频播放能力。 WEB 播放器开发文档只包含了最终用户使用场景中的必要功能。其中360html5播放器支持MP4和HLS（m3u8）、FLV的视频播放功能，在使用本播放器之前，请确认已经登录智汇云平台获取播放器需要的各个配置项；

智汇云WEB 播放器内嵌了Html5和FLash两种播放和解码方式，能够根据用户实际平台支持程度选择，优先选择Html5模式播放；

关于Html5的特别提醒：

Html5的播放器的视频播放能力本身不是网页代码实现的，而是靠浏览器的支持，所以其兼容性并不像我们想象的那么好，所以必须要接受一个事实：不是所有的手机浏览器都能有符合预期的表现。另外，由于Hls协议特性决定在直播场景下大概会有一个20-30s的延时，目前来看在移动浏览器端暂时还没有其他更好的选择

### WEB-Player播放器版本迭代

### WEB-Player播放器特性

支持播放协议| 支持内容
---|---
RTMP协议| Flash支持
http(s)-flv | Flash、H5支持
HLS（m3u8）| Flash、H5支持
http(s)-Mp4 | Flash、H5支持

### 兼容特性

Flash播放内核如上特性全兼容；
Html5自研内核（兼容系统）播放时支持如下：

视频编码容器 | 支持程度
---|---
 TS视频（M3U8）|chrome 23+, firefox 42+,safari 6(内置播放)
MP4 | chrome All、firefox 21+，IE 9+，Edge 12+,safari 3.2+
FLV|chrome 23+,firefox 42+

### WEB-Player播放器特性

播放功能 | 支持内容
---|---
播放体验| 开始、暂停、停止、快进、快退、静音等基础播放器功能
播放屏幕|	全屏、非全屏
数据打点|	系统自动打点数据上报
解码标准|	H.264、MPEG-4
多清晰度| 支持（暂时可能存在缺陷）
其他功能|	预调度、延时播放、封面图、动态loading、播放水印

### 播放器嵌入

SDK地址：[https://live.360.cn/index/sdkdownload](https://live.360.cn/index/sdkdownload)

播放器初始化：

```
CloudSDK.createPlayer(wrapperID, config)
```

config配置

配置项 | 支持内容
---|---
businessId| 对应业务的bid例如：huajiao 从智汇云获取
channelId|对应业务的cid ，针对点播直播的服务名称，请通过是智汇云平台创建获取
vtype| replay或者liveplay。默认为 replay。
box | mp4、flv、hls
sessionId| 对应用户的session 由使用方自行填写。
autoPlay| 是否自动播放 默认为true。
userId |用户的ID 此用户ID定义的目的是将业务方与智汇云SDK建立唯一的纽带，在追踪日志时方便沟通，具体的值智汇云不关心，保证唯一即可，一般为用户的ID。
coverImage |封面图片，不支持gif。
streamClarity |流清晰度 Array [{"src":"", name:'普清', default: true},{ "src":"", name:'高清'},{ "src":"", name:'超清'}]
customVolume|0-1的小数
customColor|修改皮肤颜色，如customColor=0x99fffff
stopLog|控制日志开启 true、false，默认是false
protocol|协议 http、https，默认是https

播放器调用方法：

主动方法 | 支持内容
---------------|-------------
getFullscreen  |获取全屏状态
getPlayerStatus|获取播放器状态返回值：1：播放中、2：停止播放、3：缓冲中、4：暂停中、5：连接失败、6：播放失败。
duration   |获取视频总时长
getVolume | 获取音量
pause | 暂停
resume | 继续播放
currentTime| 获取当前播放的事件
barLocked| 锁定flash原生控制条事件 true显示false隐藏
barunLocked| 解锁flash原生控制条事件 true显示false隐藏

被动方法|支持内容
------------------| ----------- 
onVolumeChange    | 音量改变回调
onFullScreenChange|是否全屏回调
onVideoLoading    |缓冲比（返回0-100）
onPlayerEvent     |事件回调，详情见下表

事件回调onPlayerEvent ：

参数 | 内容
---|---
volumechange | 音量事件触发回调
fullscreenchange| 全屏事件触发回调
loadedmetadata |加载媒体资源头部
progress |视频加载中
ended |视频播放完成
pause| 视频暂停
play | 视频播放
showbar|展示进度条
hidebar|隐藏进度条
control-clarity-change|清晰度切换
control-playbackRate-change|倍速改变
control-cut-screen|截图回调
control-preview|点击上一个
control-next|点击下一个

直播时示例配置：

直播时，系统根据businessId（bid）、channelId（cid）和SN能够确定唯一的视频流，发起直播之后传入业务自己发起的直播流SN，即可播放；

在线演示，调试地址：[https://live.360.cn/static/html/player-demo.html](https://live.360.cn/static/html/player-demo.html)；
```
<html>
<head>
    <title>播放器demo</title>
</head>
<body>
    <div style="width:740px;height:460px; position:relative;">
        <div id="player"></div>
    </div>
</body>
<script type="text/javascript">
	player = CloudSDK.createPlayer('player', {
		businessId:'yourbid',
		channelId:'yourcid',
		sn: '_LC_RE_non_3150469014781502031793300_SX',
		vtype :'vodplay',
		autoPlay: true,
		majorColor: '#57B0F6',
		children: {
			play: {
				icon: {
					replay: `
						<svg width="33px" height="33px" viewBox="0 0 33 33" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
								
								<desc>Created with Sketch.</desc>
								<defs></defs>
								<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
										<g id="Artboard" transform="translate(-532.000000, -39.000000)" fill="#FFFFFF">
												<g id="重播-copy" transform="translate(513.000000, 20.000000)">
														<path d="M35.4648098,19.0001517 C30.7324219,19.0113171 26.2336527,21.0626455 23.1161622,24.6305728 L23.1161622,23.1249781 C23.1161622,21.9859468 22.1948003,21.0626455 21.0581616,21.0626455 C19.921362,21.0626455 19,21.9859468 19,23.1249781 L19,29.3122983 C19,29.8592816 19.2168455,30.3839341 19.6028714,30.7708129 C19.9887767,31.1575305 20.5123272,31.3747921 21.0581616,31.3747921 L27.2324853,31.3747921 C28.369124,31.3747921 29.290486,30.4514908 29.290486,29.3122983 C29.290486,28.173267 28.369124,27.2499657 27.2324853,27.2499657 L26.3062563,27.2499657 C30.1461628,22.9724113 36.4213674,21.9114975 41.4491575,24.6894631 C46.4771084,27.4674288 48.9309094,33.3514696 47.3708367,38.8886576 C45.8107641,44.4256845 40.6481445,48.1546836 34.9129821,47.8873188 C29.1776588,47.6199943 24.383045,43.4266439 23.3425809,37.7683698 C23.3425809,37.2213865 23.1257354,36.696734 22.7398704,36.3100567 C22.3538042,35.9231778 21.8304146,35.7058759 21.2845802,35.7058759 C20.7387459,35.7058759 20.2151954,35.9231778 19.8291292,36.3100567 C19.4432642,36.696734 19.2264187,37.2213865 19.2264187,37.7683698 C20.4375113,46.5111943 28.3004623,52.7501494 37.070134,51.927135 C45.8398458,51.1041207 52.4099296,43.5104045 51.98006,34.6944204 C51.5503109,25.878396 44.2728547,18.962665 35.4648098,19.0001517 Z" id="重播"></path>
												</g>
										</g>
								</g>
						</svg>
					`
				},
			},
			next: {
			},
			preview: {},
			progressTime: true,
			progressBar: true,
			volume: {},          
			clarity: [
				{name: '标清', src: 'http://yunxianchang.live.ujne7.com/vod-system-bj/103_368b70a5d4f-c5cc-42ff-b442-004168fc86a3.mp4'},
				{name: '高清', src: 'http://yunxianchang.live.ujne7.com/vod-system-bj/103_369ed890f51-1c38-42a7-9ce2-828492660c60.mp4'},
				{name: '原画', src: 'http://yunxianchang.live.ujne7.com/vod-system-bj/103_371ab0c0fda-143d-4755-8727-d3cd12dce02d.mp4'}
			],
			playbackRate: [
				{name: '1倍速', value: 1},
				{name: '0.5倍速', value: 0.5, default: true},
				{name: '2倍速', value: 2}
			],
			cut: {
				
			},
			screen: true
		}
	});
</script>
</html>
```

可替换部分 icon & 自定义组件

```js
controlbar: {
	play: {
		icon: {
			play: './icon/play.svg',
			pause: './icon/pause.svg'
		},
	},
	refresh: {
		tag: 'chimee-control-refresh',
		html: `
			<?xml version="1.0" standalone="no"?>
				<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
					<svg t="1504751056947" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2382" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32">
						<defs>
							<style type="text/css"></style>
						</defs>
						<path stroke="#ffffff" fill="#ffffff" stroke-width="40px" d="M1012.096 490.688l-148.48 148.48c-7.616 7.552-17.984 11.904-28.736 11.904s-20.992-4.288-28.736-11.904l-148.352-148.48c-15.808-15.872-15.808-41.536 0-57.472 15.872-15.872 41.472-15.872 57.472 0l78.976 79.168L794.24 512c0-196.608-159.808-356.48-356.48-356.48C241.216 155.52 81.216 315.392 81.216 512s160 356.48 356.544 356.48c95.232 0 184.768-37.056 252.224-104.384 15.744-15.872 41.472-15.872 57.344 0s15.808 41.472 0 57.344c-82.624 82.752-192.576 128.256-309.568 128.256C196.352 949.632 0 753.344 0 512s196.352-437.76 437.76-437.76c241.408 0 437.76 196.352 437.76 437.76l0 0.384 79.104-79.168c15.872-15.808 41.472-15.808 57.472 0C1027.968 449.216 1027.968 474.816 1012.096 490.688z" p-id="2383"></path>
					</svg>
		`,
		event: {
			click () {
				console.log(this.parent);
			}
		}
	},
	progressTime: true,
	progressBar: {
		layout: 'two-line'
	},
	volume: {
		icon: {
			high: './icon/volume-high.svg',
			low: './icon/volume-low.svg',
			mute: './icon/volume-mute.svg'
		}
	},          
	clarity: {
		list: [
			{name: '标清', src: 'http://yunxianchang.live.ujne7.com/vod-system-bj/103_368b70a5d4f-c5cc-42ff-b442-004168fc86a3.mp4'},
			{name: '高清', src: 'http://yunxianchang.live.ujne7.com/vod-system-bj/103_369ed890f51-1c38-42a7-9ce2-828492660c60.mp4'},
			{name: '超清', src: 'http://yunxianchang.live.ujne7.com/vod-system-bj/103_370cc2f40bd-a39f-472a-884f-f44fcd9c5ae0.mp4'},
			{name: '原画', src: 'http://yunxianchang.live.ujne7.com/vod-system-bj/103_371ab0c0fda-143d-4755-8727-d3cd12dce02d.mp4'}
		]
	},
	screen: {
		icon: {
			small: './icon/screen-small.svg',
			full: './icon/screen-full.svg'
		}
	}
}
```
点播播放时，在sn里填入视频地址即可。

AI平台

AI应用

视频

物联网

数据上云

IoT设备

账号体系

智慧城市

电商视频解决方案

教育

全屋智能

医疗

智能制造

游戏

SDK管理

电话咨询：

服务咨询

建议反馈

产品与服务

文档与社区

关于我们

关注我们

请您联系我们

小安提醒您

1对1免费 咨询智汇云专属顾问

为您量身定制产品解决方案

1对1免费咨询智汇云专属顾问