video.html 3.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100
  1. <html>
  2. <head>
  3. <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
  4. <title>video</title>
  5. <style>
  6. body {
  7. margin: 0px;
  8. }
  9. .mainContainer {
  10. display: block;
  11. margin-left: auto;
  12. margin-right: auto;
  13. }
  14. .centeredVideo {
  15. display: block;
  16. width: 100%;
  17. height: 100%;
  18. object-fit: cover;
  19. object-position: left;
  20. }
  21. .controls {
  22. display: block;
  23. width: 100%;
  24. text-align: left;
  25. margin-left: auto;
  26. margin-right: auto;
  27. }
  28. </style>
  29. </head>
  30. <body>
  31. <div id="mainContainer" class="mainContainer">
  32. <video name="videoElement" class="centeredVideo" width="1024" height="576">
  33. Your browser is too old which doesn't support HTML5 video.
  34. </video>
  35. <br>
  36. </div>
  37. <script src="scripts/flv.min.js"></script>
  38. <script src="scripts/jquery-3.3.1.min.js"></script>
  39. <script>
  40. function getParameterByName(name, url) {
  41. if (!url) {
  42. url = window.location.href;
  43. }
  44. name = name.replace(/[\[\]]/g, "\\$&");
  45. var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
  46. results = regex.exec(url);
  47. if (!results) return null;
  48. if (!results[2]) return '';
  49. return decodeURIComponent(results[2].replace(/\+/g, " "));
  50. }
  51. $("#mainContainer").css("width", getParameterByName("width"));
  52. $("#mainContainer").css("height", getParameterByName("height"));
  53. var url = "../api/live.flv";
  54. var flvPlayer;
  55. document.addEventListener('DOMContentLoaded', function () {
  56. try {
  57. //flv_load();
  58. var videoElement = document.getElementsByName('videoElement')[0];
  59. flvPlayer = flvjs.createPlayer({
  60. type: 'flv',
  61. url: url,
  62. isLive: true,
  63. withCredentials: true
  64. }, { isLive: true, enableStashBuffer: false });
  65. flvPlayer.attachMediaElement(videoElement);
  66. flvPlayer.load();
  67. function f() {
  68. try {
  69. // flvPlayer.play();
  70. var playPromise = videoElement.play();
  71. if (playPromise !== undefined) {
  72. playPromise.then(_ => {
  73. console.log("play successfully");
  74. }).catch(error => {
  75. // console.log(error);
  76. setTimeout(f, 10)
  77. });
  78. } else {
  79. // console.log('undefined');
  80. setTimeout(f, 10)
  81. }
  82. } catch (e) { console.log(e); }
  83. }
  84. videoElement.addEventListener('canplay', function (e) { setTimeout(f, 0); });
  85. flvPlayer.on("error", function () {
  86. window.location.reload();
  87. });
  88. } catch (e) {
  89. console.log(e);
  90. }
  91. });
  92. </script>
  93. </body>
  94. </html>