video.html 2.1 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980
  1. <!DOCTYPE html>
  2. <html lang="en" style="height: 100%;">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <title>Document</title>
  8. <style>
  9. * {
  10. margin: 0;
  11. padding: 0;
  12. }
  13. video {
  14. width: 100%;
  15. object-fit: cover;
  16. overflow: hidden;
  17. /*height: auto !important;*/
  18. }
  19. .m-tiktok-video-play-btn {
  20. position: absolute;
  21. top: 0;
  22. left: 0;
  23. right: 0;
  24. bottom: 0;
  25. z-index: 1;
  26. display: flex;
  27. align-items: center;
  28. justify-content: center;
  29. }
  30. </style>
  31. </head>
  32. <body>
  33. <video id="video" loop
  34. enable-progress-gesture="false"
  35. webkit-playsinline="true"
  36. object-fit="cover"
  37. preload="auto"
  38. x5-video-player-type="h5"
  39. x5-video-player-fullscreen="true"
  40. x5-playsinline
  41. autoplay
  42. playsinline="true">
  43. </video>
  44. <div id="play" class="m-tiktok-video-play-btn" style="z-index: 10;" onclick="play()">
  45. </div>
  46. </body>
  47. <script>
  48. let currentUrl = window.location.href;
  49. let url = new URL(currentUrl);
  50. let height = url.searchParams.get('height');
  51. let src = url.searchParams.get('src');
  52. let video = document.getElementById('video');
  53. let btn = document.getElementById('play');
  54. if (!height) height = 700;
  55. if (!src) src = "https://marry-api.mc626.cc/storage/videos/f4464efc97bedc4f6cbb9ea8ad47d762.mp4";
  56. btn.style.height = video.style.height = height + "px";
  57. video.src = src;
  58. if (video.paused) btn.innerHTML = `<img style=" width: 60px; height: 60px;opacity: 0.7;" src="/static/img/play.png" />`;
  59. function play() {
  60. if (video.paused) {
  61. video.play(); // 如果视频暂停,则播放
  62. btn.innerHTML = ``;
  63. } else {
  64. video.pause(); // 如果视频正在播放,则暂停
  65. btn.innerHTML = `<img style=" width: 60px; height: 60px;opacity: 0.7;" src="/static/img/play.png" />`;
  66. }
  67. }
  68. </script>