1
我有一個關於videojs的高清切換插件（功能）的問題。通常情況下，HD狀態是激活的，如果我點擊HD按鈕。但我們希望加載HD Source onload，並且HD Button狀態（css）應該處於活動狀態。有人可以幫助我們嗎？我們做了一個測試的jsfiddle。你可以在這裏找到 - >http://jsfiddle.net/timokuehne/ps22huvp/Videojs Player HD切換變化
這是我們改變之前的代碼。我們爲自己解決了我們的問題。您可以在下面的答案中找到解決方案。
//Javascript Start
function HDtoggle (noHDsrc,HDsrc) {
\t \t var HD1 = false;
\t \t /* It is the variable which tells us that that HD video is getting played or not.
\t \t \t HD1 = false ---> video is not HD
\t \t \t 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);
}
});
\t \t \t /* Changing sources by clicking on HD button */
\t \t \t /* This function is called when HD button is clicked */
videojs.HD.prototype.onClick = function() {
\t
\t
\t 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;}";
\t \t /* Changing the HD button to initial styling when we play non HD video by clicking on HD button. */
\t \t document.body.appendChild(css);
videojs("example_video_1").src([{type: "video/mp4", src: noHDsrc }]);
\t \t /* noHDsrc is the url provided in the function arguments */
videojs("example_video_1").play();
\t \t /* 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;}";
\t \t /* 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 }]);
\t \t /* HDsrc is the url provided in the function arguments. */
videojs("example_video_1").play();
\t \t /* This automatically plays the video when we click on HD button to change the source. */
HD1 = true;
}
\t
};
\t \t /* Create HD button */
\t \t 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);
};
\t \t \t /* Add HD button to the control bar */
\t \t 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 */
\t \t 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>