音乐和视频播放测试

🎵 音乐播放功能

方式一：HTML5 Audio 标签

直接嵌入音频文件

<audio controls>
  <source src="/music/song.mp3" type="audio/mpeg">
  <source src="/music/song.ogg" type="audio/ogg">
  您的浏览器不支持音频播放。
</audio>

方式二：嵌入网易云音乐

<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width="330" height="86" 
        src="//music.163.com/outchain/player?type=2&id=28391863&auto=0&height=66">
</iframe>

---

🎬 视频播放功能

方式一：HTML5 Video 标签

本地视频文件

<video width="100%" controls>
  <source src="/videos/demo.mp4" type="video/mp4">
  您的浏览器不支持视频播放。
</video>

方式二：嵌入 YouTube 视频

iframe 嵌入

<iframe width="100%" height="400" 
        src="https://www.youtube.com/embed/VIDEO_ID" 
        frameborder="0" 
        allowfullscreen>
</iframe>

方式三：嵌入 Bilibili 视频

B站视频嵌入

静态嵌入示例

<iframe src="//player.bilibili.com/player.html?bvid=BV1xx411c7mD&page=1" 
        scrolling="no" 
        border="0" 
        frameborder="no" 
        framespacing="0" 
        allowfullscreen="true" 
        width="100%" 
        height="400">
</iframe>

🎮 交互式B站视频播放器

<div class="bilibili-player-container">
  <div class="input-section">
    <label for="bvid-input">输入B站视频BV号：</label>
    <div class="input-group">
      <input type="text" 
             id="bvid-input" 
             placeholder="例如：BV1om4y1Y771" 
             value="BV1om4y1Y771">
      <button onclick="loadBilibiliVideo()">🎬 播放视频</button>
      <button onclick="clearVideo()">🗑️ 清空</button>
    </div>
    <div class="preset-videos">
      <span>快速选择：</span>
      <button onclick="loadPresetVideo('BV1om4y1Y771')">示例视频1</button>
      <button onclick="loadPresetVideo('BV1xx411c7mD')">示例视频2</button>
      <button onclick="loadPresetVideo('BV1uv411q7Mv')">示例视频3</button>
    </div>
  </div>
  
  <div class="video-player">
    <iframe id="bilibili-iframe" 
            src="//player.bilibili.com/player.html?bvid=BV1om4y1Y771&page=1" 
            scrolling="no" 
            border="0" 
            frameborder="no" 
            framespacing="0" 
            allowfullscreen="true" 
            width="100%" 
            height="400">
    </iframe>
  </div>
  
  <div class="video-info" id="video-info">
    <p>当前播放：BV1om4y1Y771</p>
  </div>
</div>

<script>
function loadBilibiliVideo() {
  const bvidInput = document.getElementById('bvid-input');
  const iframe = document.getElementById('bilibili-iframe');
  const videoInfo = document.getElementById('video-info');
  
  let bvid = bvidInput.value.trim();
  
  // 验证BV号格式
  if (!bvid) {
    alert('请输入BV号！');
    return;
  }
  
  // 自动添加BV前缀（如果用户没有输入）
  if (!bvid.startsWith('BV')) {
    bvid = 'BV' + bvid;
  }
  
  // 验证BV号格式（简单验证）
  const bvidPattern = /^BV[a-zA-Z0-9]{10}$/;
  if (!bvidPattern.test(bvid)) {
    alert('BV号格式不正确！请检查输入（例如：BV1om4y1Y771）');
    return;
  }
  
  // 更新iframe src
  const newSrc = `//player.bilibili.com/player.html?bvid=${bvid}&page=1`;
  iframe.src = newSrc;
  
  // 更新视频信息
  videoInfo.innerHTML = `<p>当前播放：${bvid} <span class="loading">加载中...</span></p>`;
  
  // 3秒后移除加载提示
  setTimeout(() => {
    videoInfo.innerHTML = `<p>当前播放：${bvid} <span class="success">✅ 加载完成</span></p>`;
  }, 3000);
}

function loadPresetVideo(bvid) {
  const bvidInput = document.getElementById('bvid-input');
  bvidInput.value = bvid;
  loadBilibiliVideo();
}

function clearVideo() {
  const bvidInput = document.getElementById('bvid-input');
  const iframe = document.getElementById('bilibili-iframe');
  const videoInfo = document.getElementById('video-info');
  
  bvidInput.value = '';
  iframe.src = 'about:blank';
  videoInfo.innerHTML = '<p>请输入BV号来播放视频</p>';
}

