具有相同功能的多个目标

Question

我试着使用视频JS HD Toggle插件向我的用户提供更多的功能，但我知道如何在同一个页面上有两个视频，并在我的播放器上使用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

如果您只是想让您的代码在尽可能多的视频中工作，那么这是非常简单的，并且是通过循环完成的。你只需要抓取页面中的视频，然后循环浏览它们。我首先使用jquery (在本例中为$(.video-js) )按类名选择视频，然后使用jquery的.each (https://api.jquery.com/each/)遍历它们，然后调用每个视频的HDtoggle()函数，并将唯一的视频id作为名为videoID的参数传递。然后将video_1实例替换为该参数。对于这两种视频，这里都有一个有用的花招：

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

创建循环是编程最重要的部分之一。只要它们具有视频-js类和唯一的id，您添加的视频就可以使用了。

Answer 2

创建循环是编程最重要的部分之一。

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