欧阳风刀 发表于 2025-8-4 22:36:12

工整漂亮，音乐视频制作真不赖！

欧阳风刀 发表于 2025-8-4 22:36:39

感谢哥们儿分享精彩！

云端漫步 发表于 2025-8-5 01:22:01

本帖最后由 云端漫步 于 2025-8-5 02:10 编辑

圊圊淥詶 发表于 2025-8-4 21:42
漫步老师分享一下这个代码呗，我也想学学

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>论坛视频播放器</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script>
      tailwind.config = {
            theme: {
                extend: {
                  colors: {
                        darkred: '#c8c108',
                        cyan: '#00FFFF',
                        gold: '#f0e7b5',
                        goldLight: '#FFF8DC',
                  },
                  fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                  },
                }
            }
      }
    </script>
    <style type="text/tailwindcss">
      @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .scrollbar-thin {
                scrollbar-width: thin;
            }
            .scrollbar-thin::-webkit-scrollbar {
                width: 5px;
            }
            .scrollbar-thin::-webkit-scrollbar-thumb {
                background-color: rgba(156, 163, 175, 0.5);
                border-radius: 9999px;
            }
            .player-controls {
                opacity: 0;
                transition: opacity 0.3s ease;
            }
            .video-container:hover .player-controls {
                opacity: 1;
            }
            .playlist-item {
                transition: all 0.2s ease;
            }
            .playlist-item:hover {
                transform: translateX(5px);
            }
            .video-ratio {
                aspect-ratio: 16/9;
            }
      }
    </style>
