Videojs Player HD切换更改
Videojs Player HD Toggle changes
我有一个关于videojs的HD切换插件(函数)的问题。如果我点击HD按钮,通常HD状态是活动的。但是我们想要加载HD Source onload,并且HD按钮状态(css)应该是活动的。有人能帮我们吗?我们制作了一个jsfiddle进行测试。你可以在这里找到它->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>
我们解决了我们的问题。这是我们更改后的完整代码。你可以点击黑色的"运行代码段按钮"来查看操作中的更改
//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>
相关文章:
- 如何删除视频's缩略图时's加载在JW Player's闪光模式
- 如果window.location.href.indexOf('player=1')添加样式
- 当客户端在JW Player中恢复丢失的连接时,会自动重新连接
- Youtube Player API iframe Embed | player.clearVideo() not wo
- AngularJS中Spotify Web Player风格的UI
- 如何禁用JWPlayer中的HD按钮
- 使用自定义按钮控制Soundcloud HTML5 Widget Player
- 在 ANGULARJS 中:s.Id as s.Name for s 在 Player 中显示 playerName i
- Brightcove HTML5 Player 全屏事件
- 使用 JavaScript 自动安装 Flash Player
- `player.animate( [ {transform: "rotate(10)"`?
- 如何在html页面上使用Flash Player渲染视频/音频文件
- 使用 JavaScript for Flash Player 而不是嵌套对象
- Facebook Video Player API
- Mozilla在Flash Player中打开YouTube视频
- 如何使用DZ.player.getTrackList
- 在 iframe 中加载 Youtube Player API
- YouTube JavaScript Player API seekTo() unreliable
- 使用JW Player播放SkyRadio
- Videojs Player HD切换更改