// 回车键快捷播放
document.getElementById('bvid-input').addEventListener('keypress', function(e) {
  if (e.key === 'Enter') {
    loadBilibiliVideo();
  }
});
</script>

<style>
.bilibili-player-container {
  max-width: 800px;
  margin: 20px auto;
  padding: 20px;
  border: 2px solid #00A1D6;
  border-radius: 12px;
  background: linear-gradient(135deg, #f8f9ff 0%, #e8f4ff 100%);
  box-shadow: 0 4px 12px rgba(0, 161, 214, 0.1);
}

.input-section {
  margin-bottom: 20px;
}

.input-section label {
  display: block;
  margin-bottom: 8px;
  font-weight: bold;
  color: #333;
}

.input-group {
  display: flex;
  gap: 10px;
  margin-bottom: 15px;
  flex-wrap: wrap;
}

.input-group input {
  flex: 1;
  min-width: 200px;
  padding: 10px 15px;
  border: 2px solid #ddd;
  border-radius: 6px;
  font-size: 14px;
  transition: border-color 0.3s;
}

.input-group input:focus {
  outline: none;
  border-color: #00A1D6;
  box-shadow: 0 0 0 3px rgba(0, 161, 214, 0.1);
}

.input-group button {
  padding: 10px 20px;
  background: #00A1D6;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  font-weight: bold;
  transition: all 0.3s;
  white-space: nowrap;
}

.input-group button:hover {
  background: #0088BB;
  transform: translateY(-1px);
}

.input-group button:last-child {
  background: #FF6B6B;
}

.input-group button:last-child:hover {
  background: #FF5252;
}

.preset-videos {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.preset-videos span {
  color: #666;
  font-size: 14px;
}

.preset-videos button {
  padding: 6px 12px;
  background: #f0f0f0;
  color: #333;
  border: 1px solid #ddd;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  transition: all 0.3s;
}

.preset-videos button:hover {
  background: #00A1D6;
  color: white;
  border-color: #00A1D6;
}

.video-player {
  margin-bottom: 15px;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.video-info {
  text-align: center;
  padding: 10px;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 6px;
}

.video-info p {
  margin: 0;
  color: #333;
}

.loading {
  color: #FF9800;
  animation: pulse 1.5s infinite;
}

.success {
  color: #4CAF50;
}

@keyframes pulse {
  0%, 50%, 100% { opacity: 1; }
  25%, 75% { opacity: 0.5; }
}

@media (max-width: 600px) {
  .input-group {
    flex-direction: column;
  }
  
  .input-group input {
    min-width: auto;
  }
  
  .preset-videos {
    flex-direction: column;
    align-items: flex-start;
  }
}
</style>

输入B站视频BV号：

🎬 播放视频 🗑️ 清空

快速选择： 示例视频1 示例视频2 示例视频3

当前播放：BV1om4y1Y771

---

🎨 高级自定义

JavaScript 自定义播放器

<div id="custom-player">
  <video id="myVideo" width="100%" height="400">
    <source src="/videos/demo.mp4" type="video/mp4">
  </video>
  <div class="controls">
    <button onclick="playPause()">播放/暂停</button>
    <button onclick="makeBig()">放大</button>
    <button onclick="makeSmall()">缩小</button>
    <button onclick="makeNormal()">正常</button>
  </div>
</div>

<script>
var myVideo = document.getElementById("myVideo");

function playPause() {
  if (myVideo.paused) {
    myVideo.play();
  } else {
    myVideo.pause();
  }
}

function makeBig() {
  myVideo.width = 800;
}

function makeSmall() {
  myVideo.width = 320;
}

function makeNormal() {
  myVideo.width = 560;
}
</script>

<style>
#custom-player {
  text-align: center;
  margin: 20px 0;
}

.controls {
  margin-top: 10px;
}

.controls button {
  margin: 0 5px;
  padding: 8px 16px;
  background: #42A5F5;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.controls button:hover {
  background: #1976D2;
}
</style>

响应式视频容器

<div class="video-container">
  <iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ" 
          frameborder="0" 
          allowfullscreen>
  </iframe>
</div>

<style>
.video-container {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  height: 0;
  overflow: hidden;
}

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