关于hexo博客fluid主题的音乐和视频配置

如果有托管平台最好了，就可以省去很多麻烦。使用外链直接嵌入网页，让ai提供代码模版

音乐

音乐一般有两种方法：

1. 将音乐文件放在你的博客的source文件夹下，然后在你的markdown文件中使用相对路径来嵌入到markdown文件中
2. 外链嵌入

简单比较：

类型	优点	缺点
本地嵌入	完全控制/无第三方依赖	占用存储空间/需处理版权
外链嵌入	零存储压力/平台功能丰富	依赖第三方稳定性

本地MP3文件嵌入

用这个HTML代码嵌入你的markdown文件中,将音乐的链接替换成你的音乐路径.

<div class="custom-audio-player">
  <audio 
    controls 
    style="width: 100%; margin: 1rem 0;"
    data-cover="/music/cover.jpg"
  >
    <source src="/music/xxx.mp3" type="audio/mpeg">
  </audio>
</div>
<!-- 可选：自定义样式 -->
<style>
.custom-audio-player audio {
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}
</style>

效果展示：

外链嵌入

将以下代码嵌入你的markdown文件中,将音乐的链接替换成你的音乐链接.

不过这个代码有一点小瑕疵，就是一个页面最好只有一个音频，不然会起冲突。如果想要一个页面可以放多个，请把这段代码喂给deepseek修改。

▶

deeseek优化后的代码块

{% raw %}
<div class="custom-audio-player">
  <div class="audio-info">
    <button class="play-button" id="playButton" aria-label="播放音频">
      <svg class="play-icon" viewBox="0 0 24 24" fill="white">
        <path d="M8 5v14l11-7z"/>
      </svg>
      <svg class="pause-icon" viewBox="0 0 24 24" fill="white">
        <path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"/>
      </svg>
    </button>
    <div class="audio-title">你的音乐标题 - 歌手</div>      /* 放你的音乐标题 */
  </div>

  <div class="progress-container" id="progressContainer">
    <div class="progress-bar" id="progressBar"></div>
  </div>

  <div class="time-display">
    <span id="currentTime">0:00</span>
    <span id="duration">0:00</span>
  </div>

  <!-- 修正后的音频路径 -->
  <audio id="audioElement" style="display: none;">
    <source src="你的视频链接" type="audio/mpeg">      /* 放你的链接 */
    你的浏览器不支持音频播放。
  </audio>
</div>

<style>
  /* 自定义播放器样式 */
  .custom-audio-player {
    width: 100%;
    background-color: rgba(34, 46, 80, 0.8);
    border-radius: 8px;
    padding: 12px;
    margin: 1.5rem 0;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  }
  .audio-info { display: flex; align-items: center; margin-bottom: 10px; }
  .audio-title { 
    color: #ffffff;
    font-size: 1rem;
    font-weight: 600;
    margin-left: 10px;
    flex-grow: 1;
  }
  .play-button {
    background-color: #0e83cd;
    border: none;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    cursor: pointer;
    transition: background-color 0.3s;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .progress-container {
    width: 100%;
    height: 6px;
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 3px;
    margin-bottom: 8px;
  }
  .progress-bar {
    height: 100%;
    background-color: #0e83cd;
    border-radius: 3px;
    width: 0%;
    transition: width 0.1s linear;
  }
  .time-display {
    display: flex;
    justify-content: space-between;
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.8rem;
  }
  .pause-icon { display: none; }
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
  const audioElement = document.getElementById('audioElement');
  const playButton = document.getElementById('playButton');
  const playIcon = document.querySelector('.play-icon');
  const pauseIcon = document.querySelector('.pause-icon');
  const progressBar = document.getElementById('progressBar');
  const progressContainer = document.getElementById('progressContainer');
  const currentTimeDisplay = document.getElementById('currentTime');
  const durationDisplay = document.getElementById('duration');

  // 初始化时间显示
  audioElement.addEventListener('loadedmetadata', () => {
    durationDisplay.textContent = formatTime(audioElement.duration);
  });

  // 进度条更新
  audioElement.addEventListener('timeupdate', () => {
    const percent = (audioElement.currentTime / audioElement.duration) * 100;
    progressBar.style.width = `${percent}%`;
    currentTimeDisplay.textContent = formatTime(audioElement.currentTime);
  });

  // 播放/暂停控制
  playButton.addEventListener('click', () => {
    audioElement.paused ? audioElement.play() : audioElement.pause();
    playIcon.style.display = audioElement.paused ? 'block' : 'none';
    pauseIcon.style.display = audioElement.paused ? 'none' : 'block';
  });

  // 点击进度条跳转
  progressContainer.addEventListener('click', (e) => {
    const rect = progressContainer.getBoundingClientRect();
    const percent = (e.clientX - rect.left) / rect.width;
    audioElement.currentTime = percent * audioElement.duration;
  });

  // 时间格式化函数
  function formatTime(seconds) {
    const mins = Math.floor(seconds / 60);
    const secs = Math.floor(seconds % 60);
    return `${mins}:${secs.toString().padStart(2, '0')}`;
  }
});
</script>
{% endraw %}

