player.html 2.7 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485
  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() {
  26. video.play();
  27. });
  28. });
  29. });
  30. function closeWindow() { window.close(); }
  31. function downloadVideo() { ipcRenderer.send('download-replay', { videoid: videoid }); }
  32. function showUser() { ipcRenderer.send('show-user', { userid: userid }); }
  33. </script>
  34. <link rel="stylesheet" href="css/player.css">
  35. <style>
  36. main a {
  37. position: absolute;
  38. z-index: 1000;
  39. top: 8px;
  40. display: block;
  41. width: 32px;
  42. height: 32px;
  43. line-height: 32px;
  44. font-size: 16px;
  45. text-align: center;
  46. border-radius: 16px;
  47. background-color: rgba(0,0,0,0.6);
  48. color: rgb(255,255,255);
  49. opacity: 0.1;
  50. cursor: pointer;
  51. }
  52. main a.download { right: 12px; }
  53. main a.info { right: 64px; }
  54. main a:hover { opacity: 0.9; }
  55. main a i.icon { vertical-align: middle; }
  56. </style>
  57. </head>
  58. <body>
  59. <header class="small">
  60. <h1></h1>
  61. <a class="close-button" onClick="closeWindow()">&#x2715;</a>
  62. </header>
  63. <main class="has-small-header" style="display: block; overflow: hidden;">
  64. <video id="video" controls></video>
  65. <a class="download" onClick="downloadVideo()"><i class="icon icon-download"></i></a>
  66. <a class=" info" onClick="showUser()"><i class="icon icon-info"></i></a>
  67. </main>
  68. </body>
  69. </html>