handsome主题视频动态背景图

小旭

November 5, 2023

4112 views

2 comments

1760 words

杂七杂八

# 前言

> 已经找不到原作者了,备忘一下

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

> 开发者设置->自定义输出head 头部的HTML代码

更改透明模式

```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>

```

End

本文标题：handsome主题视频动态背景图

本文链接：https://sicx.top/88.html

除非另有说明，本作品采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议。