Question

我的网站上有一个HTML5视频播放器，有三个视频。我发现的代码每个网页只支持一个视频，但我设法做了一个黑客，使每个页面都有多个视频。黑客效率非常低，我相信有一种更优雅的方式来实现它。以下是我的代码的外观：

 // Video
        var video = document.getElementById("video");
        var video2 = document.getElementById("video2");
        var video3 = document.getElementById("video3");

        // Buttons
        var playButton = document.getElementById("play-pause");
        var playButton2 = document.getElementById("play-pause2");
        var playButton3 = document.getElementById("play-pause3");

        // Event listener for the play/pause button 1
        playButton.addEventListener("click", function () {
            if (video.paused == true) {
                // Play the video
                video.play();
                // Update the button text to 'Pause'
                document.getElementById("play-pause").className = "pause";
            } else {
                // Pause the video
                video.pause();

                // Update the button text to 'Play'
                document.getElementById("play-pause").className = "play";
            }
        });

        // Event listener for the play/pause button 2
        playButton2.addEventListener("click", function () {
            if (video2.paused == true) {
                // Play the video
                video2.play();
                // Update the button text to 'Pause'
                document.getElementById("play-pause2").className = "pause";
            } else {
                // Pause the video
                video2.pause();

                // Update the button text to 'Play'
                document.getElementById("play-pause2").className = "play";
            }
        });

        // Event listener for the play/pause button 3
        playButton3.addEventListener("click", function () {
            if (video3.paused == true) {
                // Play the video
                video3.play();
                // Update the button text to 'Pause'
                document.getElementById("play-pause3").className = "pause";
            } else {
                // Pause the video
                video3.pause();

                // Update the button text to 'Play'
                document.getElementById("play-pause3").className = "play";
            }
        });

    }

正如您所看到的那样，我只是简单地复制事件监听器并创建新变量。必须有一种方法根据所选的特定Div选择目标，可能是通过指定类的路径？即.container .video1 .play？

我遇到的第二个问题是在视频播放结束后将暂停按钮和海报图像恢复为原始状态。

以下是放置代码和内容的网站：

http://www.glowdigital.net/index.php?page=snap-inspire

非常感谢任何帮助！

谢谢

Answer 1

必须有一种方法可以根据所选的特定Div选择目标，可能是通过指定类的路径？

是的，事件处理一组元素有更好的方法。

事件委托是指事件监听器在目标元素具有共同点的祖先元素上注册的时间。
可以通过跟踪索引号来使用数组。

以下演示将讨论后者。

我遇到的第二个问题是在视频播放结束后将暂停按钮和海报图像恢复为原始状态。

有很多方法可以解决这个问题。该演示演示了如何使用CSS ::after伪元素和add/removeClass()方法。

我还添加了独家播放功能。如果玩家正在玩和另一位玩家开始玩，正在玩的玩家将停止游戏。

详情在演示

中发表

演示

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1, user-scalable=no">
  <title>HTML5 Video Player Group - Exclusive Playback</title>
  <style>
    button {
      color: rgba(66, 200, 150, 1);
      background: none;
      border: 0;
      font: 400 24px/1 Verdana;
      outline: 0;
      cursor: pointer;
    }
    
    button:hover,
    button:active,
    button:focus {
      color: #0F3
    }
    
    .play.toPause::after {
      content: '⏸';
      font: inherit;
    }
    
    .play.toPlay::after {
      content: '▶';
      font: inherit;
    }
    
    .stop::after {
      content: '⏹';
      font: inherit;
    }
  </style>
</head>

