integrate videojs-html-player
code taken from https://gitlab.infra4future.de/lukas/videojs-player/-/tree/main It appears to be broken, but I'm not sure if that's because anything is actually wrong or simply because I don't have a correct stream url for testing.
This commit is contained in:
parent
163229b057
commit
646d079a75
|
|
@ -9,6 +9,7 @@ import ./default.nix {
|
|||
description = "Die Workshops auf der noIAA Gegenkonferenz als Livestream";
|
||||
};
|
||||
videosrc = "https://cdn.media.ccc.de/congress/2019/h264-hd/36c3-11175-deu-eng-fra-Hirne_Hacken_hd.mp4";
|
||||
thumbnailurl = "https://gitlab.infra4future.de/lukas/videojs-player/-/raw/main/thumbnail.jpg";
|
||||
header = "Video dingsbums #noIAA";
|
||||
|
||||
irc = {
|
||||
|
|
|
|||
1
pkgs/haccvoc-stage/site/forest.css
Normal file
1
pkgs/haccvoc-stage/site/forest.css
Normal file
|
|
@ -0,0 +1 @@
|
|||
.vjs-theme-forest{--vjs-theme-forest--primary:#6fb04e;--vjs-theme-forest--secondary:#fff}.vjs-theme-forest.vjs-big-play-button:focus,.vjs-theme-forest:hover .vjs-big-play-button{background-color:transparent;background:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='88' height='88' fill='%236fb04e'%3E%3Cpath fill-rule='evenodd' d='M44 88C19.738 88 0 68.262 0 44S19.738 0 44 0s44 19.738 44 44-19.738 44-44 44zm0-85C21.393 3 3 21.393 3 44c0 22.608 18.393 41 41 41s41-18.392 41-41C85 21.393 66.607 3 44 3zm16.063 43.898L39.629 60.741a3.496 3.496 0 01-3.604.194 3.492 3.492 0 01-1.859-3.092V30.158c0-1.299.712-2.483 1.859-3.092a3.487 3.487 0 013.604.194l20.433 13.843a3.497 3.497 0 01.001 5.795zm-1.683-3.311L37.946 29.744a.49.49 0 00-.276-.09.51.51 0 00-.239.062.483.483 0 00-.265.442v27.685c0 .262.166.389.265.442.1.053.299.118.515-.028L58.38 44.414A.489.489 0 0058.6 44a.49.49 0 00-.22-.413z'/%3E%3C/svg%3E")}.vjs-theme-forest .vjs-big-play-button{width:88px;height:88px;background:none;background-repeat:no-repeat;background-position:50%;background:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='88' height='88' fill='%23fff'%3E%3Cpath fill-rule='evenodd' d='M44 88C19.738 88 0 68.262 0 44S19.738 0 44 0s44 19.738 44 44-19.738 44-44 44zm0-85C21.393 3 3 21.393 3 44c0 22.608 18.393 41 41 41s41-18.392 41-41C85 21.393 66.607 3 44 3zm16.063 43.898L39.629 60.741a3.496 3.496 0 01-3.604.194 3.492 3.492 0 01-1.859-3.092V30.158c0-1.299.712-2.483 1.859-3.092a3.487 3.487 0 013.604.194l20.433 13.843a3.497 3.497 0 01.001 5.795zm-1.683-3.311L37.946 29.744a.49.49 0 00-.276-.09.51.51 0 00-.239.062.483.483 0 00-.265.442v27.685c0 .262.166.389.265.442.1.053.299.118.515-.028L58.38 44.414A.489.489 0 0058.6 44a.49.49 0 00-.22-.413z'/%3E%3C/svg%3E");border:none;top:50%;left:50%;margin-top:-44px;margin-left:-44px;color:purple}.vjs-theme-forest .vjs-big-play-button .vjs-icon-placeholder{display:none}.vjs-theme-forest .vjs-button>.vjs-icon-placeholder:before{line-height:1.55}.vjs-theme-forest .vjs-control:not(.vjs-disabled):not(.vjs-time-control):hover{color:var(--vjs-theme-forest--primary);text-shadow:var(--vjs-theme-forest--secondary) 1px 0 10px}.vjs-theme-forest .vjs-control-bar{background:none;margin-bottom:1em;padding-left:1em;padding-right:1em}.vjs-theme-forest .vjs-play-control{font-size:.8em}.vjs-theme-forest .vjs-play-control .vjs-icon-placeholder:before{background-color:var(--vjs-theme-forest--secondary);height:1.5em;width:1.5em;margin-top:.2em;border-radius:1em;color:var(--vjs-theme-forest--primary)}.vjs-theme-forest .vjs-play-control:hover .vjs-icon-placeholder:before{background-color:var(--vjs-theme-forest--primary);color:var(--vjs-theme-forest--secondary)}.vjs-theme-forest .vjs-mute-control{display:none}.vjs-theme-forest .vjs-volume-panel{margin-left:.5em;margin-right:.5em;padding-top:.3em}.vjs-theme-forest .vjs-volume-bar.vjs-slider-horizontal,.vjs-theme-forest .vjs-volume-panel,.vjs-theme-forest .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-slider-active,.vjs-theme-forest .vjs-volume-panel.vjs-volume-panel-horizontal:hover,.vjs-theme-forest .vjs-volume-panel:active .vjs-volume-control.vjs-volume-horizontal,.vjs-theme-forest .vjs-volume-panel:hover,.vjs-theme-forest .vjs-volume-panel:hover .vjs-volume-control.vjs-volume-horizontal{width:3em}.vjs-theme-forest .vjs-volume-level:before{font-size:1em}.vjs-theme-forest .vjs-volume-panel .vjs-volume-control{opacity:1;width:100%;height:100%}.vjs-theme-forest .vjs-volume-bar{background-color:transparent;margin:0}.vjs-theme-forest .vjs-slider-horizontal .vjs-volume-level{height:100%}.vjs-theme-forest .vjs-volume-bar.vjs-slider-horizontal{margin-top:0;margin-bottom:0;height:100%}.vjs-theme-forest .vjs-volume-bar:before{content:"";z-index:0;width:0;height:0;position:absolute;top:0;left:0;border-left:3em solid transparent;border-bottom:2em solid var(--vjs-theme-forest--primary);border-right:0 solid transparent;border-top:0 solid transparent}.vjs-theme-forest .vjs-volume-level{overflow:hidden;background-color:transparent}.vjs-theme-forest .vjs-volume-level:before{content:"";z-index:1;width:0;height:0;position:absolute;top:0;left:0;border-left:3em solid transparent;border-bottom:2em solid var(--vjs-theme-forest--secondary);border-right:0 solid transparent;border-top:0 solid transparent}.vjs-theme-forest .vjs-progress-control:hover .vjs-progress-holder{font-size:1em}.vjs-theme-forest .vjs-play-progress:before{display:none}.vjs-theme-forest .vjs-progress-holder{border-radius:.2em;height:.5em;margin:0}.vjs-theme-forest .vjs-load-progress,.vjs-theme-forest .vjs-load-progress div,.vjs-theme-forest .vjs-play-progress{border-radius:.2em}
|
||||
|
|
@ -14,7 +14,11 @@
|
|||
<link rel="stylesheet" href="style.css">
|
||||
<!-- Place favicon.ico in the root directory -->
|
||||
|
||||
<link href="./video-js.css" rel="stylesheet" />
|
||||
<link rel="stylesheet" href="./video-js.min.css">
|
||||
<link rel="stylesheet" href="./forest.css">
|
||||
<script src="./video.js"></script>
|
||||
<script src="./videojs-contrib-quality-levels.min.js"></script>
|
||||
<script src="./videojs-http-source-selector.min.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<!--[if lt IE 8]>
|
||||
|
|
@ -30,9 +34,13 @@
|
|||
</header>
|
||||
|
||||
<main>
|
||||
<div id="videocontainer">
|
||||
<video id="videoplayer" class="video-js" controls="" data-setup="{}">
|
||||
<source src="{{ site.videosrc }}"></source>
|
||||
<div id="video-div">
|
||||
<video-js id="video-container"
|
||||
class="video-js vjs-theme-forest vjs-liveui"
|
||||
controls
|
||||
data-setup='{ "aspectRatio":"16:9", "autoplay":true}'
|
||||
poster="{{ site.thumbnailurl }}">
|
||||
<source id="video-source" src="{{ site.videosrc }}" type="application/x-mpegURL" >
|
||||
<p>
|
||||
Hier sollte ein Video sein. Das scheint in deinem
|
||||
Browser allerdings irgendwie nicht zu funktionieren.
|
||||
|
|
@ -42,10 +50,54 @@
|
|||
direkt ansehen (e.g. mit <pre>vlc</pre>
|
||||
oder <pre>mplayer</pre>): <pre>{{ site.videosrc }}</pre>
|
||||
</p>
|
||||
</video>
|
||||
</video-js>
|
||||
</div>
|
||||
<script>
|
||||
var player = videojs("videoplayer");
|
||||
var width = window.innerWidth;
|
||||
var height = (width/16)*9;
|
||||
var url = '{{ site.videosrc }}';
|
||||
function UrlExists(url) {
|
||||
var http = new XMLHttpRequest();
|
||||
http.open('HEAD', url, false);
|
||||
http.send();
|
||||
if (http.status != 404){
|
||||
console.log("stream ist online!");
|
||||
var options = {
|
||||
plugins: {
|
||||
httpSourceSelector: {
|
||||
default: 'auto'
|
||||
}
|
||||
}
|
||||
};
|
||||
var player = videojs('video-container', options);
|
||||
player.httpSourceSelector();
|
||||
}
|
||||
else {
|
||||
console.log("stream is offline!");
|
||||
document.getElementById("video-div").innerHTML =
|
||||
"<img src='{{ site.thumbnailurl }}' width="+width+" height="+height+"/>";}
|
||||
}
|
||||
|
||||
try {
|
||||
UrlExists(url);
|
||||
} catch(exception) {
|
||||
if(exception.name == 'NetworkError'){
|
||||
console.log('There was a network error. -> stream is offline');
|
||||
document.getElementById("video-div").innerHTML =
|
||||
"<img src='{{ site.thumbnailurl }}' width="+width+" height="+height+"/>";
|
||||
}
|
||||
else {
|
||||
var options = {
|
||||
plugins: {
|
||||
httpSourceSelector: {
|
||||
default: 'auto'
|
||||
}
|
||||
}
|
||||
};
|
||||
var player = videojs('video-container', options);
|
||||
player.httpSourceSelector();
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</main>
|
||||
|
||||
|
|
|
|||
|
|
@ -97,7 +97,7 @@ main {
|
|||
background-color: blue;
|
||||
}
|
||||
|
||||
main #videocontainer {
|
||||
main #video-div {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
|
@ -105,7 +105,7 @@ main #videocontainer {
|
|||
right: 0;
|
||||
}
|
||||
|
||||
#videoplayer {
|
||||
#video-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
1
pkgs/haccvoc-stage/site/video-js.min.css
vendored
Normal file
1
pkgs/haccvoc-stage/site/video-js.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
58346
pkgs/haccvoc-stage/site/video.js
Normal file
58346
pkgs/haccvoc-stage/site/video.js
Normal file
File diff suppressed because it is too large
Load diff
2
pkgs/haccvoc-stage/site/videojs-contrib-quality-levels.min.js
vendored
Normal file
2
pkgs/haccvoc-stage/site/videojs-contrib-quality-levels.min.js
vendored
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
/*! @name videojs-contrib-quality-levels @version 2.0.9 @license Apache-2.0 */
|
||||
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("video.js"),require("global/document")):"function"==typeof define&&define.amd?define(["video.js","global/document"],t):e.videojsContribQualityLevels=t(e.videojs,e.document)}(this,function(e,t){"use strict";function n(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}e=e&&e.hasOwnProperty("default")?e.default:e,t=t&&t.hasOwnProperty("default")?t.default:t;var r=function(r){var i,l;function o(){var i,l=n(n(i=r.call(this)||this));if(e.browser.IS_IE8)for(var s in l=t.createElement("custom"),o.prototype)"constructor"!==s&&(l[s]=o.prototype[s]);return l.levels_=[],l.selectedIndex_=-1,Object.defineProperty(l,"selectedIndex",{get:function(){return l.selectedIndex_}}),Object.defineProperty(l,"length",{get:function(){return l.levels_.length}}),l||n(i)}l=r,(i=o).prototype=Object.create(l.prototype),i.prototype.constructor=i,i.__proto__=l;var s=o.prototype;return s.addQualityLevel=function(n){var r=this.getQualityLevelById(n.id);if(r)return r;var i=this.levels_.length;return r=new function n(r){var i=this;if(e.browser.IS_IE8)for(var l in i=t.createElement("custom"),n.prototype)"constructor"!==l&&(i[l]=n.prototype[l]);return i.id=r.id,i.label=i.id,i.width=r.width,i.height=r.height,i.bitrate=r.bandwidth,i.enabled_=r.enabled,Object.defineProperty(i,"enabled",{get:function(){return i.enabled_()},set:function(e){i.enabled_(e)}}),i}(n),""+i in this||Object.defineProperty(this,i,{get:function(){return this.levels_[i]}}),this.levels_.push(r),this.trigger({qualityLevel:r,type:"addqualitylevel"}),r},s.removeQualityLevel=function(e){for(var t=null,n=0,r=this.length;n<r;n++)if(this[n]===e){t=this.levels_.splice(n,1)[0],this.selectedIndex_===n?this.selectedIndex_=-1:this.selectedIndex_>n&&this.selectedIndex_--;break}return t&&this.trigger({qualityLevel:e,type:"removequalitylevel"}),t},s.getQualityLevelById=function(e){for(var t=0,n=this.length;t<n;t++){var r=this[t];if(r.id===e)return r}return null},s.dispose=function(){this.selectedIndex_=-1,this.levels_.length=0},o}(e.EventTarget);for(var i in r.prototype.allowedEvents_={change:"change",addqualitylevel:"addqualitylevel",removequalitylevel:"removequalitylevel"},r.prototype.allowedEvents_)r.prototype["on"+i]=null;var l=function(t){return n=this,e.mergeOptions({},t),i=n.qualityLevels,l=new r,n.on("dispose",function e(){l.dispose(),n.qualityLevels=i,n.off("dispose",e)}),n.qualityLevels=function(){return l},n.qualityLevels.VERSION="2.0.9",l;var n,i,l};return(e.registerPlugin||e.plugin)("qualityLevels",l),l.VERSION="2.0.9",l});
|
||||
7
pkgs/haccvoc-stage/site/videojs-http-source-selector.min.js
vendored
Normal file
7
pkgs/haccvoc-stage/site/videojs-http-source-selector.min.js
vendored
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
/**
|
||||
* videojs-http-source-selector
|
||||
* @version 1.1.6
|
||||
* @copyright 2019 Justin Fujita <Justin@pivotshare.com>
|
||||
* @license MIT
|
||||
*/
|
||||
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("video.js")):"function"==typeof define&&define.amd?define(["video.js"],t):(e=e||self)["videojs-http-source-selector"]=t(e.videojs)}(this,function(r){"use strict";function o(e,t){e.prototype=Object.create(t.prototype),(e.prototype.constructor=e).__proto__=t}function s(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}var e=(r=r&&r.hasOwnProperty("default")?r.default:r).getComponent("MenuItem"),t=r.getComponent("Component"),a=function(n){function e(e,t){return t.selectable=!0,t.multiSelectable=!1,n.call(this,e,t)||this}o(e,n);var t=e.prototype;return t.handleClick=function(){var e=this.options_;console.log("Changing quality to:",e.label),n.prototype.handleClick.call(this);for(var t=this.player().qualityLevels(),o=0;o<t.length;o++)e.index==t.length?t[o].enabled=!0:e.index==o?t[o].enabled=!0:t[o].enabled=!1},t.update=function(){var e=this.player().qualityLevels().selectedIndex;this.selected(this.options_.index==e)},e}(e);t.registerComponent("SourceMenuItem",a);var u=r.getComponent("MenuButton"),n=function(i){function e(e,t){var o;o=i.call(this,e,t)||this,u.apply(s(o),arguments);var n=o.player().qualityLevels();if(t&&t.default)if("low"==t.default)for(var l=0;l<n.length;l++)n[l].enabled=0==l;else if(t.default="high")for(l=0;l<n.length;l++)n[l].enabled=l==n.length-1;return o.player().qualityLevels().on(["change","addqualitylevel"],r.bind(s(o),o.update)),o}o(e,i);var t=e.prototype;return t.createEl=function(){return r.dom.createEl("div",{className:"vjs-http-source-selector vjs-menu-button vjs-menu-button-popup vjs-control vjs-button"})},t.buildCSSClass=function(){return u.prototype.buildCSSClass.call(this)+" vjs-icon-cog"},t.update=function(){return u.prototype.update.call(this)},t.createItems=function(){for(var e=[],t=this.player().qualityLevels(),o=[],n=0;n<t.length;n++){var l=t.length-(n+1),i=l===t.selectedIndex,r=""+l,s=l;t[l].height?(r=t[l].height+"p",s=parseInt(t[l].height,10)):t[l].bitrate&&(r=Math.floor(t[l].bitrate/1e3)+" kbps",s=parseInt(t[l].bitrate,10)),0<=o.indexOf(r)||(o.push(r),e.push(new a(this.player_,{label:r,index:l,selected:i,sortVal:s})))}return 1<t.length&&e.push(new a(this.player_,{label:"Auto",index:t.length,selected:!1,sortVal:99999})),e.sort(function(e,t){return e.options_.sortVal<t.options_.sortVal?1:e.options_.sortVal>t.options_.sortVal?-1:0}),e},e}(u),l={},i=r.registerPlugin||r.plugin,c=function(e){var t=this;this.ready(function(){!function(n,e){if(n.addClass("vjs-http-source-selector"),console.log("videojs-http-source-selector initialized!"),console.log("player.techName_:"+n.techName_),"Html5"!=n.techName_)return;n.on(["loadedmetadata"],function(e){if(n.qualityLevels(),r.log("loadmetadata event"),"undefined"==n.videojs_http_source_selector_initialized||1==n.videojs_http_source_selector_initialized)console.log("player.videojs_http_source_selector_initialized == true");else{console.log("player.videojs_http_source_selector_initialized == false"),n.videojs_http_source_selector_initialized=!0;var t=n.controlBar,o=t.getChild("fullscreenToggle").el();t.el().insertBefore(t.addChild("SourceMenuButton").el(),o)}})}(t,r.mergeOptions(l,e))}),r.registerComponent("SourceMenuButton",n),r.registerComponent("SourceMenuItem",a)};return i("httpSourceSelector",c),c.VERSION="1.1.6",c});
|
||||
|
|
@ -16,6 +16,8 @@ let
|
|||
|
||||
# should be able to use anything videojs understands
|
||||
videosrc = "https://cdn.media.ccc.de/congress/2019/h264-hd/36c3-11175-deu-eng-fra-Hirne_Hacken_hd.mp4";
|
||||
thumbnailurl = "https://gitlab.infra4future.de/lukas/videojs-player/-/raw/main/thumbnail.jpg";
|
||||
|
||||
header = "Video dingsbums #noIAA";
|
||||
|
||||
irc = {
|
||||
|
|
|
|||
Loading…
Reference in a new issue