1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980 |
- <!DOCTYPE html>
- <html lang="en" style="height: 100%;">
- <head>
- <meta charset="UTF-8">
- <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>Document</title>
- <style>
- * {
- margin: 0;
- padding: 0;
- }
- video {
- width: 100%;
- object-fit: cover;
- overflow: hidden;
- /*height: auto !important;*/
- }
- .m-tiktok-video-play-btn {
- position: absolute;
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
- z-index: 1;
- display: flex;
- align-items: center;
- justify-content: center;
- }
- </style>
- </head>
- <body>
- <video id="video" loop
- enable-progress-gesture="false"
- webkit-playsinline="true"
- object-fit="cover"
- preload="auto"
- x5-video-player-type="h5"
- x5-video-player-fullscreen="true"
- x5-playsinline
- autoplay
- playsinline="true">
- </video>
- <div id="play" class="m-tiktok-video-play-btn" style="z-index: 10;" onclick="play()">
- </div>
- </body>
- <script>
- let currentUrl = window.location.href;
- let url = new URL(currentUrl);
- let height = url.searchParams.get('height');
- let src = url.searchParams.get('src');
- let video = document.getElementById('video');
- let btn = document.getElementById('play');
- if (!height) height = 700;
- if (!src) src = "https://marry-api.mc626.cc/storage/videos/f4464efc97bedc4f6cbb9ea8ad47d762.mp4";
- btn.style.height = video.style.height = height + "px";
- video.src = src;
- if (video.paused) btn.innerHTML = `<img style=" width: 60px; height: 60px;opacity: 0.7;" src="/static/img/play.png" />`;
- function play() {
- if (video.paused) {
- video.play(); // 如果视频暂停,则播放
- btn.innerHTML = ``;
- } else {
- video.pause(); // 如果视频正在播放,则暂停
- btn.innerHTML = `<img style=" width: 60px; height: 60px;opacity: 0.7;" src="/static/img/play.png" />`;
- }
- }
- </script>
|