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

今天分享一个在侧边栏添加一个视频小卡片，可以根据网站的需求自行更换成喜欢的视频进行播放，用户可点击下一个进行视频更换，增加网站互动率，增加用户的粘性，喜欢的自行下载测试文章也汇总了部分视频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

感谢您的来访，获取更多精彩文章请收藏本站。