video.html 2.8 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8" />
  5. <title>视频预览</title>
  6. <link href="./css/video.css" rel="stylesheet">
  7. <script src="./js/video.js"></script>
  8. <script src="./js/videojs-live.js"></script>
  9. <style>
  10. html,body{height:100%}
  11. * { box-sizing: initial }
  12. </style>
  13. </head>
  14. <body style="margin: 0;" onload="init()">
  15. <div id="video" class="video-coverInfo-template" style="width:100%;height:100%;">
  16. <!-- <video id="my_video_1" autoplay="autoplay" loop="loop" muted="muted" class="video-js vjs-default-skin"
  17. controls preload="auto" width="320" height="240" data-setup='{}'>
  18. <source src="http://183.230.61.217:8093/hls/sbltbz.m3u8" type="application/x-mpegURL">
  19. </video> -->
  20. </div>
  21. <!-- <script src="./js/jQ.js"></script> -->
  22. <script type="text/javascript">
  23. // $(function () {
  24. // //初始化IP地址、端口、用户名、密码、宽度高度
  25. // var _url = queryString("url");
  26. // var _iWidth = queryString("width") || "800";
  27. // var _iHeight = queryString("height") || "600";
  28. // document.getElementById('video').innerHTML =
  29. // '<video id="my_video_1" autoplay="autoplay" loop="loop" muted="muted" class="video-js vjs-default-skin" controls preload="auto"' +
  30. // ' style="width:100%;height:100%" data-setup="{}"><source src="' + _url + '" type="application/x-mpegURL"></video>'
  31. // });
  32. // function queryString(val) {
  33. // var uri = window.location.search;
  34. // var re = new RegExp("" + val + "\=([^\&\?]*)", "ig");
  35. // return ((uri.match(re)) ? decodeURIComponent((uri.match(re)[0].substr(val.length + 1))) : null);
  36. // }
  37. function init() {
  38. var url = window.location.search.substring(1);
  39. var vars = {}
  40. url.split("&").map((e) => {
  41. var att = e.split("=")
  42. vars[att[0]] = att[1]
  43. })
  44. url = vars['url']
  45. if(url != '')
  46. document.getElementById('video').innerHTML =
  47. '<video id="my_video_1" autoplay="autoplay" loop="loop" muted="muted" class="video-js vjs-default-skin" controls preload="auto"' +
  48. ' style="width:100%;height:100%" data-setup="{}"><source src="' + vars['url'] + '" type="application/x-mpegURL"></video>'
  49. else
  50. document.getElementById('video').innerHTML =
  51. '<img src="./image/nullVideo.png" style="position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);"/>' //'<div style="background:url(./image/nullVideo.png);background-size:100% 100%;width:100%;height:100%;"></div>'
  52. }
  53. </script>
  54. </body>
  55. </html>