index.html 2.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869
  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 id="video" class="video" src="" data-poster="./icons/videobg.png" controls="false" preload="metadata"
  37. playsinline />
  38. </div>
  39. <div class="line"></div>
  40. <div class="app">
  41. <div class="app-info">
  42. <div class="app-title">管乐迷</div>
  43. <div class="app-desc">管乐学习的<span>不二选择</span></div>
  44. <div class="app-subtitle">云练习见证你的成长!</div>
  45. </div>
  46. <img src="./icons/qrcode.png" />
  47. </div>
  48. </div>
  49. <script src="../helpers/plyr.min.js"></script>
  50. <script>
  51. new Plyr(document.querySelector('.video'), {
  52. controls: ['play-large', 'play', 'progress', 'current-time', 'airplay', 'fullscreen',],
  53. fullscreen: {
  54. enabled: true,
  55. fallback: true,
  56. iosNative: true,
  57. }
  58. })
  59. document.getElementById('avatar').src = (parseSearch.avatar || './icons/avatar.png') + '?v=' + parseInt(Math.random() * 10000000)
  60. document.getElementById('name').innerText = parseSearch.name || ''
  61. document.getElementById('subjectName').innerText = parseSearch.subjectName || ''
  62. document.getElementById('video').src = parseSearch.src
  63. </script>
  64. <!-- <script src="./index.js"></script> -->
  65. </body>
  66. </html>