杨帆 发表于 2025-3-30 19:49

十人十首好听的歌

本帖最后由 杨帆 于 2025-3-30 23:15 编辑 <br /><br /><style>
       #papa {
      margin: 130px-340px;width: 1280px;height:740px;position: relative;overflow: hidden;z-index: 1;display: flex; min-height: 100vh;pointer-events: auto;
}   

       video {
         position:absolute;
           width: 100%;
           height: auto;
      
      }

      .controls { display: flex;justify-content: center;gap: 10px;
position:absolute;margin-top: 10px;
      }
         
      button1 {opacity: 0;left:10px;position:absolute; background-color: #007bff;color: white;
border: none;padding: 10px 20px;border-radius: 5px;cursor: pointer;
transition: background-color 0.5s ease;

      }

          #papa:hover button1 {opacity: .99; background-color: #0056b3;
      }

    </style>

<div id="papa">
   
      <video id="videoPlayer" controls></video>
      <div class="controls">
            <button1 id="playButton"><i class="fa-solid fa-play"></i> Play</button1>
            <button1 id="pauseButton"><i class="fa-solid fa-pause"></i> Pause</button1>
            <button1 id="prevButton"><i class="fa-solid fa-backward"></i> Prev</button1>
            <button1 id="nextButton"><i class="fa-solid fa-forward"></i>&nbsp;&nbsp;Next</button1>
      
    </div></div>

    <script>
      const videoPlayer = document.getElementById('videoPlayer');
      const playButton = document.getElementById('playButton');
      const pauseButton = document.getElementById('pauseButton');
      const prevButton = document.getElementById('prevButton');
      const nextButton = document.getElementById('nextButton');

      const videoSources = [
         
            'https://15799848.s21v.faiusr.com/58/ABUIABA6GAAg6oi24gUorK_PuAY.mp4',
            'https://15799848.s21v.faiusr.com/58/ABUIABA6GAAgofec4gUoppv_gQQ.mp4',
            'https://15799848.s21v.faiusr.com/58/ABUIABA6GAAghv7wrwYom6Cz0wc.mp4 ',
            'https://15799848.s21v.faiusr.com/58/ABUIABA6GAAg38Ks4gUowOr17wU.mp4',
            'https://15799848.s21v.faiusr.com/58/ABUIABA6GAAg6YTX4gUo9q6i9Ac.mp4',
            'https://15799848.s21v.faiusr.com/58/ABUIABA6GAAgirrFjAYo5oiRyQI.mp4',
            'https://15799848.s21v.faiusr.com/58/ABUIABA6GAAg8erW4gUo6Iie5AM.mp4',
            'https://15799848.s21v.faiusr.com/58/ABUIABA6GAAgrKHX4gUo4K_Sogc.mp4 ',
            'https://15799848.s21v.faiusr.com/58/ABUIABA6GAAgzL_v5wUowL3FvAM.mp4',
            'https://15799848.s21v.faiusr.com/58/ABUIABA6GAAgyPPuswYo0oa01QI.mp4',

      ];

      let currentVideoIndex = 0;

      function loadVideo(index) {
            videoPlayer.src = videoSources;
            videoPlayer.load();
            videoPlayer.onerror = () => {
                console.error(`Failed to load video at index ${index}: ${videoSources}`);
                // 尝试加载下一个视频
                nextVideo();
            };
      }

      function playVideo() {
            videoPlayer.play().catch(error => {
                console.error('Error playing video:', error);
            });
      }

      function pauseVideo() {
            videoPlayer.pause();
      }

      function prevVideo() {
            currentVideoIndex = (currentVideoIndex - 1 + videoSources.length) % videoSources.length;
            loadVideo(currentVideoIndex);
            playVideo();
      }

      function nextVideo() {
            currentVideoIndex = (currentVideoIndex + 1) % videoSources.length;
            loadVideo(currentVideoIndex);
            playVideo();
      }

      videoPlayer.addEventListener('ended', nextVideo);

      playButton.addEventListener('click', playVideo);
      pauseButton.addEventListener('click', pauseVideo);
      prevButton.addEventListener('click', prevVideo);
      nextButton.addEventListener('click', nextVideo);

      loadVideo(currentVideoIndex);
    </script>


红影 发表于 2025-3-30 20:35

这个每首都是原唱的MV呢，又好听又好看，太赞了{:4_199:}

红影 发表于 2025-3-30 20:36

正在一首首听着，每个都很好听呢{:4_187:}

红影 发表于 2025-3-30 20:38

这个帖子特别好，就是代码好像有点问题，弄得回帖按钮找不到了呢{:4_173:}

红影 发表于 2025-3-30 20:40

欣赏杨帆好帖，这个特别好，基本一个个都听过看过了呢，美好的视听享受{:4_187:}

杨帆 发表于 2025-3-30 21:03

红影 发表于 2025-3-30 20:38
这个帖子特别好，就是代码好像有点问题，弄得回帖按钮找不到了呢

谢谢影子鼓励，周末愉快{:4_204:}

我这儿正常呀，回帖按钮找不到是什么意思呢

小辣椒 发表于 2025-3-30 21:34

杨帆好，你这个我加不了分，也是回不了帖，现在是ctrl+回车回复的

红影 发表于 2025-3-30 21:38

杨帆 发表于 2025-3-30 21:03
谢谢影子鼓励，周末愉快

我这儿正常呀，回帖按钮找不到是什么意思呢

论坛里的回帖按钮看不到，回复需要用快捷键才行。
论坛的操作也有影响，加图标等都没有操作键了，那个我不知道怎样用快捷。{:4_173:}

杨帆 发表于 2025-3-30 22:12

小辣椒 发表于 2025-3-30 21:34
杨帆好，你这个我加不了分，也是回不了帖，现在是ctrl+回车回复的

谢谢小辣椒关注与支持，高级模式下正常

不知其因，你看看问题在哪里呢

杨帆 发表于 2025-3-30 23:19

红影 发表于 2025-3-30 21:38
论坛里的回帖按钮看不到，回复需要用快捷键才行。
论坛的操作也有影响，加图标等都没有操作键了，那个我 ...

可能是代码元素名称冲突原因，已修复，谢谢影子关注与支持{:4_204:}

红影 发表于 2025-3-31 20:04

杨帆 发表于 2025-3-30 23:19
可能是代码元素名称冲突原因，已修复，谢谢影子关注与支持

嗯嗯，现在可以了{:4_199:}
页: [1]
查看完整版本: 十人十首好听的歌