文章/答案/技术大牛

发布

问视频播放器HD切换更改
EN

Stack Overflow用户

提问于 2014-10-22 05:07:50

回答 1查看 1.2K关注 0票数 1

我有一个问题关于高清切换插件(功能)的视频of。通常，如果我单击HD按钮，HD状态是活动的。但是我们希望加载和HD Button状态(css)应该是活动的。有人能帮我们吗？我们做了个试验用的小提琴。你可以在这里找到它，-> http://jsfiddle.net/timokuehne/ps22huvp/

，这是我们更改之前的代码。我们为自己解决了问题。您可以在下面的答案中找到解决方案。

//Javascript Start

function HDtoggle (noHDsrc,HDsrc) {
         
		 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() {
         	
         	
         	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("example_video_1").src([{type: "video/mp4", src: noHDsrc }]);
		 /* noHDsrc is the url provided in the function arguments */
         videojs("example_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("example_video_1").src([{type: "video/mp4", src: HDsrc }]); 
		 /* HDsrc is the url provided in the function arguments. */
         videojs("example_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("example_video_1", {
              plugins : { HD : {} }
            });
             
}
    
HDtoggle('https://videolyser.r.worldssl.net/videolyser/1016299/2106393.sd_source.mp4','http://test.journalistenaktivisten.de/video/video1.HDsrc.mp4');

/*CSS Start*/

.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;

         }

<!--HTML Start-->

<link href="http://vjs.zencdn.net/4.9/video-js.css" rel="stylesheet"/>
<script src="http://vjs.zencdn.net/4.9/video.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<video id="example_video_1" class="video-js vjs-default-skin vjs-big-play-centered" width="640" height="360" controls>
     <source src="https://videolyser.r.worldssl.net/videolyser/1016299/2106393.sd_source.mp4" type='video/mp4' />
     <source src="http://test.journalistenaktivisten.de/video/video1.HDsrc.mp4" type='video/mp4' />
     
</video>

html5-video

javascript

css

video

回答 1

Stack Overflow用户

发布于 2014-10-22 07:03:26

我们解决了我们的问题。这是我们更改后的完整代码。您可以单击黑色的“运行代码片段按钮”来查看Action.中的更改。

//Javascript Start

function HDtoggle (noHDsrc,HDsrc) {
         
		 var HD1 = true;
		 /* 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() {
  	
         	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("example_video_1").src([{type: "video/mp4", src: noHDsrc }]);
		 /* noHDsrc is the url provided in the function arguments */
         videojs("example_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("example_video_1").src([{type: "video/mp4", src: HDsrc }]); 
		 /* HDsrc is the url provided in the function arguments. */
         videojs("example_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("example_video_1", {
              plugins : { HD : {} }
            });
             
}

$( document ).ready(function() {
HDtoggle('https://videolyser.r.worldssl.net/videolyser/1016299/2106393.sd_source.mp4','http://test.journalistenaktivisten.de/video/video1.HDsrc.mp4');
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;}";
    document.body.appendChild(css);
});

/*CSS Start*/

.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;

         }

<!--HTML Start-->

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="http://vjs.zencdn.net/4.9/video-js.css" rel="stylesheet"/>
<script src="http://vjs.zencdn.net/4.9/video.js"></script>
<video id="example_video_1" class="video-js vjs-default-skin vjs-big-play-centered" width="640" height="360" controls>

     <source src="http://test.journalistenaktivisten.de/video/video1.HDsrc.mp4" type='video/mp4' />
     <source src="https://videolyser.r.worldssl.net/videolyser/1016299/2106393.sd_source.mp4" type='video/mp4' />
</video>

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/26500647

复制

相似问题

问视频播放器HD切换更改
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问视频播放器HD切换更改EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问视频播放器HD切换更改
EN