Random Video API
3 min
| Notes
Preview:
How to Use
Method 1: Create a Standalone Page
Suitable for: Creating a dedicated video playback page.
Steps:
- Create a new HTML page.
- Copy the following complete code into the page.
- Configure parameters (see instructions below).
<!DOCTYPE html>
<html lang="zh">
<head>
<!--
* Copyright (c) 2024 by xn--otsr53afot.com All Rights Reserved.
-->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Video Player</title>
<link href="https://api.xn--otsr53afot.com/videos/css/muziqingcss.css" rel="stylesheet">
<style>
body {
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: #fff;
}
</style>
</head>
<body>
<div class="video-container">
<video id="videoPlayer" muted playsinline>
<source id="videoSource" type="video/mp4">
</video>
<button class="play-button" id="playButton"></button>
<div class="volume-control">
<input id="volumeSlider" class="volume-slider" type="range" min="0" max="1" step="0.01" value="0">
</div>
<button class="next-button" id="nextButton">Next</button>
</div>
<script>
document.addEventListener('dragstart', (e) => { e.preventDefault(); });
const videoPlayer = document.getElementById('videoPlayer');
const playButton = document.getElementById('playButton');
const nextButton = document.getElementById('nextButton');
const volumeSlider = document.getElementById('volumeSlider');
const videoSource = document.getElementById('videoSource');
const apiKey = "YourKey"; // Custom API key (8-12 characters, a-z, 0-9)
const domain = "YourDomain"; // The domain name where this code is deployed
const baseUrl = "https://api.xn--otsr53afot.com/videos/open.php";
</script>
<script src="https://api.xn--otsr53afot.com/videos/js/open.js"></script>
</body>
</html>Method 2: Embed into an Existing Page
Suitable for: Embedding the video player into an existing page.
Steps:
- Copy the following code into the HTML container of your page.
- Configure parameters (see instructions below).
<link href="https://api.xn--otsr53afot.com/videos/css/muziqingcss.css" rel="stylesheet">
<!--
* Copyright (c) 2024 by xn--otsr53afot.com All Rights Reserved.
-->
<meta charset="UTF-8">
<div class="video-container">
<video id="videoPlayer" muted playsinline>
<source id="videoSource" type="video/mp4">
</video>
<button class="play-button" id="playButton"></button>
<div class="volume-control">
<input id="volumeSlider" class="volume-slider" type="range" min="0" max="1" step="0.01" value="0">
</div>
<button class="next-button" id="nextButton">Next</button>
</div>
<script>
document.addEventListener('dragstart', (e) => { e.preventDefault(); });
const videoPlayer = document.getElementById('videoPlayer');
const playButton = document.getElementById('playButton');
const nextButton = document.getElementById('nextButton');
const volumeSlider = document.getElementById('volumeSlider');
const videoSource = document.getElementById('videoSource');
const apiKey = "YourKey"; // Custom API key (8-12 characters, a-z, 0-9)
const domain = "YourDomain"; // The domain name where this code is deployed
const baseUrl = "https://api.xn--otsr53afot.com/videos/open.php";
</script>
<script src="https://api.xn--otsr53afot.com/videos/js/open.js"></script>Parameter Configuration Instructions
API Key (apiKey)
- Format Requirements: 8-12 characters, containing only letters (a-z) and numbers (0-9).
- How to Generate: Enter arbitrarily, e.g.,
myvideo123,randomkey456. - Note: If a key doesn’t work, try changing to a different one.
Domain (domain)
- Meaning: The website domain where this code is deployed.
- Format:
- Primary domain:
example.com - Subdomain:
www.example.com - Do not include the protocol (http:// or https://).
- Primary domain:
- Examples:
- If the code is deployed at
https://example.com, fill inexample.com. - If deployed at
https://www.example.com, fill inwww.example.com.
- If the code is deployed at
Important Reminders
- Domain Must Be Accurate: The API validates based on the domain. An incorrect domain will not work.
- Maintain Consistency: All pages under the same domain should use the same domain configuration.
- Testing Recommendation: Test the functionality after deployment. If there are issues, check the domain configuration.