</head>
<body class="bg-gray-900 text-white min-h-screen">
    <div class="container mx-auto px-4 py-8 max-w-7xl">
      <!-- 顶部控制区域 -->
      <div class="bg-darkred rounded-t-lg p-4 flex flex-col lg:flex-row gap-4 items-center justify-between">
            <div class="text-xl font-bold mb-2 lg:mb-0">云端漫步经典MV视频播放器</div>
            
            <div class="flex flex-wrap gap-4 w-full lg:w-auto">
                <div class="flex items-center gap-2">
                  <label for="horizontal">水平:</label>
                  <input type="range" id="horizontal" min="0" max="100" value="50"
                        class="w-32 h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer">
                  <span id="horizontal-value" class="w-10 text-center">50</span>
                </div>
               
                <div class="flex items-center gap-2">
                  <label for="width">宽度:</label>
                  <input type="range" id="width" min="640" max="1920" value="1280"
                        class="w-32 h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer">
                  <span id="width-value" class="w-14 text-center">1280</span>
                </div>
               
                <div class="flex items-center gap-2">
                  <label for="height">高度:</label>
                  <input type="range" id="height" min="360" max="720" value="540"
                        class="w-32 h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer">
                  <span id="height-value" class="w-14 text-center">540</span>
                </div>
            </div>
      </div>
      
      <!-- 主要内容区域 -->
      <div class="flex flex-col lg:flex-row gap-4 bg-gray-800 p-4 rounded-b-lg max-h-">
            <!-- 左侧视频播放器 -->
            <div class="lg:w-3/4">
                <div class="relative video-container" id="video-container">
                  <video id="main-video" class="w-full bg-black rounded-lg video-ratio" controls>
                        <p>HTML5视频播放。</p>
                  </video>
                  
                  <!-- 播放/暂停按钮 -->
                  <div class="absolute inset-0 flex items-center justify-center player-controls">
                        <button id="play-pause-btn" class="bg-black/50 hover:bg-black/70 text-white w-16 h-16 rounded-full flex items-center justify-center transition-all duration-300 transform hover:scale-110">
                            <i class="fa fa-play text-2xl"></i>
                        </button>
                  </div>
                  
                  <!-- 代码显示区域 -->
                  <div class="absolute bottom-2 left-2 bg-black/70 text-white text-xs p-2 rounded opacity-70">
                        <div>左值: <span id="left-value">0</span></div>
                        <div>顶值: <span id="top-value">0</span></div>
                  </div>
                </div>
               
                <!-- 视频信息 - 进一步缩小高度和宽度 -->
                <div class="mt-2 p-1.5 bg-gold rounded-lg text-gray-800 max-h- max-w- mx-auto overflow-y-auto">
                  <h2 id="video-title" class="text-xs font-bold mb-0.5 truncate">1斑MV</h2>
                  <p id="video-description" class="text-">
                        视频描述将显示在这里。
                  </p>
                </div>
            </div>
            
            <!-- 右侧播放列表 -->
            <div class="lg:w-1/4 bg-cyan/20 rounded-lg p-4 overflow-y-auto scrollbar-thin">
                <h3 class="text-lg font-bold text-gray-900 mb-3">播放列表</h3>
                <ul id="playlist" class="space-y-2">
                  <li class="playlist-item bg-cyan/40 hover:bg-cyan/60 p-3 rounded-lg cursor-pointer text-gray-900" data-url="https://cccimg.com/view.php/973bd4f8915b191bf4dd3cc54c806f60.mp4">
                        1斑MV
                  </li>
                  <li class="playlist-item bg-cyan/40 hover:bg-cyan/60 p-3 rounded-lg cursor-pointer text-gray-900" data-url="https://cccimg.com/view.php/090cdc6631620a9c77b3cfe074fd524f.mp4">
                        2Come As You Are
                  </li>
                  <li class="playlist-item bg-cyan/40 hover:bg-cyan/60 p-3 rounded-lg cursor-pointer text-gray-900" data-url="https://cccimg.com/view.php/a27b255bed39bb5e2e5b509a75b09d6e.mp4">
                        3《智子》MV
                  </li>
                  <li class="playlist-item bg-cyan/40 hover:bg-cyan/60 p-3 rounded-lg cursor-pointer text-gray-900" data-url="https://cccimg.com/view.php/a60bc75b847c929d74e520cb1b48b0bb.mp4">
                        4天高海阔
                  </li>
                  <li class="playlist-item bg-cyan/40 hover:bg-cyan/60 p-3 rounded-lg cursor-pointer text-gray-900" data-url="https://cccimg.com/view.php/6733fca05e32ff313d8d4936df7ab263.mp4">
                        5那又怎样
                  </li>
                  <li class="playlist-item bg-cyan/40 hover:bg-cyan/60 p-3 rounded-lg cursor-pointer text-gray-900" data-url="https://cccimg.com/view.php/36f94f9db7bef9af9a1ad62e8ee75635.mp4">
                        6河畔少年
                  </li>
                  <li class="playlist-item bg-cyan/40 hover:bg-cyan/60 p-3 rounded-lg cursor-pointer text-gray-900" data-url="https://cccimg.com/view.php/cde984c03d561cfdfc20d5a2d3b76b8b.mp4">
                        7蛟龙出海
                  </li>
                  <li class="playlist-item bg-cyan/40 hover:bg-cyan/60 p-3 rounded-lg cursor-pointer text-gray-900" data-url="https://cccimg.com/view.php/c7cef57863ef46c4c791706d29b56b84.mp4">
                        8相爱就是说了
                  </li>
                  <li class="playlist-item bg-cyan/40 hover:bg-cyan/60 p-3 rounded-lg cursor-pointer text-gray-900" data-url="https://cccimg.com/view.php/7ee90978660f041a596d1fcb2b7bef82.mp4">
                        9清晨五点
                  </li>
                  <li class="playlist-item bg-cyan/40 hover:bg-cyan/60 p-3 rounded-lg cursor-pointer text-gray-900" data-url="https://cccimg.com/view.php/ea8f5307f1b4150917fa7b32cdbebacc.mp4">
                        10带我去找夜生活
                  </li>
                  <li class="playlist-item bg-cyan/40 hover:bg-cyan/60 p-3 rounded-lg cursor-pointer text-gray-900" data-url="https://cccimg.com/view.php/4f03b71a14e785dbedad57543057c6e1.mp4">
                        11曹操
                  </li>
                </ul>
            </div>
      </div>
    </div>
   
    <script>
      // 获取DOM元素
      const video = document.getElementById('main-video');
      const playPauseBtn = document.getElementById('play-pause-btn');
      const playlist = document.getElementById('playlist');
      const videoTitle = document.getElementById('video-title');
      const videoDescription = document.getElementById('video-description');
      const horizontalSlider = document.getElementById('horizontal');
      const horizontalValue = document.getElementById('horizontal-value');
      const widthSlider = document.getElementById('width');
      const widthValue = document.getElementById('width-value');
      const heightSlider = document.getElementById('height');
      const heightValue = document.getElementById('height-value');
      const leftValue = document.getElementById('left-value');
      const topValue = document.getElementById('top-value');
      const videoContainer = document.getElementById('video-container');
      const playlistContainer = playlist.parentElement;
      
      // 设置初始视频
      video.src = 'https://cccimg.com/view.php/973bd4f8915b191bf4dd3cc54c806f60.mp4';
      videoTitle.textContent = '1斑MV';
      
      // 播放/暂停功能
      playPauseBtn.addEventListener('click', () => {
            if (video.paused) {
                video.play();
                playPauseBtn.innerHTML = '<i class="fa fa-pause text-2xl"></i>';
            } else {
                video.pause();
                playPauseBtn.innerHTML = '<i class="fa fa-play text-2xl"></i>';
            }
      });
      
      // 视频播放状态变化时更新按钮
      video.addEventListener('play', () => {
            playPauseBtn.innerHTML = '<i class="fa fa-pause text-2xl"></i>';
      });
      
      video.addEventListener('pause', () => {
            playPauseBtn.innerHTML = '<i class="fa fa-play text-2xl"></i>';
      });
      
      // 播放列表点击事件
      playlist.querySelectorAll('li').forEach(item => {
            item.addEventListener('click', () => {
                // 移除所有选中状态
                playlist.querySelectorAll('li').forEach(li => {
                  li.classList.remove('bg-cyan/80');
                  li.classList.add('bg-cyan/40');
                });
               
                // 添加选中状态
                item.classList.remove('bg-cyan/40');
                item.classList.add('bg-cyan/80');
               
                // 更新视频
                video.src = item.getAttribute('data-url');
                videoTitle.textContent = item.textContent.trim();
                videoDescription.textContent = `正在播放: ${item.textContent.trim()}`;
                video.play();
            });
      });
      
      // 水平滑块事件
      horizontalSlider.addEventListener('input', () => {
            horizontalValue.textContent = horizontalSlider.value;
            videoContainer.style.transform = `translateX(${horizontalSlider.value - 50}px)`;
            leftValue.textContent = horizontalSlider.value - 50;
      });
      
      // 宽度滑块事件
      widthSlider.addEventListener('input', () => {
            widthValue.textContent = widthSlider.value;
            video.style.width = `${widthSlider.value}px`;
      });
      
      // 高度滑块事件 - 更新视频高度和播放列表高度
      heightSlider.addEventListener('input', () => {
            heightValue.textContent = heightSlider.value;
            video.style.height = `${heightSlider.value}px`;
            playlistContainer.style.maxHeight = `${heightSlider.value}px`;
      });
      
      // 鼠标移动时更新坐标
      videoContainer.addEventListener('mousemove', (e) => {
            const rect = videoContainer.getBoundingClientRect();
            const x = e.clientX - rect.left;
            const y = e.clientY - rect.top;
            
            leftValue.textContent = Math.round(x);
            topValue.textContent = Math.round(y);
      });
      
      // 初始设置
      videoContainer.style.transform = `translateX(${horizontalSlider.value - 50}px)`;
      playlistContainer.style.maxHeight = `${heightSlider.value}px`;
    </script>
