index.html 1.8 KB

1234567891011121314151617181920212223242526272829303132333435363738394041
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <title>Document</title>
  8. <link rel="stylesheet" href="./static/WSPlayer/player.css">
  9. <script src="./static/WSPlayer/PlayerControl.js"></script>
  10. <link rel="stylesheet" href="./static/zTreeStyle/zTreeStyle.css">
  11. <!-- <script src="./static/WSPlayer/PlayerControl.js"></script> -->
  12. <script src="./static/jquery-3.6.0.min.js"></script>
  13. <script src="./static/jquery.ztree.all.js"></script>
  14. <script src="./static/datepicker.js"></script>
  15. </head>
  16. <body style="margin: 0; width: 100%; height: 100%">
  17. <div id="ws-record-player" style="width: 100%; height: 600px;"></div>
  18. <script type="module">
  19. import WsPlayer from './js/WsPlayer/WsPlayer.js';
  20. var recordPlayer = new WsPlayer({
  21. el: 'ws-record-player', // 必传
  22. type: 'record', // real | record
  23. serverIp: '36.26.62.70',
  24. num: 1,
  25. showControl: true,
  26. })
  27. let url = location.href;
  28. console.log(url)
  29. let rtsps = url.split('?')[1];
  30. let token = url.split('?')[2];
  31. let rtsp = rtsps + '?' + token;
  32. console.log(rtsp)
  33. recordPlayer.playRecord({
  34. rtspURL: rtsp, // String | Array[String] 可以传入多个rtsp地址,将会按照顺序在播放器中播放,最多播放四个
  35. decodeMode: 'canvas', // 解码方式, video|canvas 可以不传,自动识别,h264使用video播放,265使用canvas播放
  36. // wsURL: '' // 选择传递,默认播放器是连接服务器对应的websocket,但是也可以指定连接websocket地址
  37. })
  38. console.log(recordPlayer);
  39. </script>
  40. </body>
  41. </html>