Random Video API

3 min

Preview:

How to Use

Method 1: Create a Standalone Page

Suitable for: Creating a dedicated video playback page.

Steps:

  1. Create a new HTML page.
  2. Copy the following complete code into the page.
  3. 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:

  1. Copy the following code into the HTML container of your page.
  2. 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://).
  • Examples:
    • If the code is deployed at https://example.com, fill in example.com.
    • If deployed at https://www.example.com, fill in www.example.com.

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.