🎀 🌸

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

📝 heardic 🏷️ HTML源码 🔖 API 🔖 网站
📅 2024-12-30 ⏱️ 1 分钟 🔢 258 字
有问题请联系站长QQ2469329338
立即跳转

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

0678

今天分享一个在侧边栏添加一个视频小卡片，可以根据网站的需求自行更换成喜欢的视频进行播放，用户可点击下一个进行视频更换，增加网站互动率，增加用户的粘性，喜欢的自行下载测试文章也汇总了部分视频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>
<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>
<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>
<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>
<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>
本站资源均为网友推荐收集整理而来，请勿商业运营，仅供学习和研究，请在下载后24小时内删除！！
© 版权声明

本站资源大多来自网络，如有侵犯你的权益请联系管理员E-mail:2469329338@qq.com 我们会第一时间进行审核删除。站内资源为网友个人学习或测试研究使用，未经原版权作者许可,禁止用于任何商业途径！请在下载24小时内删除！

如果遇到付费才可观看的文章，建议升级终身VIP。全站所有资源“任意下免费看”。本站资源少部分采用7z压缩，为防止有人压缩软件不支持7z格式，7z解压，建议下载7-zip，zip、rar解压，建议下载WinRAR。

THE END
HTML源码源码合集
# 网站# API
点赞8
heardic的头像-诺言资源网永久会员
评论 抢沙发
头像
欢迎您留下宝贵的见解！
提交
头像

昵称

取消
昵称

请填写用户信息：

  • 昵称(必填)
  • 邮箱(必填)
表情
[aoman][baiyan][bishi][bizui][cahan][ciya][dabing][daku][deyi][doge][fadai][fanu][fendou][ganga][guzhang][haixiu][hanxiao][zuohengheng][zhuakuang][zhouma][zhemo][zhayanjian][zaijian][yun][youhengheng][yiwen][yinxian][xu][xieyanxiao][xiaoku][xiaojiujie][xia][wunai][wozuimei][weixiao][weiqu][tuosai][tu][touxiao][tiaopi][shui][se][saorao][qiudale][qinqin][qiaoda][piezui][penxue][nanguo][liulei][liuhan][lenghan][leiben][kun][kuaikule][ku][koubi][kelian][keai][jingya][jingxi][jingkong][jie][huaixiao][haqian][aini][OK][qiang][quantou][shengli][woshou][gouyin][baoquan][aixin][bangbangtang][xiaoyanger][xigua][hexie][pijiu][lanqiu][juhua][hecai][haobang][caidao][baojin][chi][dan][kulou][shuai][shouqiang][yangtuo][youling]
代码

请输入代码：

确认
图片

    暂无评论内容