video.html 1.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960
  1. <!--
  2. * @Author: colpu ycg520520@qq.com
  3. * @Date: 2024-07-30 23:29:57
  4. * @LastEditors: colpu ycg520520@qq.com
  5. * @LastEditTime: 2024-07-30 23:34:56
  6. * @FilePath: /xj_project_app_2024_2_18/hybrid/html/video.html
  7. * @Description:
  8. -->
  9. <!DOCTYPE html>
  10. <html lang="en">
  11. <head>
  12. <meta charset="UTF-8">
  13. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  14. <title>Document</title>
  15. <script src="./js/dist/hls.min.js"></script>
  16. <style>
  17. *,
  18. html,
  19. body {
  20. margin: 0;
  21. padding: 0;
  22. }
  23. </style>
  24. </head>
  25. <body>
  26. <video id="video" style="width:100%; height: calc(100% * 0.5625)" controls autoplay></video>
  27. </body>
  28. <script>
  29. const parseQuery = (search) => {
  30. let ret = {};
  31. let regParam = /\?([^&=]+)=([\w\W]*?)(&|$|#)/g;
  32. if (search) {
  33. let result;
  34. while ((result = regParam.exec(search)) != null) {
  35. ret[result[1]] = result[2];
  36. }
  37. }
  38. return ret;
  39. };
  40. const params = parseQuery(document.location.search);
  41. const video = document.getElementById('video');
  42. document.title = params.title;
  43. if (Hls.isSupported()) {
  44. const hls = new Hls();
  45. hls.loadSource(params.src);
  46. hls.attachMedia(video);
  47. hls.on(Hls.Events.MANIFEST_PARSED, () => {
  48. video.play();
  49. });
  50. } else if (video.canPlayType("application/vnd.apple.mpegURL")) {
  51. video.src = params.src;
  52. video.addEventListener("loadedmetadata", () => {
  53. video.play();
  54. });
  55. }
  56. </script>
  57. </html>