</body>
</html>

云端漫步 发表于 2025-8-5 01:32:00

本帖最后由 云端漫步 于 2025-8-5 01:40 编辑

云端漫步 发表于 2025-8-5 01:22


我这都是明码，设为开放没加密过，可以改xxx经典MV视频播放器，代码行段不要动否则乱码。切记不要动这链
https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.min.css内码内容否则效果失效。论坛视频播放器可改可不改。换上列表名称。换上视频地址。视频地址要可源正确地址，如视频地址非正常也会视频失效。复制代码后放在.html格式内上传空间取得地址链，用发贴代码发表。


这发贴代码优化过的。别的发贴代码无用。
<div id="message69970213" class="t_msgfont " >
    <div style="position:absolute;z-index:32768;background:none;width:100%;left:0px;margin-top:150px;">
      <center>
            <IFRAME src="空间取得地址链.html" width="1100" height="800" marginWidth="0" marginHeight="0" frameBorder="0" scrolling="no" allowfullscreen></IFRAME>
      </center>
    </div>
    <div style="height:800px"></div><BR><BR><BR><BR><BR><BR></div>

云端漫步 发表于 2025-8-5 01:44:06

本帖最后由 云端漫步 于 2025-8-5 20:24 编辑

搜索漫步开源
《漫步大图》
【漫步特效】

云端漫步 发表于 2025-8-5 02:26:40

本帖最后由 云端漫步 于 2025-8-5 02:32 编辑

让我们同享音画的乐趣！

绿蔷薇 发表于 2025-8-5 13:14:39

音乐视频播放器之二了
这一款也很漂亮
在线点播欣赏，给力

绿蔷薇 发表于 2025-8-5 13:18:05

漫步老师辛苦了，下半夜还在分享代码与注意事项，送上花花~~~~{:1_155:}

圊圊淥詶 发表于 2025-8-5 20:13:02

云端漫步 发表于 2025-8-5 01:32
我这都是明码，设为开放没加密过，可以改xxx经典MV视频播放器，代码行段不要动否则乱码。切记不要动这链
...

感谢感谢，谢谢漫步老师，费心了啊，已经收藏了，~~{:S06:}

圊圊淥詶 发表于 2025-8-5 20:13:32

云端漫步 发表于 2025-8-5 02:26
让我们同享音画的乐趣！

谢谢漫步老师，一起开心~~{:S06:}
页: 1 [2]
查看完整版本: 【漫步特效】MV音乐视频播放器之二