《原创》typecho-handsome主题视频动态背景图-帅的批爆

最新推荐文章于 2023-11-08 09:32:36 发布

小桑先生

最新推荐文章于 2023-11-08 09:32:36 发布

阅读量335

点赞数

分类专栏： typecho 文章标签：音视频 javascript css

本文链接：https://blog.csdn.net/u014456739/article/details/131134963

版权

typecho 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

网上有很多handsome背景都是动态粒子，想尝试一下视频背景的，找了一下网上没有相关资源，作为小白的我，尝试的写了一下。。。

通过 HTML5 的 video 标签实现的视频背景页面。
其中 poster 属性指定了视频未加载或暂停时的预览图，autoplay 属性指定了视频自动播放，loop 属性指定了视频循环播放，muted 属性指定了视频静音。
按钮使用了 HTML 和 CSS 实现，点击播放按钮可以播放视频，点击静音按钮可以开启/关闭视频的声音。

浏览器限制，第一次打开网站不会播放视频，需要点击开始播放，后续就自动播放了，也添加了循环播放，与声音按钮。
鼠标右键勾选显示所有控件，可以全屏播放。

开发者设置->自定义输出head 头部的HTML代码
透明模式更加

<!--视频背景-->
<!DOCTYPE html>
<html>
<head>
  <title>Video Player with Controls</title>
  <style>
    video {
      position: fixed;
      right: 0px;
      bottom: 0px;
      max-width: 100%;
      min-height: 100%;
      width: 100%;
      height: 100%;
      display: block;
      object-fit: fill;
    }
    
    .btn-container {
      position: fixed;
      z-index: 9999;
      top: 50%;
      right: 0;
      transform: translateY(-50%);
    }
    
    .btn {
      font-size: 8px;
      padding: 8px;
      background-color: #fff;
      border: none;
      color: #000;
      cursor: pointer;
    }

    #play-btn {
      margin-bottom: 8px;
    }
    
    .btn-info {
      background-color: #17a2b8;
      color: #fff;
    }
    
    .btn-danger {
      background-color: #dc3545;
      color: #fff;
    }
  </style>
</head>
<body>
  <video id="video" autoplay loop muted poster="https://www.xn--9qr844m.cn:5244/d/%E6%9C%AC%E5%9C%B0/%E9%98%BF%E9%87%8C%E4%BA%91%E7%9B%98%E8%B5%84%E6%96%99%E5%A4%87%E4%BB%BD%E5%85%B1%E4%BA%AB/%E5%9B%BE%E7%89%87/%E5%9B%BE%E5%BA%8A/%E8%83%8C%E6%99%AF.png">
    <source src="https://www.xn--9qr844m.cn:5244/d/%E6%9C%AC%E5%9C%B0/%E9%98%BF%E9%87%8C%E4%BA%91%E7%9B%98%E8%B5%84%E6%96%99%E5%A4%87%E4%BB%BD%E5%85%B1%E4%BA%AB/%E8%A7%86%E9%A2%91/%E5%B9%BD%E5%85%B0%E6%88%B4%E5%B0%94Good%20night%20kiss%202400%E6%AF%94%E7%89%B9%E7%8E%8724%E5%B8%A7.MP4">
  </video>
  
  <div class="btn-container">
    <button id="play-btn" class="btn m-b-xs" onclick="playVideo()">
      <i class="fa fa-play"></i>
    </button>
    
    <button class="btn m-b-xs btn-info" onclick="toggleMute()">
      <span id="mute-on">开<br>启<br>背<br>景<br>声<br>音</span>
      <span id="mute-off" style="display:none">关<br>闭<br>背<br>景<br>声<br>音</span>
    </button>
  </div>
  
  <script>
    var video = document.getElementById("video");
    var playBtn = document.getElementById("play-btn");
    var muteOn = document.getElementById("mute-on");
    var muteOff = document.getElementById("mute-off");
    
    function playVideo() {
      video.play();
      playBtn.style.display = "none";
    }
    
    function toggleMute() {
      if (video.muted) {
        video.muted = false;
        muteOn.style.display = "block";
        muteOff.style.display = "none";
      } else {
        video.muted = true;
        muteOn.style.display = "none";
        muteOff.style.display = "block";
      }
    }
  </script>
</body>
</html>

<!--视频背景-->

小桑先生

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
《原创》typecho-handsome主题视频动态背景图-帅的批爆

其中 poster 属性指定了视频未加载或暂停时的预览图，autoplay 属性指定了视频自动播放，loop 属性指定了视频循环播放，muted 属性指定了视频静音。网上有很多handsome背景都是动态粒子，想尝试一下视频背景的，找了一下网上没有相关资源，作为小白的我，尝试的写了一下。浏览器限制，第一次打开网站不会播放视频，需要点击开始播放，后续就自动播放了，也添加了循环播放，与声音按钮。按钮使用了 HTML 和 CSS 实现，点击播放按钮可以播放视频，点击静音按钮可以开启/关闭视频的声音。
复制链接

扫一扫