hydrar/mistserver
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Embed: smaller design for controls

Browse source
This commit is contained in:
Cat 2016-12-14 10:53:36 +01:00 • committed by Thulinma
parent b3c6aedf5b
commit c626fb2855
4 changed files with 174 additions and 35 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

95
embed/core.js
View file

@ -52,6 +52,7 @@ MistPlayer.prototype.onready = function(dothis){
};
MistPlayer.prototype.play = false;
MistPlayer.prototype.pause = false;
MistPlayer.prototype.paused = false;
MistPlayer.prototype.volume = false;
MistPlayer.prototype.loop = false;
MistPlayer.prototype.fullscreen = false;
@ -99,7 +100,27 @@ MistPlayer.prototype.setTracks = function(usetracks){
}
var time = this.element.currentTime;
this.updateSrc(urlAddParam(this.options.src,usetracks));
var newurl;
if (this.options.source.type == 'html5/application/vnd.apple.mpegurl') { //for HLS, use a different format for track selection
newurl = this.options.src.split('/');
var m3u8 = newurl.pop(); //take this off now, it will be added back later
for (var i in usetracks) {
//for audio or video tracks, just add the tracknumber between slashes
switch (i) {
case 'audio':
case 'video':
if (usetracks[i] == 0) { continue; }
newurl.push(usetracks[i]);
break;
}
}
newurl.push(m3u8); //put back index.m3u8
newurl = newurl.join('/');
}
else {
newurl = urlAddParam(this.options.src,usetracks);
}
this.updateSrc(newurl);
if (this.element.readyState) {
this.element.load();
}
@ -175,7 +196,10 @@ MistPlayer.prototype.buildMistControls = function(){
var zoom = options.width/480;
if (zoom < 1) {
zoom = Math.max(zoom,0.5);
controls.style.zoom = zoom;
if ('zoom' in controls.style) { controls.style.zoom = zoom; }
else {
controls.className += ' smaller'; //if css doesn't support zoom, apply smaller class to use smaller controls
}
}
else { zoom = 1; }
ele.style['min-width'] = zoom*400+'px';
@ -206,7 +230,7 @@ MistPlayer.prototype.buildMistControls = function(){
progress.getPos = function(e){
if (!isFinite(ele.duration)) { return 0; }
var style = progress.currentStyle || window.getComputedStyle(progress, null);
var zoom = Number(controls.style.zoom == '' ? 1 : controls.style.zoom);
var zoom = Number(!('zoom' in controls.style) || controls.style.zoom == '' ? 1 : controls.style.zoom);
var pos0 = progress.getBoundingClientRect().left - parseInt(style.borderLeftWidth,10);
var perc = (e.clientX - pos0 * zoom) / progress.offsetWidth / zoom;
@ -268,7 +292,13 @@ MistPlayer.prototype.buildMistControls = function(){
sound.appendChild(volume);
sound.getPos = function(ypos){
var style = this.currentStyle || window.getComputedStyle(this, null);
return 1 - Math.min(1,Math.max(0,(ypos - sound.getBoundingClientRect().top - parseInt(style.borderTopWidth,10)) / sound.offsetHeight));
var zoom = Number(!('zoom' in controls.style) || controls.style.zoom == '' ? 1 : controls.style.zoom);
var pos0 = sound.getBoundingClientRect().top - parseInt(style.borderTopWidth,10);
var perc = (ypos - pos0 * zoom) / sound.offsetHeight / zoom;
var secs = Math.max(0,perc) * ele.duration;
return 1 - Math.min(1,Math.max(0,perc));
}
volume.className = 'volume';
sound.title = 'Volume';
@ -328,14 +358,15 @@ MistPlayer.prototype.buildMistControls = function(){
buttons.className = 'column';
controls.appendChild(buttons);
if ((this.setTracks(false)) && ((this.tracks.audio.length) || (this.tracks.video.length) || (this.tracks.subtitle.length)) && ((this.options.source.type != 'html5/application/vnd.apple.mpegurl') && (this.options.source.type != 'html5/video/ogg'))) {
if ((this.setTracks(false)) && ((this.tracks.audio.length) || (this.tracks.video.length) || (this.tracks.subtitle.length)) && (this.options.source.type != 'html5/video/ogg')) {
/*
- the player supports setting tracks;
- there is something to choose
- it's not HLS, which would have to use a different way of switching tracks than this script currently uses
- it's not OGG, which doesn't have track selection yet
*/
//prepare the html stuff
var tracks = this.tracks;
var tracksc = document.createElement('div');
tracksc.innerHTML = 'Tracks';
@ -347,7 +378,7 @@ MistPlayer.prototype.buildMistControls = function(){
settings.className = 'settings';
me.trackselects = {};
for (var i in tracks) {
for (var i in tracks) { //for each track type (video, audio, subtitle..)
if (tracks[i].length) {
var l = document.createElement('label');
settings.appendChild(l);
@ -359,10 +390,12 @@ MistPlayer.prototype.buildMistControls = function(){
l.appendChild(s);
me.trackselects[i] = s;
s.setAttribute('data-type',i);
for (var j in tracks[i]) {
for (var j in tracks[i]) { //for each track
var o = document.createElement('option');
s.appendChild(o);
o.value = tracks[i][j].trackid;
//make up something logical for the track name
var name;
if ('name' in tracks[i][j]) {
name = tracks[i][j].name;
@ -789,7 +822,7 @@ function mistPlay(streamName,options) {
continue;
}
if (mistplayers[p_shortname].isBrowserSupported(mime,loop[s],options,streaminfo)) {
if (mistplayers[p_shortname].isBrowserSupported(mime,loop[s],options,streaminfo,embedLog)) {
embedLog('Found a working combo: '+mistplayers[p_shortname].name+' with '+mime+' @ '+loop[s].url);
streaminfo.working[p_shortname].push(mime);
if (!source) {
@ -903,7 +936,6 @@ function mistPlay(streamName,options) {
if (player.setTracks(false)) {
//gather track info
//tracks
var tracks = {
video: [],
audio: [],
@ -982,34 +1014,61 @@ function mistPlay(streamName,options) {
if (player.setTracks(false)) {
player.onready(function(){
//player.setTracks(usetracks);
if ('setTracks' in options) { player.setTracks(options.setTracks); }
});
}
//monitor for errors
player.checkPlayingTimeout = false;
player.checkStalledTimeout = false;
player.checkProgressTimeout = false;
element.addEventListener('error',function(e){
player.askNextCombo();
},true);
var stalled = function(e){
if (player.checkPlayingTimeout) { return; }
player.checkPlayingTimeout = setTimeout(function(){
if (player.element.readyState >= 2) { return; }
if (player.checkStalledTimeout) { return; }
player.checkStalledTimeout = setTimeout(function(){
if (player.paused) { return; }
player.askNextCombo();
},5e3);
};
element.addEventListener('stalled',stalled,true);
element.addEventListener('waiting',stalled,true);
var progress = function(e){
if (player.checkPlayingTimeout) {
clearTimeout(player.checkPlayingTimeout);
player.checkPlayingTimeout = false;
if (player.checkStalledTimeout) {
clearTimeout(player.checkStalledTimeout);
player.checkStalledTimeout = false;
player.cancelAskNextCombo();
}
};
element.addEventListener('progress',progress,true);
element.addEventListener('playing',progress,true);
element.addEventListener('play',function(){
player.paused = false;
if ((!player.checkProgressTimeout) && (player.element) && ('currentTime' in player.element)) {
//check if the progress made is equal to the time spent
var lasttime = player.element.currentTime;
player.checkProgressTimeout = setInterval(function(){
var newtime = player.element.currentTime;
var progress = newtime - lasttime;
lasttime = newtime;
if (progress == 0) {
player.addlog('There should be playback but nothing was played');
player.askNextCombo();
return;
}
if (progress < 4.9) {
player.addlog('It seems playback is \lagging ('+Math.round(100 - progress/0.5)/10+'%)');
}
},5e3);
}
},true);
element.addEventListener('pause',function(){
player.paused = true;
if (player.checkProgressTimeout) {
clearInterval(player.checkStalledTimeout);
player.checkStalledTimeout = false;
}
},true);
if (player.resize) {
//monitor for resizes and fire if needed

96
embed/mist.css
View file

@ -63,11 +63,16 @@
background-color: black;
opacity: 0.6;
position: absolute;
left: 1px;
right: 1px;
left: 0px;
right: 0px;
bottom: -75px;
display: flex;
align-items: center;
text-shadow: none;
}
.mistplayer .controls.smaller {
height: 30px;
bottom: -30px;
}
.mistplayer:hover:not([data-hide]) .controls {
bottom: 0;
@ -88,14 +93,13 @@
.mistplayer .controls .row {
display: flex;
flex-flow: row nowrap;
flex-shrink: 1;
}
.mistplayer .controls .column {
display: flex;
flex-flow: column nowrap;
align-items: center;
}
.mistplayer .controls .row .button {
flex-shrink: 1;
}
.mistplayer .controls .row .button:not(:first-child) {
margin-left: 0;
@ -107,11 +111,29 @@
font-size: 16px;
position: relative;
background: transparent center none no-repeat;
background-size: contain;
}
.mistplayer .controls.smaller .button {
width: 15px;
line-height: 15px;
font-size: 8px;
}
.mistplayer .controls .button.play {
height: 45px;
margin-left: 15px;
}
.mistplayer .controls.minimal .button.play,
.mistplayer .controls.minimal .button.fullscreen,
.mistplayer .controls.minimal .button.tracks,
.mistplayer .controls.minimal .button.loop,
.mistplayer .controls.minimal .button.timestamp,
.mistplayer .controls.minimal .button.sound {
display: none;
}
.mistplayer .controls.smaller .button.play {
height: 15px;
margin-left: 5px;
}
.mistplayer .controls .button.play[data-state=playing] {
background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+PHN2ZyB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iIHhtbG5zOmNjPSJodHRwOi8vY3JlYXRpdmVjb21tb25zLm9yZy9ucyMiIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2ZXJzaW9uPSIxLjEiIGlkPSJzdmcyIiBoZWlnaHQ9IjQ1IiB3aWR0aD0iNDUiPjxkZWZzIGlkPSJkZWZzNCIgLz48bWV0YWRhdGEgaWQ9Im1ldGFkYXRhNyI+PHJkZjpSREY+PGNjOldvcmsgcmRmOmFib3V0PSIiPjxkYzpmb3JtYXQ+aW1hZ2Uvc3ZnK3htbDwvZGM6Zm9ybWF0PjxkYzp0eXBlIHJkZjpyZXNvdXJjZT0iaHR0cDovL3B1cmwub3JnL2RjL2RjbWl0eXBlL1N0aWxsSW1hZ2UiIC8+PGRjOnRpdGxlPjwvZGM6dGl0bGU+PC9jYzpXb3JrPjwvcmRmOlJERj48L21ldGFkYXRhPjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAsLTEwMDcuMzYyMikiIGlkPSJsYXllcjEiPjxnIHN0eWxlPSJmaWxsOiNmZmYiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDMuMDMwNDU3NSw0Ny43Mjk3MDUpIiBpZD0iZzM3NzkiPjxwYXRoIGlkPSJwYXRoMzgyMy03IiBkPSJtIDQuNDY5NTQyOSw5OTguMTYzNzcgYSA0LjAwMTE5MTYsNC4wMDExOTE2IDAgMCAwIDMuNzQ5OTk5LDMuOTY4NzMgbCAyLjI4MTI1MDEsMCBhIDQuMDAxMTkxNiw0LjAwMTE5MTYgMCAwIDAgMy45Njg3NSwtMy43NTAwMyBsIDAsLTMyLjI4MTIzIGEgNC4wMDExOTE2LDQuMDAxMTkxNiAwIDAgMCAtMy43NSwtMy45Njg3NSBsIC0yLjI4MTI1MDEsMCBhIDQuMDAxMTkxNiw0LjAwMTE5MTYgMCAwIDAgLTMuOTY4NzQ5LDMuNzUgbCAwLDMyLjI4MTI4IHoiIHN0eWxlPSJmaWxsOiNmZmY7ZmlsbC1vcGFjaXR5OjE7c3Ryb2tlOm5vbmUiIC8+PHBhdGggaWQ9InBhdGgzODIzLTctNCIgZD0ibSAyNC40Njk1NDIsOTk4LjE2MzggYSA0LjAwMTE5MTYsNC4wMDExOTE2IDAgMCAwIDMuNzUsMy45Njg3IGwgMi4yODEyNSwwIGEgNC4wMDExOTE2LDQuMDAxMTkxNiAwIDAgMCAzLjk2ODc1LC0zLjc1IGwgMCwtMzIuMjgxMjYgYSA0LjAwMTE5MTYsNC4wMDExOTE2IDAgMCAwIC0zLjc1LC0zLjk2ODc1IGwgLTIuMjgxMjUsMCBhIDQuMDAxMTkxNiw0LjAwMTE5MTYgMCAwIDAgLTMuOTY4NzUsMy43NSBsIDAsMzIuMjgxMzEgeiIgc3R5bGU9ImZpbGw6I2ZmZjtmaWxsLW9wYWNpdHk6MTtzdHJva2U6bm9uZSIgLz48L2c+PC9nPjwvc3ZnPg==");
}
@ -123,6 +145,10 @@
position: relative;
margin: 15px;
}
.mistplayer .controls.smaller .progress_container {
margin: 5px;
min-width: 20px;
}
.mistplayer .controls .button.progress {
height: 15px;
border: 1px solid white;
@ -130,6 +156,9 @@
width: auto;
margin: 0;
}
.mistplayer .controls.smaller .button.progress {
height: 10px;
}
.mistplayer .controls .button.progress .bar {
background-color: white;
position: absolute;
@ -137,6 +166,7 @@
top: 0;
bottom: 0;
left: 0;
min-width: 5px;
}
.mistplayer .controls .button.progress .buffer {
background-color: white;
@ -156,6 +186,11 @@
display: none;
font-size: 12px;
}
.mistplayer .controls.smaller .progress_container .hint {
bottom: 17px;
font-size: 6px;
border-radius: 3px;
}
.mistplayer .controls .progress_container .hint:after {
content: '';
display: block;
@ -165,6 +200,10 @@
border-left-color: white;
bottom: -5px;
}
.mistplayer .controls.smaller .progress_container .hint:after {
border-width: 3px;
bottom: -3px;
}
.mistplayer .controls .button.timestamp {
width: auto;
cursor: default;
@ -175,10 +214,17 @@
}
.mistplayer .controls .button.sound {
height: 65px;
width: 30px;
margin-left: 20px;
width: 43px;
position: relative;
background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+PHN2ZyB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iIHhtbG5zOmNjPSJodHRwOi8vY3JlYXRpdmVjb21tb25zLm9yZy9ucyMiIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2ZXJzaW9uPSIxLjEiIGlkPSJzdmczOTM3IiBoZWlnaHQ9IjY1IiB3aWR0aD0iMzAiPjxkZWZzIGlkPSJkZWZzMzkzOSIgLz48bWV0YWRhdGEgaWQ9Im1ldGFkYXRhMzk0MiI+PHJkZjpSREY+PGNjOldvcmsgcmRmOmFib3V0PSIiPjxkYzpmb3JtYXQ+aW1hZ2Uvc3ZnK3htbDwvZGM6Zm9ybWF0PjxkYzp0eXBlIHJkZjpyZXNvdXJjZT0iaHR0cDovL3B1cmwub3JnL2RjL2RjbWl0eXBlL1N0aWxsSW1hZ2UiIC8+PGRjOnRpdGxlPjwvZGM6dGl0bGU+PC9jYzpXb3JrPjwvcmRmOlJERj48L21ldGFkYXRhPjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAsLTk4Ny4zNjIyKSIgaWQ9ImxheWVyMSI+PHBhdGggaWQ9InJlY3Q0Njc0IiBkPSJtIDAsMTA1Mi4zNjIyIDAsLTY1IDUsMCBjIC0wLjE3MjU4OCwwIC0wLjMzNzI1NiwwLjAyOTUgLTAuNSwwLjA2MjUgLTAuNDg5MTExLDAuMSAtMC45NDIzNDUsMC4zMTcyNSAtMS4yODEyNSwwLjY1NjI1IC0wLjIyNjIwNiwwLjIyNjIgLTAuNDA0NzQzLDAuNTEzNSAtMC41MzEyNSwwLjgxMjUgLTAuMTI2NTA3LDAuMjk5MSAtMC4xODc1LDAuNjIzNjUgLTAuMTg3NSwwLjk2ODc1IDAsMCAwLjA3NTk3OCwwLjQ0NzA1IDAuMTg3NSwwLjc4MTI1IGwgMTkuODQzNzUsNTkuNDk5OTUgYyAwLjE0Mjc3NywxLjI0NTEgMS4xODU0MTQsMi4yMTg4IDIuNDY4NzUsMi4yMTg4IGwgLTI1LDAgeiBtIDI1LDAgYyAwLjg3NzU0OSwwIDEuNjQ3NjYzLC0wLjQ0MSAyLjA5Mzc1LC0xLjEyNSAwLjA2MzgxLC0wLjA5OCAwLjEwNjIsLTAuMjA0NiAwLjE1NjI1LC0wLjMxMjUgMC4wMjk2MiwtMC4wNjIgMC4wNjkyNiwtMC4xMjI1IDAuMDkzNzUsLTAuMTg3NSAwLjA0NTAxLC0wLjEyMTIgMC4wNjc0MSwtMC4yNDU5IDAuMDkzNzUsLTAuMzc1IDAuMDA5LC0wLjA0NCAwLjAyNDU3LC0wLjA4IDAuMDMxMjUsLTAuMTI1IDAuMDE4NzgsLTAuMTIzNSAwLjAzMTI1LC0wLjI0NjIgMC4wMzEyNSwtMC4zNzUgbCAwLC02MCBjIDAsLTEuMzg1IC0xLjExNDk5OSwtMi41IC0yLjUsLTIuNSBsIDUsMCAwLDY1IC01LDAgeiIgc3R5bGU9ImNvbG9yOiMwMDAwMDA7ZGlzcGxheTppbmxpbmU7b3ZlcmZsb3c6dmlzaWJsZTt2aXNpYmlsaXR5OnZpc2libGU7ZmlsbDojMDAwMDAwO2ZpbGwtb3BhY2l0eToxO2ZpbGwtcnVsZTpub256ZXJvO3N0cm9rZTpub25lO21hcmtlcjpub25lO2VuYWJsZS1iYWNrZ3JvdW5kOmFjY3VtdWxhdGUiIC8+PHBhdGggaWQ9InBhdGg0Njk3LTYiIGQ9Im0gMjUsMTA1Mi4zNjE3IGMgLTEuMjgzMzM2LDAgLTIuMzI1OTczLC0wLjk3MzcgLTIuNDY4NzUsLTIuMjE4NyBMIDIuNjg3NSw5OTAuNjQyOSBDIDIuNTc1OTc4LDk5MC4zMDg3IDIuNSw5ODkuODYxNyAyLjUsOTg5Ljg2MTcgYyAwLC0wLjM0NTEgMC4wNjA5OTMsLTAuNjY5NyAwLjE4NzUsLTAuOTY4OCAwLjEyNjUwNywtMC4yOTkgMC4zMDUwNDQsLTAuNTg2MyAwLjUzMTI1LC0wLjgxMjUgMC4zMzg5MDUsLTAuMzM5IDAuNzkyMTM5LC0wLjU1NjIgMS4yODEyNSwtMC42NTYyIDAuMTYyNzQ0LC0wLjAzMyAwLjMyNzQxMiwtMC4wNjIgMC41LC0wLjA2MiBsIDIwLDAgYyAxLjM4NTAwMSwwIDIuNSwxLjExNSAyLjUsMi41IGwgMCw2MCBjIDAsMC4xMjg4IC0wLjAxMjQ3LDAuMjUxNSAtMC4wMzEyNSwwLjM3NSAtMC4wMDY3LDAuMDQ1IC0wLjAyMjI1LDAuMDgxIC0wLjAzMTI1LDAuMTI1IC0wLjAyNjM0LDAuMTI5MiAtMC4wNDg3NCwwLjI1MzggLTAuMDkzNzUsMC4zNzUgLTAuMDI0NDksMC4wNjUgLTAuMDY0MTMsMC4xMjUyIC0wLjA5Mzc1LDAuMTg3NSAtMC4wNTAwNSwwLjEwNzkgLTAuMDkyNDQsMC4yMTQ1IC0wLjE1NjI1LDAuMzEyNSAtMC40NDYwODcsMC42ODQgLTEuMjE2MjAxLDEuMTI1IC0yLjA5Mzc1LDEuMTI1IHogbSAwLC0xLjIxODcgYyAwLjQ3NDEwNiwwIDAuODY0NzM0LC0wLjIxMTQgMS4wOTM3NSwtMC41NjI1IC0wLjAyMTEyLDAuMDMyIC0wLjAwNTksLTAuMDEgMC4wNjI1LC0wLjE1NjMgYSAxLjIwNDQ1MiwxLjIwNDQ1MiAwIDAgMSAwLC0wLjAzMSBjIDAuMDIzNSwtMC4wNDkgMC4wNTE5OCwtMC4wNTIgMC4wNjI1LC0wLjA2MiAwLjAwNTUsLTAuMDE2IDAuMDA5NCwtMC4wMzUgMCwtMC4wMzEgMC4wMDE3LC0wLjAxIDAuMDA1NSwtMC4wNjEgMC4wMzEyNSwtMC4xODc1IDAuMDA4LC0wLjAzOSAwLjAyNTU1LC0wLjAzOSAwLjAzMTI1LC0wLjA2MiAwLjAwOTgsLTAuMDY2IDAuMDA1NSwtMC4xMDI3IDAsLTAuMDk0IC0wLjAwMTYsLTAuMDMgMCwtMC4wNjggMCwtMC4wOTQgbCAwLC02MCBjIDAsLTAuNzM4NiAtMC41NDI2MTcsLTEuMjgxMyAtMS4yODEyNSwtMS4yODEzIGwgLTIwLDAgYyAtMC4wMzUzNTMsMCAtMC4xMDUzMjIsMCAtMC4yNSwwLjAzMSAtMC4yOTY4NjMsMC4wNjEgLTAuNTQ2MzQzLDAuMTcxMyAtMC42ODc1LDAuMzEyNSAtMC4wODkzOTQsMC4wODkgLTAuMjA1MjYzLDAuMjU4IC0wLjI4MTI1LDAuNDM3NSAtMC4wNTUzMTUsMC4xMzA4IC0wLjA1ODY2MSwwLjI4MzIgLTAuMDYyNSwwLjQ2ODcgLTIuNTJlLTQsMC4wMTIgMCwwLjAxOSAwLDAuMDMxIDAuMDI3OTgyLDAuMTM1MyAwLjA4MjQ5OSwwLjI3ODkgMC4xMjUsMC40MDYyIGwgMTkuODQzNzUsNTkuNTAwNSBhIDEuMjA0NDUyLDEuMjA0NDUyIDAgMCAxIDAuMDMxMjUsMC4yNSBjIDAuMDc1MjcsMC42NTY0IDAuNjA3MDU0LDEuMTI1IDEuMjgxMjUsMS4xMjUgeiIgc3R5bGU9ImZpbGw6I2ZmZmZmZjtmaWxsLW9wYWNpdHk6MTtzdHJva2U6bm9uZSIgLz48L2c+PC9zdmc+") no-repeat;
background-position: center right;
border: 1px solid black; /*helps with white border*/
flex-shrink: 0;
}
.mistplayer .controls.smaller .button.sound {
height: 19.5px;
width: 14px;
background-size: contain;
}
.mistplayer .controls .button.sound .speaker {
width: 25px;
@ -186,27 +232,42 @@
margin: 0;
background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+PHN2ZyB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iIHhtbG5zOmNjPSJodHRwOi8vY3JlYXRpdmVjb21tb25zLm9yZy9ucyMiIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2ZXJzaW9uPSIxLjEiIGlkPSJzdmc0NjU5IiBoZWlnaHQ9IjI1IiB3aWR0aD0iMjUiPjxkZWZzIGlkPSJkZWZzNDY2MSIgLz48bWV0YWRhdGEgaWQ9Im1ldGFkYXRhNDY2NCI+PHJkZjpSREY+PGNjOldvcmsgcmRmOmFib3V0PSIiPjxkYzpmb3JtYXQ+aW1hZ2Uvc3ZnK3htbDwvZGM6Zm9ybWF0PjxkYzp0eXBlIHJkZjpyZXNvdXJjZT0iaHR0cDovL3B1cmwub3JnL2RjL2RjbWl0eXBlL1N0aWxsSW1hZ2UiIC8+PGRjOnRpdGxlPjwvZGM6dGl0bGU+PC9jYzpXb3JrPjwvcmRmOlJERj48L21ldGFkYXRhPjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAsLTEwMjcuMzYyMikiIGlkPSJsYXllcjEiPjxwYXRoIGlkPSJyZWN0NDE1OSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMCwxMDI3LjM2MjIpIiBkPSJNIDAgMCBMIDAgMjUgTCAyNSAyNSBMIDI1IDAgTCAwIDAgeiBNIDE3Ljc4OTA2MiAwLjc0NjA5Mzc1IEMgMTguMjk1MTM5IDAuNzY3NzkwNDMgMTguNzk2OTM2IDAuOTE1NDM0MzggMTkuMjUgMS4xODU1NDY5IEwgMTkuMjUgMjMuODEyNSBDIDE4LjA0MTUxMiAyNC41MzQ2IDE2LjQ4MTgzMiAyNC4zNzc0OTQgMTUuNDQ1MzEyIDIzLjMwODU5NCBMIDEwLjM0MTc5NyAxOC4wNDY4NzUgTCA4LjA4Nzg5MDYgMTguMDQ2ODc1IEMgNi43OTk3OTc2IDE4LjA0Njg3NSA1Ljc1IDE2Ljk2MzI2NiA1Ljc1IDE1LjYzNDc2NiBMIDUuNzUgOS4zNjMyODEyIEMgNS43NSA4LjAzNDg4MTIgNi43OTk3OTc2IDYuOTUxMTcxOSA4LjA4Nzg5MDYgNi45NTExNzE5IEwgMTAuMzQxNzk3IDYuOTUxMTcxOSBMIDE1LjQ0NTMxMiAxLjY4OTQ1MzEgQyAxNi4wOTI3NTkgMS4wMjE3MDMxIDE2Ljk0NTYwMiAwLjcwOTkzMjYyIDE3Ljc4OTA2MiAwLjc0NjA5Mzc1IHogIiBzdHlsZT0ib3BhY2l0eToxO2ZpbGw6IzAwMDAwMDtmaWxsLW9wYWNpdHk6MTtmaWxsLXJ1bGU6ZXZlbm9kZDtzdHJva2U6bm9uZTtzdHJva2Utd2lkdGg6MS41O3N0cm9rZS1taXRlcmxpbWl0OjQ7c3Ryb2tlLWRhc2hhcnJheTpub25lO3N0cm9rZS1kYXNob2Zmc2V0OjA7c3Ryb2tlLW9wYWNpdHk6MSIgLz48cGF0aCBpZD0icmVjdDQ1NzQiIGQ9Im0gMTkuMjUsMTAyOC41NDczIGMgLTEuMjA4MTcsLTAuNzIwMyAtMi43Njk1OTksLTAuNTY0IC0zLjgwNTUxMywwLjUwNDQgbCAtNS4xMDIzNjIsNS4yNjIyIC0yLjI1MzU0MTgsMCBjIC0xLjI4ODA5MywwIC0yLjMzODU4MzIsMS4wODM0IC0yLjMzODU4MzIsMi40MTE4IGwgMCw2LjI3MDkgYyAwLDEuMzI4NSAxLjA1MDQ5MDIsMi40MTE5IDIuMzM4NTgzMiwyLjQxMTkgbCAyLjI1MzU0MTgsMCA1LjEwMjM2Miw1LjI2MjMgYyAxLjAzNjUyLDEuMDY4OSAyLjU5NzAyNSwxLjIyNjMgMy44MDU1MTMsMC41MDQyIGwgMCwtMjIuNjI3NyB6IiBzdHlsZT0iZmlsbDpub25lO2ZpbGwtb3BhY2l0eToxO3N0cm9rZTojZmZmZmZmO3N0cm9rZS13aWR0aDoxLjU7c3Ryb2tlLW1pdGVybGltaXQ6NDtzdHJva2UtZGFzaGFycmF5Om5vbmU7c3Ryb2tlLW9wYWNpdHk6MSIgLz48L2c+PC9zdmc+");
position: absolute;
left: -15px;
top: 30px;
background-color: white;
box-shadow: inset 1px 1px black, inset -1px -1px black; /* helps with white shadow*/
}
.mistplayer .controls .button.sound .speaker[data-muted] {
background-color: transparent;
}
.mistplayer .controls.smaller .button.sound .speaker {
width: 8px;
height: 8px;
top: 10px;
box-shadow: none;
}
.mistplayer .controls .button.sound .volume {
position: absolute;
bottom: 0;
left: 1px;
bottom: 0.5px;
right: 1px;
width: 23.5px;
background-color: white;
opacity: 0.6;
height: 100%;
z-index: -1;
border-left: 1px solid transparent; /* these help with white showing through */
border-right: 1px solid transparent;
}
.mistplayer .controls.smaller .button.sound .volume {
width: 6px;
}
.mistplayer .controls .button.loop {
min-height: 45px;
background-color: transparent;
background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+PHN2ZyB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iIHhtbG5zOmNjPSJodHRwOi8vY3JlYXRpdmVjb21tb25zLm9yZy9ucyMiIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iNDUiIGhlaWdodD0iNDUiIGlkPSJzdmczOTM3IiB2ZXJzaW9uPSIxLjEiPiA8ZGVmcyBpZD0iZGVmczM5MzkiIC8+IDxtZXRhZGF0YSBpZD0ibWV0YWRhdGEzOTQyIj4gPHJkZjpSREY+IDxjYzpXb3JrIHJkZjphYm91dD0iIj4gPGRjOmZvcm1hdD5pbWFnZS9zdmcreG1sPC9kYzpmb3JtYXQ+IDxkYzp0eXBlIHJkZjpyZXNvdXJjZT0iaHR0cDovL3B1cmwub3JnL2RjL2RjbWl0eXBlL1N0aWxsSW1hZ2UiIC8+IDxkYzp0aXRsZT48L2RjOnRpdGxlPiA8L2NjOldvcms+IDwvcmRmOlJERj4gPC9tZXRhZGF0YT4gPHBhdGggaWQ9InJlY3Q0NTExIiBkPSJNIDAgMCBMIDAgNDUgTCA0NSA0NSBMIDQ1IDAgTCAwIDAgeiBNIDIyLjUgMTEuMjUgQSAxMS4yNSAxMS4yNSAwIDAgMSAzMy43NSAyMi41IEEgMTEuMjUgMTEuMjUgMCAwIDEgMjIuNSAzMy43NSBBIDExLjI1IDExLjI1IDAgMCAxIDE0LjU1MDc4MSAzMC40NDkyMTkgTCAxMi43MTQ4NDQgMzIuMjg1MTU2IEwgMTIuNzE0ODQ0IDI1Ljc4NTE1NiBMIDE5LjIxNDg0NCAyNS43ODUxNTYgTCAxNy4zNzY5NTMgMjcuNjIzMDQ3IEEgNy4yNSA3LjI1IDAgMCAwIDIyLjUgMjkuNzUgQSA3LjI1IDcuMjUgMCAwIDAgMjkuNzUgMjIuNSBBIDcuMjUgNy4yNSAwIDAgMCAyMi41IDE1LjI1IEEgNy4yNSA3LjI1IDAgMCAwIDE3LjM3Njk1MyAxNy4zNzY5NTMgTCAxNC41NTA3ODEgMTQuNTUwNzgxIEEgMTEuMjUgMTEuMjUgMCAwIDEgMjIuNSAxMS4yNSB6ICIgc3R5bGU9Im9wYWNpdHk6MTtmaWxsOiMwMDAwMDA7ZmlsbC1vcGFjaXR5OjE7ZmlsbC1ydWxlOmV2ZW5vZGQ7c3Ryb2tlOm5vbmU7c3Ryb2tlLXdpZHRoOjEuNTtzdHJva2UtbWl0ZXJsaW1pdDo0O3N0cm9rZS1kYXNoYXJyYXk6bm9uZTtzdHJva2UtZGFzaG9mZnNldDowO3N0cm9rZS1vcGFjaXR5OjEiIC8+IDxwYXRoIGlkPSJwYXRoNDQ5NSIgZD0iTSAyMi41IDExLjI1IEEgMTEuMjUgMTEuMjUgMCAwIDAgMTQuNTUwNzgxIDE0LjU1MDc4MSBMIDE3LjM3Njk1MyAxNy4zNzY5NTMgQSA3LjI1IDcuMjUgMCAwIDEgMjIuNSAxNS4yNSBBIDcuMjUgNy4yNSAwIDAgMSAyOS43NSAyMi41IEEgNy4yNSA3LjI1IDAgMCAxIDIyLjUgMjkuNzUgQSA3LjI1IDcuMjUgMCAwIDEgMTcuMzc2OTUzIDI3LjYyMzA0NyBMIDE5LjIxNDg0NCAyNS43ODUxNTYgTCAxMi43MTQ4NDQgMjUuNzg1MTU2IEwgMTIuNzE0ODQ0IDMyLjI4NTE1NiBMIDE0LjU1MDc4MSAzMC40NDkyMTkgQSAxMS4yNSAxMS4yNSAwIDAgMCAyMi41IDMzLjc1IEEgMTEuMjUgMTEuMjUgMCAwIDAgMzMuNzUgMjIuNSBBIDExLjI1IDExLjI1IDAgMCAwIDIyLjUgMTEuMjUgeiAiIHN0eWxlPSJvcGFjaXR5OjE7ZmlsbDpub25lO2ZpbGwtb3BhY2l0eTowLjg1ODQ0NzU7ZmlsbC1ydWxlOmV2ZW5vZGQ7c3Ryb2tlOiNmZmZmZmY7c3Ryb2tlLXdpZHRoOjEuNTtzdHJva2UtbWl0ZXJsaW1pdDo0O3N0cm9rZS1kYXNoYXJyYXk6bm9uZTtzdHJva2UtZGFzaG9mZnNldDowO3N0cm9rZS1vcGFjaXR5OjEiIC8+PC9zdmc+");
box-shadow: inset 1px 1px black, inset -1px -1px black; /* helps with white shadow*/
}
.mistplayer .controls.smaller .button.loop {
min-height: 15px;
}
.mistplayer .controls .button.loop[data-on] {
background-color: rgba(255,255,255,0.6);
@ -215,18 +276,24 @@
background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+PHN2ZyB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iIHhtbG5zOmNjPSJodHRwOi8vY3JlYXRpdmVjb21tb25zLm9yZy9ucyMiIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2ZXJzaW9uPSIxLjEiIGlkPSJzdmczOTM3IiBoZWlnaHQ9IjQ1IiB3aWR0aD0iNDUiPjxkZWZzIGlkPSJkZWZzMzkzOSIgLz48bWV0YWRhdGEgaWQ9Im1ldGFkYXRhMzk0MiI+PHJkZjpSREY+PGNjOldvcmsgcmRmOmFib3V0PSIiPjxkYzpmb3JtYXQ+aW1hZ2Uvc3ZnK3htbDwvZGM6Zm9ybWF0PjxkYzp0eXBlIHJkZjpyZXNvdXJjZT0iaHR0cDovL3B1cmwub3JnL2RjL2RjbWl0eXBlL1N0aWxsSW1hZ2UiIC8+PGRjOnRpdGxlPjwvZGM6dGl0bGU+PC9jYzpXb3JrPjwvcmRmOlJERj48L21ldGFkYXRhPjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAsLTEwMDcuMzYyMikiIGlkPSJsYXllcjEiPjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAsLTEuMTA5Mzc1KSIgaWQ9Imc0NTYzIj48ZyBpZD0iZzQ1NTgiPjxwYXRoIGlkPSJyZWN0Mzk0NSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMCwxMDA3LjM2MjIpIiBkPSJNIDUuMTU2MjUsMTAgQyAzLjY5MTM0NjEsMTAgMi41LDExLjE5MTM0NiAyLjUsMTIuNjU2MjUgbCAwLDE5LjY4NzUgQyAyLjUsMzMuODA4NjU0IDMuNjkxMzQ2MSwzNSA1LjE1NjI1LDM1IGwgMzQuNjg3NSwwIEMgNDEuMzA4NjU0LDM1IDQyLjUsMzMuODA4NjU0IDQyLjUsMzIuMzQzNzUgbCAwLC0xOS42ODc1IEMgNDIuNSwxMS4xOTEzNDYgNDEuMzA4NjU0LDEwIDM5Ljg0Mzc1LDEwIEwgNS4xNTYyNSwxMCB6IE0gNSwxMi41MzEyNSBsIDM1LDAgMCwyMCAtMzUsMCAwLC0yMCB6IiBzdHlsZT0iZmlsbDojZmZmO2ZpbGwtb3BhY2l0eToxO3N0cm9rZTpub25lIiAvPjxyZWN0IHJ5PSIwIiB5PSIxMDE5Ljg2MjIiIHg9IjUiIGhlaWdodD0iMjAiIHdpZHRoPSIzNSIgaWQ9InJlY3QzOTQ3IiBzdHlsZT0iZmlsbDojZmZmO2ZpbGwtb3BhY2l0eTowLjM5MjE1Njg2O3N0cm9rZTpub25lIiAvPjxwYXRoIGlkPSJwYXRoMzk0OSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMCwxMDA3LjM2MjIpIiBkPSJtIDE4Ljc4MTI1LDM1LjQwNjI1IGMgLTEuNTM2NjEsMC4zNzk4MDkgLTIuOTcxNDY1LDAuOTkxNTU3IC00LjI4MTI1LDEuODEyNSBsIDE1LjY1NjI1LDAgYyAtMS4zMTMwMDUsLTAuODIyOTYxIC0yLjc2MjgyNSwtMS40MzI5NTMgLTQuMzEyNSwtMS44MTI1IGwgLTcuMDYyNSwwIHoiIHN0eWxlPSJmaWxsOiNmZmY7ZmlsbC1vcGFjaXR5OjE7c3Ryb2tlOm5vbmUiIC8+PC9nPjxnIGlkPSJnNDAwNyIgdHJhbnNmb3JtPSJtYXRyaXgoMi4wMzUzOTg1LDAsMCwxLjE2MzA4MjgsLTk5LjMyMTczNCwtMTQxLjU0NTgxKSIgc3R5bGU9ImZpbGw6IzAwMCI+PHBhdGggaWQ9InJlY3QzOTU4IiBkPSJtIDY1LjUzMzY0NiwxMDAxLjQ3NTggLTIuMDMyOTMyLDAgMC42NjI5MTMsMC42NjI5IC0yLjI1MzkwMywyLjI1MzkgMC43MDcxMDcsMC43MDcxIDIuMjUzOTAzLC0yLjI1MzkgMC42NjI5MTIsMC42NjI5IDAsLTIuMDMyOSB6IiBzdHlsZT0iZmlsbDojZmZmO2ZpbGwtb3BhY2l0eToxO3N0cm9rZTpub25lIiAvPjxwYXRoIGlkPSJyZWN0Mzk1OC01IiBkPSJtIDY1LjUzMzY0NiwxMDEyLjg0IDAsLTIuMDMzIC0wLjY2MjgzNiwwLjY2MjkgLTIuMjUzOTAxLC0yLjI1MzkgLTAuNzA3MTA0LDAuNzA3MSAyLjI1MzkwMiwyLjI1MzkgLTAuNjYyOTA2LDAuNjYyOSAyLjAzMjg0NSwxZS00IHoiIHN0eWxlPSJmaWxsOiNmZmY7ZmlsbC1vcGFjaXR5OjE7c3Ryb2tlOm5vbmUiIC8+PHBhdGggaWQ9InJlY3QzOTU4LTUxIiBkPSJtIDU0LjE2OTQzLDEwMDEuNDc1OCAyLjAzMjkzMiwwIC0wLjY2MjkxMywwLjY2MjkgMi4yNTM5MDMsMi4yNTM5IC0wLjcwNzEwNywwLjcwNzEgLTIuMjUzOTAzLC0yLjI1MzkgLTAuNjYyOTEyLDAuNjYyOSAwLC0yLjAzMjkgeiIgc3R5bGU9ImZpbGw6I2ZmZjtmaWxsLW9wYWNpdHk6MTtzdHJva2U6bm9uZSIgLz48cGF0aCBpZD0icmVjdDM5NTgtNS03IiBkPSJtIDU0LjE2OTQzLDEwMTIuODQgMCwtMi4wMzMgMC42NjI4MzYsMC42NjI5IDIuMjUzOTAxLC0yLjI1MzkgMC43MDcxMDQsMC43MDcxIC0yLjI1MzkwMiwyLjI1MzkgMC42NjI5MDYsMC42NjI5IC0yLjAzMjg0NSwxZS00IHoiIHN0eWxlPSJmaWxsOiNmZmY7ZmlsbC1vcGFjaXR5OjE7c3Ryb2tlOm5vbmUiIC8+PC9nPjwvZz48L2c+PC9zdmc+");
height: 45px;
}
.mistplayer .controls.smaller .button.fullscreen {
height: 15px;
}
.mistplayer .controls .button.tracks {
line-height: 25px;
width: 100%;
margin: 0;
height: 25px;
padding: 0 15px;
box-sizing: border-box;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.mistplayer .controls.smaller .button.tracks {
height: 10px;
line-height: 10px;
}
.mistplayer .controls .tracks .settings {
position: absolute;
background-color: black;
@ -234,6 +301,10 @@
right: -1000px;
bottom: 27px;
}
.mistplayer .controls.smaller .tracks .settings {
padding: 2px 3px;
bottom: 12.5px;
}
.mistplayer .controls .tracks:hover .settings {
right: 0;
}
@ -261,9 +332,12 @@
color: white;
border: none;
outline: none;
font-size: inherit;
}
.mistplayer .controls .tracks .settings label option {
color: black;
background-color: white;
font-size: inherit;
}
@keyframes spin {

6
embed/test.html
View file

@ -25,8 +25,8 @@
<!--<script src=wrappers/theoplayer.js></script>-->
<!--<script src=wrappers/jwplayer.js></script>-->
<script src=wrappers/html5.js></script>
<script src=wrappers/dashjs.js></script>
<script src=wrappers/videojs.js></script>
<script src=wrappers/dashjs.js></script>
<script src=wrappers/flash_strobe.js></script>
<script src=wrappers/silverlight.js></script>
<script src=wrappers/polytrope.js></script>
@ -83,11 +83,11 @@
//tryplayers.push('flash_strobe');
//tryplayers.push('silverlight');
streams = [];
//streams.push('live');
streams.push('live');
//streams.push('subtel');
//streams.push('ogg');
//streams.push('vids+mist.mp4');
streams.push('vids+hahalol.mp3');
//streams.push('vids+hahalol.mp3');
//streams.push('lama');
//streams.push('bunny');

12
embed/wrappers/videojs.js
View file

@ -5,10 +5,16 @@ mistplayers.videojs = {
isMimeSupported: function (mimetype) {
return (this.mimes.indexOf(mimetype) == -1 ? false : true);
},
isBrowserSupported: function (mimetype,source,options) {
if ((options.host.substr(0,7) == 'http://') && (source.url.substr(0,8) == 'https://')) { return false; }
isBrowserSupported: function (mimetype,source,options,streaminfo,logfunc) {
if ((options.host.substr(0,7) == 'http://') && (source.url.substr(0,8) == 'https://')) {
if (logfunc) { logfunc('HTTP/HTTPS mismatch for this source'); }
return false;
}
var support = true;
if ((location.protocol == 'file:') && (mimetype == 'html5/application/vnd.apple.mpegurl')) { return false; }
if ((location.protocol == 'file:') && (mimetype == 'html5/application/vnd.apple.mpegurl')) {
if (logfunc) { logfunc('This source ('+mimetype+') won\'t work if the page is run via file://'); }
return false;
}
return ('MediaSource' in window);
},
player: function(){},