具有相同功能的多个目标

Question

我尝试使用 Video JS HD Toggle Plugin 为我的用户提供更多功能，但我确实知道如何在同一页面上显示两个视频并在我的播放器上使用 HD 插件。如何更改代码并将其用于多个视频？

        
        function HDtoggle () {
           
     var HD1 = false;
     /* It is the variable which tells us that that HD video is getting played or not.
     HD1 = false ---> video is not HD
     HD1 = true ----> video is HD */
          
             videojs.HD = videojs.Button.extend({
           /* @constructor */
               init: function(player, options){
                 videojs.Button.call(this, player, options);
                 this.on('click', this.onClick);
               }
             });
            
   /* Changing sources by clicking on HD button */
   /* This function is called when HD button is clicked */
            videojs.HD.prototype.onClick = function() {
          
          
         var HDsrc = $("#video_1").find( "video" ).attr("HD"); 
   /* Value of HD attribute in video tag is saved in HDsrc. */
         var noHDsrc = $("#video_1").find( "video" ).attr("nonHD");
   /* Value of nonHD attribute in video tag is saved in noHDsrc. */
          
   if (HD1) { /* If video is not HD */
         var css = document.createElement("style");
         css.type = "text/css";
         css.innerHTML = ".vjs-control.vjs-HD-button { color: silver; font-weight:normal; text-shadow: 0 0 5em #fff;}";
    /* Changing the HD button to initial styling when we play non HD video by clicking on HD button.*/
         document.body.appendChild(css);
         videojs("video_1").src([{type: "video/mp4", src: noHDsrc }]);
   
         videojs("video_1").play();
   /* This automatically plays the video when we click on HD button to change the source.*/
         HD1 = false;
         }
         else { /* if video is HD */
         var css = document.createElement("style");
         css.type = "text/css";
         css.innerHTML = ".vjs-control.vjs-HD-button { color: #36D8DE; font-weight:bold; text-shadow: 0 0 1em #fff;}";
  /*This css applies when HD video is played. You can easily change the blue color of HD button by changing the value of color above. If you would like to remove the shadow from HD button, remove text-shadow from above.*/
  document.body.appendChild(css);
         videojs("video_1").src([{type: "video/mp4", src: HDsrc }]);
         videojs("video_1").play();
          /*This automatically plays the video when we  click on HD button to change the source.*/
   HD1 = true;
         }
          
         };
         
   /* Create HD button */
   var createHDButton = function() {
               var props = {
                   className: 'vjs-HD-button vjs-control',
                   innerHTML: '<div class="vjs-control-content">' + ('HD') + '</div>',
                   role: 'button',
                   'aria-live': 'polite', 
                   tabIndex: 0
                 };
               
               return videojs.Component.prototype.createEl(null, props);
             };
         
   /* Add HD button to the control bar */
         var HD;
             videojs.plugin('HD', function() {
               var options = { 'el' : createHDButton() };
               HD = new videojs.HD(this, options);
               this.controlBar.el().appendChild(HD.el());
             });
         
          /* Set Up Video.js Player */
   var vid = videojs("video_1", {
              plugins : { HD : {} }
            });
             
}
    HDtoggle();

 .vjs-default-skin .vjs-control.vjs-HD-button {
         display: block;
   font-size: 1.5em;
         line-height: 2;
         position: relative;
         top: 0;
         float:right;
   left: 10px;
         height: 100%;
         text-align: center;
         cursor: pointer;
         }

<script src="http://vjs.zencdn.net/4.6.4/video.js"></script>
<link href="http://vjs.zencdn.net/4.6.4/video-js.css" rel="stylesheet"/>


 <video id="video_1" class="video-js vjs-default-skin vjs-big-play-centered" HD="http://video-js.zencoder.com/oceans-clip.mp4" nonHD="http://video-js.zencoder.com/oceans-clip.mp4" width="640" height="480" controls>
         <source type="video/mp4" src="http://video-js.zencoder.com/oceans-clip.mp4">
      </video>

 <video id="video_2" class="video-js vjs-default-skin vjs-big-play-centered" HD="http://video-js.zencoder.com/oceans-clip.mp4" nonHD="http://video-js.zencoder.com/oceans-clip.mp4" width="640" height="480" controls>
         <source type="video/mp4" src="http://video-js.zencoder.com/oceans-clip.mp4">
      </video>

Answer 1

如果您只是想让您的代码在尽可能多的可用视频中运行，那么这非常简单，可以通过循环来完成。您只需要抓取页面中的视频并循环播放即可。我首先选择了 class 名称和 jquery 的视频，在本例中是 $(.video-js)，然后用 jquery 的 .each 循环播放它们（https://api.jquery.com/each/ )，然后为每个调用 HDtoggle() 函数，并将唯一的视频 ID 作为参数传递给 videoID。然后用该参数替换 video_1 的实例。这是一个 fiddle，它适用于两个视频：

http://jsfiddle.net/parnj1Lj/2/

创建循环是编程中最重要的部分之一。这现在适用于您添加的任意数量的视频，只要它们具有 video-js class 和唯一 ID。

Answer 2

Creating loops is one of the most important parts of programming

是的，但是为一般用途而不是为一个硬编码示例创建一个插件更好:)

具有相同功能的多个目标

More than one target with the same function

javascript

video