index.html 2.5 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273
  1. <!DOCTYPE html>
  2. <html lang="zh">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <meta name="description" content="管乐迷APP,是国内首款专为管乐在线教学打造的专业级平台,丰富、便捷的学习工具,让管乐教学与学习更轻松。">
  8. <title>管乐迷</title>
  9. <link rel="stylesheet" href="index.css">
  10. <script src="../helpers/rem-fit.min.js"></script>
  11. <script src="../helpers/qs.min.js"></script>
  12. <script>
  13. var remFit = new RemFit(375,true)
  14. remFit.init()
  15. window.addEventListener('resize', function () {
  16. remFit.init()
  17. })
  18. var parseSearch = Qs.parse(window.location.search, { ignoreQueryPrefix: true })
  19. </script>
  20. <link rel="stylesheet" href="../helpers/plyr.css">
  21. </head>
  22. <body>
  23. <div class="content">
  24. <div class="tag"></div>
  25. <div class="userinfo">
  26. <img id="avatar" crossOrigin="anonymous"/>
  27. <div class="cont">
  28. <p class="name" id="name"></p>
  29. <p class="sub" id="subjectName"></p>
  30. </div>
  31. </div>
  32. <p class="desc">
  33. 管乐迷使用云练习可太好用了!演奏越来越好了,我的演奏快来看看吧!
  34. </p>
  35. <div class="video-container">
  36. <video
  37. id="video"
  38. class="video"
  39. src=""
  40. data-poster="./icons/videobg.png"
  41. controls="false"
  42. preload="metadata"
  43. playsinline
  44. />
  45. </div>
  46. <div class="line"></div>
  47. <div class="app">
  48. <div class="app-info">
  49. <div class="app-title">管乐迷</div>
  50. <div class="app-desc">管乐学习的<span>不二选择</span></div>
  51. <div class="app-subtitle">云练习见证你的成长!</div>
  52. </div>
  53. <img src="./icons/qrcode.png"/>
  54. </div>
  55. </div>
  56. <script src="../helpers/plyr.min.js"></script>
  57. <script>
  58. new Plyr(document.querySelector('.video'), {
  59. controls: ['play-large', 'play', 'progress', 'current-time', 'airplay', 'fullscreen',],
  60. fullscreen: {
  61. enabled: true,
  62. fallback: true,
  63. iosNative: true,
  64. }
  65. })
  66. document.getElementById('avatar').src = (parseSearch.avatar || './icons/avatar.png') + '?v=' + parseInt(Math.random() * 10000000)
  67. document.getElementById('name').innerText = parseSearch.name || ''
  68. document.getElementById('subjectName').innerText = parseSearch.subjectName || ''
  69. document.getElementById('video').src = parseSearch.src
  70. </script>
  71. <!-- <script src="./index.js"></script> -->
  72. </body>
  73. </html>