<body>
  <header> </header>
  <main id="media">
    <figure class="vSection">
      <video id="v0" width="320" height="auto" poster="http://www.glowdigital.net/images/projects/snap-inspire-1.jpg">
         <source src="http://www.glowdigital.net/images/projects/snap-inspire-1.webm" type="video/webm">
         <source src="http://www.glowdigital.net/images/projects/snap-inspire-1.mp4" type="video/mp4">
      </video>
      <figcaption class="controls">
        <button type="button" class="play toPlay"></button>
        <button type="button" class="stop"></button>
      </figcaption>
    </figure>
    <figure class="vSection">
      <video id="v1" width="320" height="auto" poster="http://www.glowdigital.net/images/projects/snap-inspire-2.jpg">
         <source src="http://www.glowdigital.net/images/projects/snap-inspire-2.webm" type="video/webm">
         <source src="http://www.glowdigital.net/images/projects/snap-inspire-2.mp4" type="video/mp4">
      </video>
      <figcaption class="controls">
        <button type="button" class="play toPlay"></button>
        <button type="button" class="stop"></button>
      </figcaption>
    </figure>
    <figure class="vSection">
      <video id="v2" width="320" height="auto" poster="http://www.glowdigital.net/images/projects/snap-inspire-3.jpg">
         <source src="http://www.glowdigital.net/images/projects/snap-inspire-3.webm" type="video/webm">
         <source src="http://www.glowdigital.net/images/projects/snap-inspire-3.mp4" type="video/mp4">
      </video>
      <figcaption class="controls">
        <button type="button" class="play toPlay"></button>
        <button type="button" class="stop"></button>
      </figcaption>
    </figure>
  </main>
  <footer>&nbsp;</footer>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script>
    // Gather all <video> into a NodeList then convert it into an array
    var videos = Array.from(document.querySelectorAll('video'));

    /* map() through array assigning an id to each <video>
    || vArray is returned; an array of <video id='..'>
    */
    var vArray = videos.map(function(vid, idx) {

      var player = document.getElementById(vid.id);

      return player;

    });


    // When a button.play is clicked...			
    $('.play').on('click', function(e) {
      // Get it's index number
      var idx = $('.play').index(this);
      /* Invoke functiom excPlay passing the vArray and idx
      || It stops any player if it's playing and the prepares
      || the specified player to play. See bottom of source
      || for details
      */
      var player = excPlay(vArray, idx);
      // If paused or ended...			
      if (player.paused || player.ended) {
        // Play video
        player.play();
        // Switch the classes for the all buttons to the paused state
        $('.play').removeClass('toPause').addClass('toPlay');
        // Switch this button to the playing state
        $(e.target).addClass('toPause').removeClass('toPlay');

      }
      //...Otherwise...
      else {
        // Pause the video
        player.pause();
        // Switch all buttons to the paused state
        $('.play').removeClass('toPause').addClass('toPlay');

      }
      // Click thebutton.stop...
      $('.stop').on('click', function(e) {
        // Get index number
        var index = $('.stop').index(this);
        // See line 73
        var player = excPlay(vArray, index);
        // Pause the video
        player.pause();
        // Set video's time back to 0
        player.currentTime = 0;
      });

      // If a video ends...
      $('video').on('ended', function() {
        // Reset the time
        this.currentTime = 0;
        // Get its poster value...
        var image = this.poster;
        // ,,,then set it
        this.poster = image;

        // Set all buttons to pause state
        $('.play').removeClass('toPause').addClass('toPlay');
      });

      /* Pass in an array of video objects and the index number of 
      || thevideo you want to play.
      */
      function excPlay(array, exclude) {
        // map() the array of videos; on each loop...
        array.map(function(video, index) {
          // If the video isn't the video you want to play...
          if (index != exclude) {
            // Get the video's poster
            var image = video.poster;
            // Set the time back to the beginning
            video.currentTime = 0;
            // Pauase video
            video.pause();
            // Reset the poster image
            video.poster = image;

          }

        });
        // Toggle the classes on the play button
        $('.play').removeClass('toPause').addClass('toPlay');
        // Return the selected player or nothing
        return array[exclude] || null;
      }

    });
  </script>
</body>

</html>

为HTML5视频播放器优化的Javascript

1 个答案:

演示