网站侧边栏添加随机小姐姐,随机短视频小卡片

  • 分享一个在侧边栏添加一个视频小卡片,可以根据网站的需求自行更换成喜欢的视频进行播放,用户可点击下一个进行视频更换,增加网站互动率,增加用户的粘性,喜欢的自行下载测试文章也汇总了部分视频API接口,可能会有失效,请自行斟酌使用。

    使用教程

    后台>>外观>>小工具>>自定义HTML>>放置侧边栏

    HTML

    <div class="video-container">
            <video id="videoPlayer" autoplay="" muted="" playsinline="" src="视频接口">
                    <source src="视频接口" type="video/mp4">
                    您的浏览器不支持 HTML5 视频标签。
            </video>
            <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">下一个</button>
    </div>

    CSS和JS

    <style>
            .video-container {
                    width: 100%;
                    height: 100%;
                    border-radius: 20px;
                    overflow: hidden;
                    position: relative;
                    background-color: #000;
                    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.8);
                    font-family: Arial, sans-serif;
            }
    
            .video-container video {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                    display: block;
            }
    
            .video-container .next-button {
                    position: absolute;
                    bottom: 20px;
                    right: 20px;
                    background: rgba(255, 255, 255, 0.85);
                    border: none;
                    color: #000;
                    font-size: 12px;
                    font-weight: bold;
                    padding: 6px 12px;
                    border-radius: 50px;
                    cursor: pointer;
                    box-shadow: 0 4px 10px rgba(255, 255, 255, 0.3);
                    transition: transform 0.3s, background 0.3s, opacity 0.3s;
                    opacity: 0.5;
            }
    
            .video-container .next-button:hover {
                    transform: translateY(-3px);
                    background: rgba(255, 255, 255, 1);
                    opacity: 1;
            }
    
            .video-container .volume-control {
                    position: absolute;
                    bottom: 30px;
                    left: 20px;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    gap: 10px;
                    opacity: 0.5;
                    transition: opacity 0.3s;
            }
    
            .video-container .volume-control:hover {
                    opacity: 1;
            }
    
            .video-container .volume-slider {
                    width: 80px;
                    height: 5px;
                    background: #ccc;
                    border-radius: 5px;
                    outline: none;
                    appearance: none;
                    cursor: pointer;
            }
    
            .video-container .volume-slider::-webkit-slider-thumb {
                    appearance: none;
                    width: 12px;
                    height: 12px;
                    background: #fff;
                    border-radius: 50%;
                    cursor: pointer;
            }
    
            .video-container .volume-slider {
                    border: none;
            }
    </style>
    
    <script>
            const videoPlayer = document.getElementById('videoPlayer');
            const nextButton = document.getElementById('nextButton');
            const volumeSlider = document.getElementById('volumeSlider');
            const videoUrl = "视频接口";
    
            function loadVideo() {
                    videoPlayer.src = videoUrl;
                    videoPlayer.play();
            }
    
            videoPlayer.addEventListener('ended', loadVideo);
            nextButton.addEventListener('click', loadVideo);
            videoPlayer.addEventListener('click', () => {
                    videoPlayer.paused ? videoPlayer.play() : videoPlayer.pause();
            });
            videoPlayer.addEventListener('contextmenu', (e) => e.preventDefault());
            volumeSlider.addEventListener('input', () => {
                    videoPlayer.volume = volumeSlider.value;
                    videoPlayer.muted = videoPlayer.volume === 0;
            });
    
            loadVideo();
    </script>

    一大堆视频接口:

    隐藏内容,输入密码后查看
    本站完整网址是:
    图片[1]-网站侧边栏添加随机小姐姐,随机短视频小卡片 - 软壳源码网-软壳源码网
    版权声明 1 本网站名称:软壳源码网
    2 本站永久网址: https://www.ruankor.com/
    3 本网站的文章部分内容可能来源于网络,仅供大家学习与参考,如有侵权,请联系站长进行删除处理。
    4 本站一切资源不代表本站立场,并不代表本站赞同其观点和对其真实性负责。
    5 本站一律禁止以任何方式发布或转载任何违法的相关信息,访客发现请向站长举报
    6 本站资源大多存储在云盘,如发现链接失效,请联系我们我们会第一时间更新。
    7如有侵权,请联系站长删除相关内容!
    © 版权声明
    THE END
    喜欢就记住本站,经常来逛逛吧
    点赞29 分享
    评论 抢沙发

    请登录后发表评论

      暂无评论内容