效果展示：

天后 - 陈势安

0:00 0:00

视频

将以下代码（适合cloudflare的R2储存桶）嵌入你的markdown文件中,记得将视频的链接和封面链接替换成你的视频链接和封面链接.

<!-- 修改后的视频容器 -->
<div class="custom-video-container">
  <div class="video-wrapper">
    <video 
      controls
      preload="metadata"
      poster="https://xxx.jpg"         /* 改成你的封面链接*/
      style="object-fit: contain;"  <!-- 关键属性 -->
    >
      <source src="https://xxx.mp4" type="video/mp4">    /* 改成你的视频链接*/
    </video>
  </div>
</div>

<style>
/* 新增核心适配代码 */
.custom-video-container {
  max-width: 800px;
  margin: 1.5rem auto;
}

.video-wrapper {
  position: relative;
  padding-top: 56.25%; /* 16:9比例计算 (9/16=56.25%) */
  background: #000;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.video-wrapper video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
</style>

效果展示：

这是我在B站上下载的一个视频，所以有B站的水印。我把它储存在了cloudflare的R2储存桶上。

关于这些视频文件，你可以上传到你的服务器上，然后使用服务器提供的链接。也可以使用一些视频分享网站的链接

但是第三方平台的视频一般都是有一些限制的，比如水印和弹幕（哔哩哔哩）、无法正常访问（YouTube），等等。

所以还是找个稳定的托管平台吧。我现在用的是cloudflare的R2，感觉还不错，你也可以尝试一下。

下面将利用哔哩哔哩和YouTube来演示一下

哔哩哔哩嵌入方案

1. 获取B站嵌入代码
   打开视频页面 → 点击「分享」按钮 → 选择「嵌入代码」

复制类似以下代码：

将视频链接复制下来，替换代码中的默认视频链接。

<iframe src="//player.bilibili.com/player.html?aid=视频AID&cid=CID&page=1" 
        scrolling="no" 
        border="0" 
        frameborder="no" 
        framespacing="0" 
        allowfullscreen="true">
</iframe>

建议使用这个deepseek优化过的代码：

<div class="bilibili-video-container">
  <iframe
    src="//player.bilibili.com/player.html?aid=xxxxx&cid=xxxxx&page=1"
    scrolling="no"
    frameborder="no"
    allowfullscreen
    loading="lazy"                    <!-- 延迟加载优化 -->
    data-src="https://player.bilibili.com/player.html?aid=xxxxx" <!-- 备用 -->
  ></iframe>
</div>

<style>
/* B站专用适配 */
.bilibili-video-container {
  position: relative;
  max-width: 800px;
  margin: 1.5rem auto;
  padding-top: 56.25%;  /* 16:9比例 */
}

.bilibili-video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
</style>

效果展示：

B站给的嵌入代码效果：

deepseek优化的嵌入代码效果：

YouTube嵌入方案

获取YouTube嵌入代码

打开视频 → 点击「分享」→ 选择「嵌入」→ 复制代码

示例代码：

<iframe width="560" height="315" 
        src="https://www.youtube.com/embed/视频ID" 
        frameborder="0" 
        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
        allowfullscreen>
</iframe>

deepseek优化后的嵌入代码:

<div class="youtube-video-container">
  <iframe
    src="https://www.youtube.com/embed/视频ID"
    allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
    allowfullscreen
    loading="lazy"
    data-src="https://www.youtube-nocookie.com/embed/视频ID" <!-- 隐私增强 -->
  ></iframe>
</div>

<style>
/* YouTube专用适配 */
.youtube-video-container {
  position: relative;
  max-width: 800px;
  margin: 1.5rem auto;
  padding-top: 56.25%;  /* 16:9比例 */
  background: #000;      /* 预加载黑底 */
}

.youtube-video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

/* 暗黑模式适配 */
@media (prefers-color-scheme: dark) {
  .youtube-video-container {
    background: #111;
  }
}
</style>

效果展示：

YouTube给的嵌入代码效果：

deepseek优化后的嵌入代码效果：

这些就是我今天的所有配置日志了。以后再记录关于如何获得cf的R2储存桶的笔记，因为我还没有学计算机网络，对于域名解析不太
了解。

我有一个域名无法被访问，我也还没有找到原因。不过应该是域名本身的原因，以ping就全红。等了解的更多了，就自己买一个云服务器玩。

就不用在网上到处找免费的平台配置了（不过在这个过程中我也学会了很多东西）