视频刷新网页

最新推荐文章于 2025-04-24 17:46:29 发布

猫328

最新推荐文章于 2025-04-24 17:46:29 发布

阅读量129

点赞数 1

文章标签： javascript 前端 css

本文链接：https://blog.youkuaiyun.com/weixin_56274002/article/details/143321171

版权

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .btn {
            width: 100px;
            height: 100px;
            background-color: purple;
            line-height: 100px;
            text-align: center;
            color: #fff;
        }

        .videon {
            width: 300px;
            height: 300px;
        }
    </style>
</head>


<body>
    <div class="btn" id="btn">
        刷新按钮
    </div>
    <div class="videonBox">
        <video class="videon" controls style=" object-fit: fill" autoplay src="" id="video">
        </video>
    </div>
    <script>
        var srcLink = ''
        var xhr = new XMLHttpRequest();
        xhr.open("GET", "https://api.kuleu.com/api/xjj?type=json", true); // URL 替换为你的请求地址
        xhr.onload = function () {
            console.log(xhr, 'xhr')
            if (xhr.status == 200) {
                console.log("响应数据:", xhr.responseText);
                srcLink = JSON.parse(xhr.responseText).video
                console.log('srcLink:', srcLink)
                document.getElementById('video').src = srcLink
                document.getElementById("video").volume = 2;


            } else {
                console.error("请求失败:", xhr.statusText);
            }
        };
        xhr.onerror = function () {
            console.error("请求发生错误");
        };

        xhr.send();
        document.getElementById('btn').addEventListener('click', function () {
            var srcLink = ''
            var xhr = new XMLHttpRequest();
            xhr.open("GET", "https://api.kuleu.com/api/xjj?type=json", true); // URL 替换为你的请求地址
            xhr.onload = function () {
                console.log(xhr, 'xhr')
                if (xhr.status == 200) {
                    console.log("响应数据:", xhr.responseText);
                    srcLink = JSON.parse(xhr.responseText).video
                    console.log('srcLink:', srcLink)
                    document.getElementById('video').src = srcLink
                    document.getElementById("video").volume = 2;

                } else {
                    console.error("请求失败:", xhr.statusText);
                }
            };
            xhr.onerror = function () {
                console.error("请求发生错误");
            };

            xhr.send();
        })
    </script>
</body>

</html>