论坛首页 › 特效动画 › 十人十首好听的歌

klxf 发表于 2025-3-30 20:34:20

十人十首好听的歌

本帖最后由 klxf 于 2025-3-30 23:21 编辑 <br /><br /><style>
       #papa {
      margin: 130px-120px;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-31 12:03:06

欣赏友友的精彩！

jiajiazhuangcun 发表于 2025-4-5 21:17:55

感谢分享，带来新鲜观点

mewomen 发表于 2025-4-10 11:08:07

分享超给力，点赞没商量

mewomen 发表于 2025-4-15 20:09:41

分享超棒，点赞支持呀

heimeigui 发表于 7 天前

支持分享，超有意义内容

ufexide 发表于 前天 11:01

感谢分享，拓宽知识视野

查看完整版本: 十人十首好听的歌