player.html 2.7 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <title>Player</title>
  5. <script>
  6. if (typeof module === 'object') {window.module = module; module = undefined;}
  7. </script>
  8. <script src="js/jquery-3.2.1.min.js"></script>
  9. <script src="js/hls.js"></script>
  10. <script>
  11. const { ipcRenderer, remote } = require('electron'), LiveMe = remote.getGlobal('LiveMe');
  12. var videoid = '', userid = '';
  13. $(function(){
  14. var t=window.location.href.split('?');
  15. $('header h1').html(t[1]);
  16. document.title = t[1];
  17. LiveMe.getVideoInfo(t[1])
  18. .then(vid => {
  19. videoid = vid.vid;
  20. userid = vid.userid;
  21. var video = document.getElementById('video');
  22. var hls = new Hls();
  23. hls.loadSource(vid.hlsvideosource);
  24. hls.attachMedia(video);
  25. hls.on(Hls.Events.MANIFEST_PARSED,function() { video.play(); });
  26. });
  27. });
  28. function closeWindow() { window.close(); }
  29. function downloadVideo() { ipcRenderer.send('download-replay', { videoid: videoid }); }
  30. function showUser() { ipcRenderer.send('show-user', { userid: userid }); }
  31. </script>
  32. <link rel="stylesheet" href="css/player.css">
  33. <style>
  34. main a {
  35. position: absolute;
  36. z-index: 1000;
  37. top: 8px;
  38. display: block;
  39. width: 32px;
  40. height: 32px;
  41. line-height: 32px;
  42. font-size: 16px;
  43. text-align: center;
  44. border-radius: 16px;
  45. background-color: rgba(0,0,0,0.6);
  46. color: rgb(255,255,255);
  47. opacity: 0.1;
  48. cursor: pointer;
  49. }
  50. main a.download { right: 12px; }
  51. main a.info { right: 64px; }
  52. main a:hover { opacity: 0.9; }
  53. main a i.icon { vertical-align: middle; }
  54. </style>
  55. </head>
  56. <body>
  57. <header class="small">
  58. <h1></h1>
  59. <a class="close-button" onClick="closeWindow()">&#x2715;</a>
  60. </header>
  61. <main class="has-small-header" style="display: block; overflow: hidden;">
  62. <video id="video" controls></video>
  63. <a class="download" onClick="downloadVideo()"><i class="icon icon-download"></i></a>
  64. <a class="info" onClick="showUser()"><i class="icon icon-info"></i></a>
  65. </main>
  66. </body>
  67. </html>