multi-demo.html 8.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
  6. <title>Document</title>
  7. <script src="./ezuikit.js"></script>
  8. </head>
  9. <body>
  10. <div className="demo">
  11. <h2>多个视频窗口模式使用示例:</h2>
  12. <div style="display: inline-block;vertical-align: top;width: 40%;">
  13. <h3>窗口1:</h3>
  14. <div id="video-container" style="width:400px;">
  15. </div>
  16. <div>
  17. <button onClick="play()">play</button>
  18. <button onClick="stop()">stop</button>
  19. <button onClick="getOSDTime()">getOSDTime</button>
  20. <button onClick="capturePicture()">capturePicture</button>
  21. <button onClick="openSound()">openSound</button>
  22. <button onClick="closeSound()">closeSound</button>
  23. <button onClick="startSave()">startSave</button>
  24. <button onClick="stopSave()">stopSave</button>
  25. </div>
  26. </div>
  27. <div style="display: inline-block;vertical-align: top;width: 40%;">
  28. <h3>窗口2:</h3>
  29. <div id="video-container2" style="width:400px;">
  30. </div>
  31. <div>
  32. <button onClick="play2()">play</button>
  33. <button onClick="stop2()">stop</button>
  34. <button onClick="getOSDTime2()">getOSDTime2</button>
  35. <button onClick="capturePicture2()">capturePicture</button>
  36. <button onClick="openSound2()">openSound</button>
  37. <button onClick="closeSound2()">closeSound</button>
  38. <button onClick="startSave2()">startSave</button>
  39. <button onClick="stopSave2()">stopSave</button>
  40. </div>
  41. </div>
  42. </div>
  43. <script>
  44. var playr1 = new EZUIKit.EZUIKitPlayer({
  45. id: 'video-container', // 视频容器ID
  46. accessToken: 'xx.16xf4zx0598fciw0delqzohqxxz6u8ei-1vxaom5kzu-1lz6z9x-uboj6tj3a',
  47. url: 'ezopen://open.ys7.com/xxx/1.live',
  48. template: 'simple', // simple - 极简版;standard-标准版;security - 安防版(预览回放);voice-语音版;
  49. autoplay: true,
  50. // 视频上方头部控件
  51. header: ['capturePicture', 'save', 'zoom'], // 如果templete参数不为simple,该字段将被覆盖
  52. // 视频下方底部控件
  53. footer: ['talk', 'broadcast', 'hd', 'fullScreen'], // 如果template参数不为simple,该字段将被覆盖
  54. // audio: 1, // 是否默认开启声音 0 - 关闭 1 - 开启
  55. // plugin: ['talk'], // 加载插件,talk-对讲
  56. // controls: true, //['play','voice','hd','fullScreen'], // 视频控制相关控件,如果template参数不为simple,该字段将被覆盖
  57. openSoundCallBack: (data) => console.log("开启声音回调", data),
  58. closeSoundCallBack: (data) => console.log("关闭声音回调", data),
  59. startSaveCallBack: (data) => console.log("开始录像回调", data),
  60. stopSaveCallBack: (data) => console.log("录像回调", data),
  61. capturePictureCallBack: (data) => console.log("截图成功回调", data),
  62. fullScreenCallBack: (data) => console.log("全屏回调", data),
  63. getOSDTimeCallBack: (data) => console.log("获取OSDTime回调", data),
  64. handleSuccess: (data) = function () { console.log("播放成功回调", data) },
  65. handleError: (data) => console.log("播放失败回调", data),
  66. handleTalkSuccess: () => console.log("对讲成功回掉"),
  67. handleTalkError: (data) = function () { console.log("对讲失败", data) },
  68. width: 400,
  69. height: 300,
  70. });
  71. function play() {
  72. var playPromise = playr.play();
  73. playPromise.then((data) => {
  74. console.log("promise 获取 数据", data)
  75. })
  76. }
  77. function stop() {
  78. var stopPromise = playr.stop();
  79. stopPromise.then((data) => {
  80. console.log("promise 获取 数据", data)
  81. })
  82. }
  83. function getOSDTime() {
  84. var getOSDTimePromise = playr.getOSDTime();
  85. getOSDTimePromise.then((data) => {
  86. console.log("promise 获取 数据", data)
  87. })
  88. }
  89. function getOSDTime2() {
  90. var getOSDTimePromise = playr2.getOSDTime();
  91. getOSDTimePromise.then((data) => {
  92. console.log("promise 获取 数据", data)
  93. })
  94. }
  95. function capturePicture() {
  96. var capturePicturePromise = playr.capturePicture();
  97. capturePicturePromise.then((data) => {
  98. console.log("promise 获取 数据", data)
  99. })
  100. }
  101. function openSound() {
  102. var openSoundPromise = playr.openSound();
  103. openSoundPromise.then((data) => {
  104. console.log("promise 获取 数据", data)
  105. })
  106. }
  107. function closeSound() {
  108. var closeSoundPromise = playr.closeSound();
  109. closeSoundPromise.then((data) => {
  110. console.log("promise 获取 数据", data)
  111. })
  112. }
  113. function startSave() {
  114. var startSavePromise = playr.startSave();
  115. startSavePromise.then((data) => {
  116. console.log("promise 获取 数据", data)
  117. })
  118. }
  119. function stopSave() {
  120. var stopSavePromise = playr.stopSave();
  121. stopSavePromise.then((data) => {
  122. console.log("promise 获取 数据", data)
  123. })
  124. }
  125. </script>
  126. <script>
  127. var playr2 = new EZUIKit.EZUIKitPlayer({
  128. id: 'video-container2', // 视频容器ID
  129. accessToken: 'xx.16xf4zx0598fciw0delqzohqxxz6u8ei-1vxaom5kzu-1lz6z9x-uboj6tj3aa',
  130. url: 'ezopen://open.ys7.com/xxx/1.live',
  131. template: 'simple', // simple - 极简版;standard-标准版;security - 安防版(预览回放);voice-语音版;
  132. autoplay: true,
  133. // 视频上方头部控件
  134. header: ['capturePicture', 'save', 'zoom'], // 如果templete参数不为simple,该字段将被覆盖
  135. // 视频下方底部控件
  136. footer: ['talk', 'broadcast', 'hd', 'fullScreen'], // 如果template参数不为simple,该字段将被覆盖
  137. // audio: 1, // 是否默认开启声音 0 - 关闭 1 - 开启
  138. // plugin: ['talk'], // 加载插件,talk-对讲
  139. // controls: true, //['play','voice','hd','fullScreen'], // 视频控制相关控件,如果template参数不为simple,该字段将被覆盖
  140. openSoundCallBack: (data) => console.log("开启声音回调", data),
  141. closeSoundCallBack: (data) => console.log("关闭声音回调", data),
  142. startSaveCallBack: (data) => console.log("开始录像回调", data),
  143. stopSaveCallBack: (data) => console.log("录像回调", data),
  144. capturePictureCallBack: (data) => console.log("截图成功回调", data),
  145. fullScreenCallBack: (data) => console.log("全屏回调", data),
  146. getOSDTimeCallBack: (data) => console.log("获取OSDTime回调", data),
  147. handleSuccess: (data) = function () { console.log("播放成功回调", data) },
  148. handleError: (data) => console.log("播放失败回调", data),
  149. handleTalkSuccess: () => console.log("对讲成功回掉"),
  150. handleTalkError: (data) = function () { console.log("对讲失败", data) },
  151. width: 400,
  152. height: 300,
  153. });
  154. function play2() {
  155. var playPromise = playr2.play();
  156. playPromise.then((data) => {
  157. console.log("promise 获取 数据", data)
  158. })
  159. }
  160. function stop2() {
  161. var stopPromise = playr2.stop();
  162. stopPromise.then((data) => {
  163. console.log("promise 获取 数据", data)
  164. })
  165. }
  166. function getOSDTime2() {
  167. var getOSDTimePromise = playr2.getOSDTime();
  168. getOSDTimePromise.then((data) => {
  169. console.log("promise 获取 数据", data)
  170. })
  171. }
  172. function getOSDTime2() {
  173. var getOSDTimePromise = playr2.getOSDTime();
  174. getOSDTimePromise.then((data) => {
  175. console.log("promise 获取 数据", data)
  176. })
  177. }
  178. function capturePicture2() {
  179. var capturePicturePromise = playr2.capturePicture();
  180. capturePicturePromise.then((data) => {
  181. console.log("promise 获取 数据", data)
  182. })
  183. }
  184. function openSound2() {
  185. var openSoundPromise = playr2.openSound();
  186. openSoundPromise.then((data) => {
  187. console.log("promise 获取 数据", data)
  188. })
  189. }
  190. function closeSound2() {
  191. var closeSoundPromise = playr2.closeSound();
  192. closeSoundPromise.then((data) => {
  193. console.log("promise 获取 数据", data)
  194. })
  195. }
  196. function startSave2() {
  197. var startSavePromise = playr2.startSave();
  198. startSavePromise.then((data) => {
  199. console.log("promise 获取 数据", data)
  200. })
  201. }
  202. function stopSave2() {
  203. var stopSavePromise = playr2.stopSave();
  204. stopSavePromise.then((data) => {
  205. console.log("promise 获取 数据", data)
  206. })
  207. }
  208. </script>
  209. </body>
  210. </html>