|
1 | | -# UIKit Javascript 使用说明 |
2 | | - |
3 | | -### 简介 |
| 1 | +# UIKit JavaScript使用文档 |
| 2 | +- [简介](#intro) |
| 3 | +- [获取UIKit JavaScript](#get) |
| 4 | +- [直播](#live) |
| 5 | +- [预览、回放](#back) |
| 6 | +- [播放地址获取及EZOPEN协议说明](#ezopen) |
| 7 | + |
| 8 | +## <a name="intro"> 一、简介</a> |
4 | 9 | UIKit，是基于萤石开放平台OpenSDK封装的UI组件，使用过程中不必学习专业的业务概念，更不用调用繁琐的接口，能够以极简的嵌入方式，快速在您的应用中集成视频功能。 |
5 | 10 |
|
6 | | -萤石开放平台官网 https://open.ys7.com |
7 | | - |
8 | | - |
9 | | -### 浏览器支持 |
10 | | - |
11 | | -- chrome |
12 | | -- ie9+ |
13 | | -- 国产浏览器请使用急速模式(webkit内核) |
14 | | - |
15 | | -- Android 4.4+ |
16 | | -- Safari for iOS 9.3+ |
17 | | - |
18 | | - |
19 | | -### 使用说明 |
20 | | -页面引入js |
21 | | - |
22 | | -```js |
23 | | -<script src="https://{{path}}/ezuikit.js"></script> |
24 | | -``` |
25 | | -页面创建一个video标签 [若设置autoplay属性则默认自动播放] |
26 | | -```html |
27 | | -<video id="myPlayer" poster="[这里可以填入封面图片URL]" controls playsInline webkit-playsinline [autoplay]> |
28 | | - <source src="[这里填入从开放平台官网获取到的RTMP协议URL]" type="" /> |
29 | | - <source src="[这里填入从开放平台官网获取到的HLS协议URL]" type="application/x-mpegURL" /> |
30 | | -</video> |
31 | | -``` |
32 | | -**注意：若要支持手机播放必须填入HLS协议地址** |
33 | | - |
34 | | -初始化 |
35 | | -```js |
36 | | -<script> |
37 | | -var player = new EZUIPlayer('myPlayer'); |
38 | | -</script> |
39 | | -``` |
40 | | - |
41 | | - |
42 | | -### 完整示例 |
43 | | - |
44 | | -```html |
45 | | -<!DOCTYPE html> |
46 | | -<html lang="zh-CN"> |
47 | | -<head> |
48 | | - <meta charset="UTF-8"> |
49 | | - <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" > |
50 | | - <meta name="renderer" content="webkit"> |
51 | | - <title>测试页面</title> |
52 | | - <style> |
53 | | - body{margin:0;text-align: center;} |
54 | | - video{max-width: 1200px;width: 100%;} |
55 | | - </style> |
56 | | -</head> |
57 | | -<script> |
58 | | -</script> |
59 | | -<body> |
60 | | -<script src="https://open.ys7.com/sdk/js/1.4/ezuikit.js"></script> |
61 | | - |
62 | | -<video id="myPlayer" poster="" controls playsInline webkit-playsinline autoplay> |
63 | | - <source src="rtmp://rtmp.open.ys7.com/openlive/f01018a141094b7fa138b9d0b856507b" type="" /> |
64 | | - <source src="http://hls.open.ys7.com/openlive/f01018a141094b7fa138b9d0b856507b.m3u8" type="application/x-mpegURL" /> |
65 | | - |
66 | | -</video> |
67 | | - |
68 | | -<script> |
| 11 | +UIKit JavaScript是用于WEB端，移动H5端的JavaScript插件，使用UIKit JavaScript，您可以： |
| 12 | +- 轻松实现视频直播功能，包含HLS，RTMP，FLV，WS格式流媒体实时播放。 |
| 13 | +- 轻松实现Web端预览，回放功能。 |
| 14 | +## <a name="get">二、获取UIKit JavaScript</a> |
| 15 | +### 1.下载 |
| 16 | +最新版 |
| 17 | + |
| 18 | +`git clone https://github.com/Hikvision-Ezviz/EZUIKit-JavaScript.git` |
| 19 | + |
| 20 | +旧版本下载 |
| 21 | + |
| 22 | +> 请前往开放平台官网下载 |
| 23 | +
|
| 24 | + |
| 25 | +### 2.引入 |
| 26 | + **本地引入** |
| 27 | + |
| 28 | + `<script src="{{location path}}/ezuikit.js">/ezuikit.js</script>` |
| 29 | + |
| 30 | + **页面引入** |
| 31 | + |
| 32 | + `<script src="https://open.ys7.com/sdk/js/1.4/ezuikit.js"></script>` |
| 33 | + |
| 34 | + >*ps : 页面引入方式适用直播场景，预览和回放功能实现原理为本地解码，需要本地引入的方式加载本地解码库* |
| 35 | +## <a name="live" >三、直播</a> |
| 36 | + 1.页面创建video标签 |
| 37 | + |
| 38 | + ``` |
| 39 | + <video |
| 40 | + id="myplayer" |
| 41 | + src="ezopen://open.ys7.com/f01018a141094b7fa138b9d0b856507b.live" |
| 42 | + width="400" |
| 43 | + height="300" |
| 44 | + poster="[这里可以填入封面图片URL]" |
| 45 | + [autoplay] |
| 46 | + controls |
| 47 | + playsInline |
| 48 | + webkit-playsinline |
| 49 | + > |
| 50 | + </video> |
| 51 | + ``` |
| 52 | + **配置说明：** |
| 53 | + |
| 54 | + 属性名|示例|默认值|说明 |
| 55 | + ---|:--:|---|---: |
| 56 | + id| myPlayer| null|*必填，video标签id |
| 57 | + src | ezopen://open.ys7.com/f01018a141094b7fa138b9d0b856507b.live |null| 直播地址<br>支持ezopen协议格式（推荐）<br>支持HLS，RTMP，FLV，m3u8等任意格式直播地址 |
| 58 | + autoplay|true|false|是否自动播放 |
| 59 | + poster|图片url|null|封面图片地址| |
| 60 | + width|400|null|视频元素宽度 |
| 61 | + height|400|null|视频元素高度 |
| 62 | + |
| 63 | + |
| 64 | + 2.初始化 |
| 65 | + ``` |
| 66 | + <script> |
69 | 67 | var player = new EZUIPlayer('myPlayer'); |
70 | | - player.on('error', function(){ |
71 | | - console.log('error'); |
72 | | - }); |
73 | | - player.on('play', function(){ |
74 | | - console.log('play'); |
75 | | - }); |
76 | | - player.on('pause', function(){ |
77 | | - console.log('pause'); |
78 | | - }); |
79 | | -
|
80 | | -</script> |
81 | | -</body> |
82 | | -</html> |
83 | | -``` |
84 | | - |
85 | | -完整示例地址 [https://open.ys7.com/sdk/js/1.4/demo.html](https://open.ys7.com/sdk/js/1.4/demo.html) |
86 | | - |
87 | | -可使用手机扫码查看效果: |
88 | | - |
89 | | - |
90 | | - |
91 | | - |
92 | | -## 方法与事件回调 |
93 | | -### 播放 |
94 | | -``` |
95 | | -player.play(); |
96 | | -``` |
97 | | -### 停止 |
98 | | -``` |
99 | | -player.stop(); |
100 | | -``` |
101 | | -### 暂停 |
102 | | -``` |
103 | | -player.pause(); |
104 | | -``` |
105 | | -### 注册事件 |
106 | | -``` |
107 | | -// 注册错误事件回调 |
108 | | -player.on('error', function(){ |
109 | | - console.log('error'); |
110 | | -}); |
111 | | -// 注册播放事件回调 |
112 | | -player.on('play', function(){ |
113 | | - console.log('play'); |
114 | | -}); |
115 | | -// 注册暂停事件回调 |
116 | | -player.on('pause', function(){ |
117 | | - console.log('pause'); |
118 | | -}); |
119 | | -// 注册停止事件回调 |
120 | | -player.on('stop', function(){ |
121 | | - console.log('stop'); |
122 | | -}); |
123 | | -``` |
| 68 | + </script> |
| 69 | + ``` |
| 70 | + 3.方法集 |
| 71 | + - 直播播放 |
| 72 | + |
| 73 | + `player.play()` |
| 74 | + - 直播停止 |
| 75 | + |
| 76 | + `player.stop()` |
| 77 | + |
| 78 | +## <a name="back">四、预览，回放</a> |
| 79 | + 1.页面创建div标签 |
| 80 | + ``` |
| 81 | + <div id="playWind"></div> |
| 82 | +
|
| 83 | + ``` |
| 84 | + 2.初始化 |
| 85 | + ``` |
| 86 | + var player = new EZUIPlayer({ |
| 87 | + id: 'myPlayer', |
| 88 | + url: url, |
| 89 | + accessToken: "at.8o2k6dbpcvtr13reaa96hbnya6fee2wf-9gu6zcjmh2-1j4yrsb-imvlc5poc", |
| 90 | + decoderPath: '{{location path}}', |
| 91 | + width: 300, |
| 92 | + height: 200, |
| 93 | + }); |
| 94 | + ``` |
| 95 | + |
| 96 | + **配置说明：** |
| 97 | + |
| 98 | + 属性名|示例|默认值|说明 |
| 99 | + ---|:--:|---|---: |
| 100 | + id| myPlayer| null|*必填，元素标签id |
| 101 | + url | ezopen://open.ys7.com/f01018a141094b7fa138b9d0b856507b.live |null| 直播地址<br>支持ezopen协议格式（推荐）<br>支持ws, wss格式预览地址播放 |
| 102 | + accessToken|"at.8o2k6dbpcvtr13reaa96hbnya6fee2wf-9gu6zcjmh2-1j4yrsb-imvlc5poc"|null|用户通过官网或者接口获取的accessToken |
| 103 | + decoderPath|解码器相对路径|null|*必填，预览需要本地加载解码器，请填写ezuikit所在相对路径| |
| 104 | + width|400|null|视频元素宽度 |
| 105 | + height|400|null|视频元素高度 |
| 106 | + autoplay|true|false|是否自动播放 |
| 107 | + |
| 108 | + |
| 109 | + 3.方法集 |
| 110 | + - 预览，回放开始播放 |
| 111 | + |
| 112 | + `player.play()` |
| 113 | + - 预览，回放停止 |
| 114 | + |
| 115 | + `player.stop()` |
| 116 | +## 五、<a name="ezopen">播放地址获取及EZOPEN协议说明</a> |
| 117 | + |
| 118 | + 你可以通过开放平台官网获取各种格式视频直播地址，包含HLS格式，RTMP格式，WS格式，FLV格式等，EZUIKit支持所有格式直播视频播放。你可以将以上格式直播地址配置在UIKIT中直接播放，但需要注意，并非所有浏览器支持任意格式直播地址，为方便开发者使用，开放平台通过EZOPEN协议可以通过你终端类型帮助你轻松适配最优播放地址格式： |
| 119 | + EZOPEN协议格式为 ： |
| 120 | + |
| 121 | + 【直播】 ezopen://open.ys7.com/[uuid][.hd].live |
| 122 | + >*示例：ezopen://open.ys7.com/f01018a141094b7fa138b9d0b856507b.hd.live* |
| 123 | + |
| 124 | + 【预览】 ezopen://open.ys7.com/[uuid][.hd].live |
| 125 | + >*示例：ezopen://open.ys7.com/f01018a141094b7fa138b9d0b856507b.hd.live* |
| 126 | + |
| 127 | + 【回放】 ezopen://open.ys7.com/[uuid][.hd].rec?begin={{yyyyMMdd}}T{{hhssmm}}Z&end={{yyyyMMdd}}T{{hhssmm}}Z |
| 128 | + >*示例：ezopen://open.ys7.com/f01018a141094b7fa138b9d0b856507b.hd.rec?begin=20180808T000000Z&begin=20180808T235959Z* |
| 129 | +
|
| 130 | + > *将播放2018年8月8日0点0分0秒至2018年8月8日23点59分59秒回放* |
| 131 | +
|
0 commit comments