javascript - Videojs Player HD Toggle changes -
javascript - Videojs Player HD Toggle changes -
i have question hd toggle plugin (function) of videojs. hd state active, if click on hd button. want load hd source onload , hd button state (css) should active. can help us? made jsfiddle testing. can find here -> http://jsfiddle.net/timokuehne/ps22huvp/
this code before our changes. solved our problem ourself. can find solution in reply below.
class="snippet-code-js lang-js prettyprint-override">//javascript start function hdtoggle (nohdsrc,hdsrc) { var hd1 = false; /* variable tells that hd video getting played or not. hd1 = false ---> video not hd hd1 = true ----> video hd */ videojs.hd = videojs.button.extend({ /* @constructor */ init: function(player, options){ videojs.button.call(this, player, options); this.on('click', this.onclick); } }); /* changing sources clicking on hd button */ /* function called when hd button clicked */ videojs.hd.prototype.onclick = function() { if (hd1) { /* if video 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 hd button initial styling when play non hd video clicking on hd button. */ document.body.appendchild(css); videojs("example_video_1").src([{type: "video/mp4", src: nohdsrc }]); /* nohdsrc url provided in function arguments */ videojs("example_video_1").play(); /* automatically plays video when click on hd button alter source. */ hd1 = false; } else { /* if video 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;}"; /* css applies when hd video played. can alter bluish color of hd button changing value of color above. if remove shadow hd button, remove text-shadow above. */ document.body.appendchild(css); videojs("example_video_1").src([{type: "video/mp4", src: hdsrc }]); /* hdsrc url provided in function arguments. */ videojs("example_video_1").play(); /* automatically plays video when click on hd button alter 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 }; homecoming videojs.component.prototype.createel(null, props); }; /* add together hd button command bar */ var hd; videojs.plugin('hd', function() { var options = { 'el' : createhdbutton() }; hd = new videojs.hd(this, options); this.controlbar.el().appendchild(hd.el()); }); /* set 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'); class="snippet-code-css lang-css prettyprint-override">/*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; } class="snippet-code-html lang-html prettyprint-override"><!--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>
we solved our problem. here finish code after our changes. can click on black "run code snippet button" see changes in action.
class="snippet-code-js lang-js prettyprint-override">//javascript start function hdtoggle (nohdsrc,hdsrc) { var hd1 = true; /* variable tells that hd video getting played or not. hd1 = false ---> video not hd hd1 = true ----> video hd */ videojs.hd = videojs.button.extend({ /* @constructor */ init: function(player, options){ videojs.button.call(this, player, options); this.on('click', this.onclick); } }); /* changing sources clicking on hd button */ /* function called when hd button clicked */ videojs.hd.prototype.onclick = function() { if (hd1) { /* if video 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 hd button initial styling when play non hd video clicking on hd button. */ document.body.appendchild(css); videojs("example_video_1").src([{type: "video/mp4", src: nohdsrc }]); /* nohdsrc url provided in function arguments */ videojs("example_video_1").play(); /* automatically plays video when click on hd button alter source. */ hd1 = false; } else{ /* if video 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;}"; /* css applies when hd video played. can alter bluish color of hd button changing value of color above. if remove shadow hd button, remove text-shadow above. */ document.body.appendchild(css); videojs("example_video_1").src([{type: "video/mp4", src: hdsrc }]); /* hdsrc url provided in function arguments. */ videojs("example_video_1").play(); /* automatically plays video when click on hd button alter 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 }; homecoming videojs.component.prototype.createel(null, props); }; /* add together hd button command bar */ var hd; videojs.plugin('hd', function() { var options = { 'el' : createhdbutton() }; hd = new videojs.hd(this, options); this.controlbar.el().appendchild(hd.el()); }); /* set 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); }); class="snippet-code-css lang-css prettyprint-override">/*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; } class="snippet-code-html lang-html prettyprint-override"><!--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>
javascript css video html5-video
Comments
Post a Comment