效果图

代码

{hide}

<section id="xiaojiejie">
    <div class="xiaojiejie"><style>#player { margin: 1px auto; max-width: 100%; border-radius: 10px; display: block; } #xjjsp { display: none; } #ckxjj,#gbxjj { width: 100%; height: 40px; border: none; background-color: #f95491; color: #fff; margin-top: 1px; border-radius: 5px; font-size: 18px; cursor: pointer; transition: 0.2s; } #ckxjj:hover,#gbxjj:hover { background-color: #eeb4bf; } .kzsp { width: 100%; display: flex; justify-content: space-between; } .kzsp>button { border: none; height: 40px; padding: 0 30px; font-size: 16px; background-color: #f95491; border-radius: 10px; color: #fff; transition: 0.3s; cursor: pointer; } .kzsp>button:active { background-color: #e25a00; }</style>
        <button type="button" id="ckxjj">点我看小姐姐视频</button>
        <div id="xjjsp">
            <video id="player" src="https://api.heylie.cn/api/video?v=emo" controls="" alt="小姐姐视频"></video>
            <div class="kzsp">
                <button id="switch">连续: 开</button>
                <button id="next">下一个</button>
            </div>
            <button type="button" id="gbxjj">关闭视频</button>
        </div>
        <script>
            var player = document.getElementById('player');
            var bind = function (element, event, callback) {
                return element.addEventListener(event, callback);
            };
            var sp = 0;
            $(document).ready(function () {
                $('#ckxjj').click(() => {
                    $('#ckxjj').hide();
                    $('#xjjsp').show();
                    if (sp == 0) {
                        randomm();
                        sp = null
                    }
                    player.onerror = () => {
                        randomm()
                    }
                    player.play();
                });
                $('#gbxjj').click(() => {
                    $('#ckxjj').show();
                    $('#xjjsp').hide();
                    player.pause();
                })
            });



            var get = function (id) {
                return document.getElementById(id);
            };

            var auto = true;
            // 生成播放视频
            function randomm() {
                player.src = 'https://api.heylie.cn/api/video?v=emo';
                player.play();
            };
            bind(get('next'), 'click', randomm);

            bind(get('switch'), 'click', function () {
                auto = !auto;
                this.innerText = '连续：' + (auto ? '开' : '关');
            });
            bind(player, 'ended', function () {
                if (auto) randomm();
            });
            player.pause();
        </script>
    </div>
</section>

{/hide}

结束

• 需要你自己有一点点的基础，需要放的位置修改css
• 可以使用自己的api

版权声明

   站内部分内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供网络资源分享服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请 联系我们 一经核实，立即删除。并对发布账号进行永久封禁处理。在为用户提供最好的产品同时，保证优秀的服务质量。

---

本站仅提供信息存储空间,不拥有所有权,不承担相关法律责任。