HTML+CSS+JavaScript实战（一个简易的视频播放器）

代码对我眨眼睛

已于 2023-11-17 19:15:23 修改

阅读量393

点赞数 5

分类专栏： # JavaScript # html 文章标签：前端经验分享学习

于 2023-11-15 08:06:45 首次发布

本文链接：https://blog.csdn.net/m0_73756108/article/details/134410071

版权

html 同时被 2 个专栏收录

16 篇文章 1 订阅

订阅专栏

JavaScript

11 篇文章 0 订阅

订阅专栏

效果如下：（左下角是js引入的看板娘）

在这里插入图片描述

思路很常规，无需注释即可看懂（其实是懒得敲 bushi）
没有注释也能跑，so直接上源码~

感谢 夏柔站长 提供的免费API

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>视频播放器</title>
</head>
<body>
    <div class="container">
        <h1>在线视频播放器</h1>
        <div id="video-container">
            <video id="videoPlayer" controls width="1000" height="600" autoplay></video>
        </div>
        <button id ='check_bt_1'onclick="loadVideo_1()">搞笑视频</button>
        <button id ='check_bt_2'onclick="loadVideo_2()">甜妹视频</button>
        <button id ='check_bt_3'onclick="loadVideo_3()">纯情女高</button>
        <button id ='check_bt_4'onclick="loadVideo_4()">清纯美女</button>
        <button id ='check_bt_5'onclick="loadVideo_5()">穿搭视频</button>
        <button id ='check_bt_6'onclick="loadVideo_6()">随机视频</button>
    </div>
    <script src="https://apii.ctose.cn/live2d/Source-One/default/autoload.js"></script>
    <script src="scripts.js"></script>
</body>
</html>

styles.css

body {
    font-family: Arial, sans-serif;
    background-color: #193761;
    margin: 0;
    padding: 0;
}

.container {
    /* max-width: 800px; */
    margin: 50px auto;
    text-align: center;
    background-color: #9cdcfe;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(254, 93, 127, 1);
}

h1 {
    color: #333;
    font-family: "Chalkduster", cursive;
    font-size: 40px;
}


#videoPlayer {
    display: block;
    margin-left: auto;
    margin-right: auto;
    /* border: 2px solid #f8d714; */
    border-radius: 10px;
    box-shadow: 0 2px 4px rgba(245, 7, 58, 0.8);
    outline: none;
    max-width: 100%;
}

#video-container {
    margin-top: 20px;
}

#check_bt_1 {
    left: -164px;
}

#check_bt_2 {
    left: -99px;
}

#check_bt_3 {
    left: -34px;
}

#check_bt_4 {
    left: 31px;
}

#check_bt_5 {
    left: 96px;
}

#check_bt_6 {
    left: 161px;
}

button {
    padding: 10px 20px;
    font-size: 16px;
    background-color: #2bc3d1;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    outline: none;
    margin-top: 20px;
    position: relative;
}

button:hover {
    background-color: #ffcd43;
}

@media screen and (max-width: 480px) {
    .container {
        margin: 20px auto;
        padding: 10px;
    }

    h1 {
        font-size: 26px;
    }

    #videoPlayer {
        max-width: 100%;
    }

    #check_bt_1,
    #check_bt_2,
    #check_bt_3,
    #check_bt_4,
    #check_bt_5,
    #check_bt_6 {
        left: auto;
    }
}

scripts.js

function loadVideo_1() {
    
    const button = document.getElementById('check_bt_1');
    button.innerHTML = '加载中'; // 更改按钮内容为"正在加载中"
    const apiUrl = 'https://v.api.aa1.cn/api/api-video-gaoxiao/index.php?aa1=json';
    fetch(apiUrl)
        .then(response => response.json())
        .then(data => {
            const videoUrl = data.mp4;

            const videoElement = document.getElementById('videoPlayer');
            videoElement.src = videoUrl;
            videoElement.autoplay = true;
            const videoContainer = document.getElementById('video-container');
            videoContainer.innerHTML = ''; // 清空容器
            videoContainer.appendChild(videoElement);
            button.innerHTML = '搞笑视频';
        })
        .catch(error => {
            button.innerHTML = '加载失败';
            console.error('Error loading video:', error);
        });
       
}

function loadVideo_2() {
    const button = document.getElementById('check_bt_2');
    button.innerHTML = '加载中'; // 更改按钮内容为"正在加载中"
    const videoUrl = "https://api.8uid.cn/tm.php?type=video";
    const videoElement = document.getElementById('videoPlayer');
    videoElement.src = videoUrl;
    videoElement.autoplay = true;
    const videoContainer = document.getElementById('video-container');
    videoContainer.innerHTML = ''; // 清空容器
    videoContainer.appendChild(videoElement);
    button.innerHTML = '甜妹视频';
       
}

function loadVideo_3() {
    const button = document.getElementById('check_bt_3');
    button.innerHTML = '加载中'; // 更改按钮内容为"正在加载中"
    const videoUrl = "https://api.8uid.cn/ng.php?type=video";
    const videoElement = document.getElementById('videoPlayer');
    videoElement.src = videoUrl;
    videoElement.autoplay = true;
    const videoContainer = document.getElementById('video-container');
    videoContainer.innerHTML = ''; // 清空容器
    videoContainer.appendChild(videoElement);
    button.innerHTML = '纯情女高';
       
}

function loadVideo_4() {
    const button = document.getElementById('check_bt_4');
    button.innerHTML = '加载中'; // 更改按钮内容为"正在加载中"
    const videoUrl = "https://api.8uid.cn/qc.php?type=video";
    const videoElement = document.getElementById('videoPlayer');
    videoElement.src = videoUrl;
    videoElement.autoplay = true;
    const videoContainer = document.getElementById('video-container');
    videoContainer.innerHTML = ''; // 清空容器
    videoContainer.appendChild(videoElement);
    button.innerHTML = '清纯美女';
       
}
function loadVideo_5() {
    const button = document.getElementById('check_bt_5');
    button.innerHTML = '加载中'; // 更改按钮内容为"正在加载中"
    const videoUrl = "https://api.8uid.cn/cd.php?type=video";
    const videoElement = document.getElementById('videoPlayer');
    videoElement.src = videoUrl;
    videoElement.autoplay = true;
    const videoContainer = document.getElementById('video-container');
    videoContainer.innerHTML = ''; // 清空容器
    videoContainer.appendChild(videoElement);
    button.innerHTML = '穿搭视频';
       
}

function loadVideo_6() {
    
    const button = document.getElementById('check_bt_6');
    button.innerHTML = '加载中'; // 更改按钮内容为"正在加载中"
    const apiUrl = 'https://tucdn.wpon.cn/api-girl/index.php?wpon=json';
    fetch(apiUrl)
        .then(response => response.json())
        .then(data => {
            const videoUrl = data.mp4;

            const videoElement = document.getElementById('videoPlayer');
            videoElement.src = 'https:'+videoUrl;
            videoElement.autoplay = true;
            const videoContainer = document.getElementById('video-container');
            videoContainer.innerHTML = ''; // 清空容器
            videoContainer.appendChild(videoElement);
            button.innerHTML = '随机视频';
        })
        .catch(error => {
            button.innerHTML = '加载失败';
            console.error('Error loading video:', error);
        });
       
}