testHls.html 1.1 KB

12345678910111213141516171819202122232425262728293031
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name=viewport content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no,minimal-ui">
  6. <meta name="referrer" content="no-referrer">
  7. <title>xgplayer</title>
  8. <style type="text/css">
  9. html, body {width:100%;height:100%;margin:auto;overflow: hidden;}
  10. </style>
  11. </head>
  12. <body>
  13. <div id="mse"></div>
  14. <script src="//cdn.jsdelivr.net/npm/xgplayer@1.1.4/browser/index.js" charset="utf-8"></script>
  15. <script src="//cdn.jsdelivr.net/npm/xgplayer-hls.js/browser/index.js" charset="utf-8"></script><script>
  16. let player = new HlsJsPlayer({
  17. "id": "mse",
  18. // "url": "http://localhost:8889/playback?cameraId=22&beginTime=2021-04-02 17:25:43&endTime=2021-04-02 17:26:08",
  19. // "url": "http://localhost:8889/playback",
  20. "url":"http://localhost:8888/hls?url=rtsp://admin:VZCDOY@192.168.2.120:554/Streaming/Channels/101",
  21. "playsinline": true,
  22. "whitelist": [
  23. ""
  24. ]
  25. });
  26. console.log(player)
  27. </script>
  28. </body>
  29. </html>