LSP restructure (v3)
This commit is contained in:
Thulinma
parent
8e6da507bc
commit
ed9c917bf2
18 changed files with 4898 additions and 4842 deletions
1
.gitignore
vendored
1
.gitignore
vendored
|
|
@ -36,4 +36,5 @@ server.html*
|
|||
.settings
|
||||
.cproject
|
||||
.project
|
||||
.sync
|
||||
|
||||
|
|
|
|||
9
Makefile
9
Makefile
|
|
@ -178,7 +178,8 @@ MistOutJSON: override CPPFLAGS += "-DOUTPUTTYPE=\"output_json.h\""
|
|||
MistOutJSON: src/output/mist_out.cpp src/output/output.cpp src/output/output_http.cpp src/output/output_json.cpp
|
||||
$(CXX) $(LDFLAGS) $(CPPFLAGS) $^ $(LDLIBS) -o $@
|
||||
|
||||
lspSOURCES=lsp/plugins/jquery.js lsp/plugins/placeholder.js lsp/plugins/md5.js lsp/main.js lsp/pages.js lsp/plugins/tablesort.js lsp/plugins/jquery.flot.min.js lsp/plugins/jquery.flot.time.min.js lsp/plugins/jquery.flot.crosshair.min.js
|
||||
lspSOURCES=lsp/plugins/md5.js lsp/plugins/cattablesort.js lsp/mist.js
|
||||
lspSOURCESmin=lsp/plugins/jquery.js lsp/plugins/jquery.flot.min.js lsp/plugins/jquery.flot.time.min.js
|
||||
lspDATA=lsp/header.html lsp/main.css lsp/footer.html
|
||||
|
||||
JAVA := $(shell which java 2> /dev/null)
|
||||
|
|
@ -197,9 +198,10 @@ src/embed.js.h: src/embed.js sourcery
|
|||
./sourcery embed.min.js embed_js > src/embed.js.h
|
||||
rm embed.min.js
|
||||
|
||||
src/controller/server.html: $(lspDATA) $(lspSOURCES)
|
||||
cat lsp/header.html > $@
|
||||
src/controller/server.html: $(lspDATA) $(lspSOURCES) $(lspSOURCESmin)
|
||||
cat lsp/header.html >> $@
|
||||
echo "<script>" >> $@
|
||||
cat $(lspSOURCESmin) >> $@
|
||||
$(CLOSURE) $(lspSOURCES) >> $@
|
||||
echo "</script><style>" >> $@
|
||||
cat lsp/main.css >> $@
|
||||
|
|
@ -226,4 +228,3 @@ uninstall:
|
|||
rm -f $(DESTDIR)$(bindir)/Mist*
|
||||
|
||||
.PHONY: clean uninstall
|
||||
|
||||
|
|
|
|||
3
lsp/.gitignore
vendored
3
lsp/.gitignore
vendored
|
|
@ -1,3 +0,0 @@
|
|||
compressed.js
|
||||
uncompressed.js
|
||||
|
||||
107
lsp/footer.html
107
lsp/footer.html
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
1005
lsp/main.css
Executable file → Normal file
1005
lsp/main.css
Executable file → Normal file
File diff suppressed because one or more lines are too long
2161
lsp/main.js
2161
lsp/main.js
File diff suppressed because it is too large
Load diff
3948
lsp/mist.js
Normal file
3948
lsp/mist.js
Normal file
File diff suppressed because it is too large
Load diff
1696
lsp/pages.js
1696
lsp/pages.js
File diff suppressed because it is too large
Load diff
86
lsp/plugins/cattablesort.js
Normal file
86
lsp/plugins/cattablesort.js
Normal file
|
|
@ -0,0 +1,86 @@
|
|||
// by Carina van der Meer for DDVtech,
|
||||
// based off the "Stupid jQuery table plugin" by JoeQuery (http://joequery.github.io/Stupid-Table-Plugin/)
|
||||
|
||||
(function($){
|
||||
$.fn.stupidtable = function(){
|
||||
var $table = $(this);
|
||||
$table.on('click', 'thead th', function() {
|
||||
$(this).stupidsort();
|
||||
});
|
||||
}
|
||||
$.fn.stupidsort = function(){
|
||||
var $th = $(this);
|
||||
var $table = $th.closest('table');
|
||||
var $tbody = $table.children('tbody');
|
||||
var $trs = $tbody.children('tr');
|
||||
var datatype = $th.attr('data-sort-type');
|
||||
if (!datatype) { return; } //no data type set? => don't sort by this column
|
||||
var sortasc = true;
|
||||
if ($th.hasClass('sorting-asc')) { sortasc = false; }
|
||||
|
||||
//find the index of the column that needs sorting
|
||||
var col_index = 0;
|
||||
$th.prevAll().each(function(){
|
||||
var colspan = $(this).attr('colspan');
|
||||
col_index += (colspan ? Number(colspan) : 1);
|
||||
});
|
||||
|
||||
//a function to return the values that need sorting
|
||||
function getsortval(tr) {
|
||||
var $tds = $(tr).children('td,th');
|
||||
|
||||
//find the correct td
|
||||
var i = 0;
|
||||
var $td;
|
||||
$tds.each(function(){
|
||||
if (i == col_index) {
|
||||
$td = $(this);
|
||||
return false; //break
|
||||
}
|
||||
var colspan = $(this).attr('colspan');
|
||||
i += (colspan ? Number(colspan) : 1);
|
||||
});
|
||||
|
||||
//get the value
|
||||
var val;
|
||||
if (typeof $td.data('sort-value') != 'undefined') {
|
||||
val = $td.data('sort-value');
|
||||
}
|
||||
else if (typeof $td.attr('data-sort-value') != 'undefined') {
|
||||
val = $td.attr('data-sort-value');
|
||||
}
|
||||
else {
|
||||
val = $td.text();
|
||||
}
|
||||
//cast to the datatype
|
||||
switch (datatype) {
|
||||
case 'string':
|
||||
case 'string-ins':
|
||||
//always sort strings case insensitive
|
||||
val = String(val).toLowerCase();
|
||||
break;
|
||||
case 'int':
|
||||
val = parseInt(Number(val));
|
||||
break;
|
||||
case 'float':
|
||||
val = Number(val);
|
||||
break;
|
||||
}
|
||||
return val;
|
||||
}
|
||||
|
||||
//do the actual sort
|
||||
$trs.sort(function(a,b){
|
||||
var factor = (sortasc ? 1 : -1);
|
||||
a = getsortval(a);
|
||||
b = getsortval(b);
|
||||
if (a > b) { return factor * 1; }
|
||||
if (a < b) { return factor * -1; }
|
||||
return 0;
|
||||
})
|
||||
$tbody.append($trs);
|
||||
|
||||
$table.find('thead th').removeClass('sorting-asc').removeClass('sorting-desc')
|
||||
$th.addClass((sortasc ? 'sorting-asc' : 'sorting-desc'));
|
||||
}
|
||||
})(jQuery);
|
||||
1
lsp/plugins/jquery.flot.crosshair.min.js
vendored
1
lsp/plugins/jquery.flot.crosshair.min.js
vendored
|
|
@ -1 +0,0 @@
|
|||
(function($){var options={crosshair:{mode:null,color:"rgba(170, 0, 0, 0.80)",lineWidth:1}};function init(plot){var crosshair={x:-1,y:-1,locked:false};plot.setCrosshair=function setCrosshair(pos){if(!pos)crosshair.x=-1;else{var o=plot.p2c(pos);crosshair.x=Math.max(0,Math.min(o.left,plot.width()));crosshair.y=Math.max(0,Math.min(o.top,plot.height()))}plot.triggerRedrawOverlay()};plot.clearCrosshair=plot.setCrosshair;plot.lockCrosshair=function lockCrosshair(pos){if(pos)plot.setCrosshair(pos);crosshair.locked=true};plot.unlockCrosshair=function unlockCrosshair(){crosshair.locked=false};function onMouseOut(e){if(crosshair.locked)return;if(crosshair.x!=-1){crosshair.x=-1;plot.triggerRedrawOverlay()}}function onMouseMove(e){if(crosshair.locked)return;if(plot.getSelection&&plot.getSelection()){crosshair.x=-1;return}var offset=plot.offset();crosshair.x=Math.max(0,Math.min(e.pageX-offset.left,plot.width()));crosshair.y=Math.max(0,Math.min(e.pageY-offset.top,plot.height()));plot.triggerRedrawOverlay()}plot.hooks.bindEvents.push(function(plot,eventHolder){if(!plot.getOptions().crosshair.mode)return;eventHolder.mouseout(onMouseOut);eventHolder.mousemove(onMouseMove)});plot.hooks.drawOverlay.push(function(plot,ctx){var c=plot.getOptions().crosshair;if(!c.mode)return;var plotOffset=plot.getPlotOffset();ctx.save();ctx.translate(plotOffset.left,plotOffset.top);if(crosshair.x!=-1){var adj=plot.getOptions().crosshair.lineWidth%2===0?0:.5;ctx.strokeStyle=c.color;ctx.lineWidth=c.lineWidth;ctx.lineJoin="round";ctx.beginPath();if(c.mode.indexOf("x")!=-1){var drawX=Math.round(crosshair.x)+adj;ctx.moveTo(drawX,0);ctx.lineTo(drawX,plot.height())}if(c.mode.indexOf("y")!=-1){var drawY=Math.round(crosshair.y)+adj;ctx.moveTo(0,drawY);ctx.lineTo(plot.width(),drawY)}ctx.stroke()}ctx.restore()});plot.hooks.shutdown.push(function(plot,eventHolder){eventHolder.unbind("mouseout",onMouseOut);eventHolder.unbind("mousemove",onMouseMove)})}$.plot.plugins.push({init:init,options:options,name:"crosshair",version:"1.0"})})(jQuery);
|
||||
6
lsp/plugins/jquery.js
vendored
6
lsp/plugins/jquery.js
vendored
File diff suppressed because one or more lines are too long
|
|
@ -1,8 +0,0 @@
|
|||
/*
|
||||
* Placeholder plugin for jQuery
|
||||
* ---
|
||||
* Copyright 2010, Daniel Stocks (http://webcloud.se)
|
||||
* Released under the MIT, BSD, and GPL Licenses.
|
||||
*/
|
||||
(function(b){function d(a){this.input=a;a.attr("type")=="password"&&this.handlePassword();b(a[0].form).submit(function(){if(a.hasClass("placeholder")&&a[0].value==a.attr("placeholder"))a[0].value=""})}d.prototype={show:function(a){if(this.input[0].value===""||a&&this.valueIsPlaceholder()){if(this.isPassword)try{this.input[0].setAttribute("type","text")}catch(b){this.input.before(this.fakePassword.show()).hide()}this.input.addClass("placeholder");this.input[0].value=this.input.attr("placeholder")}},hide:function(){if(this.valueIsPlaceholder()&&this.input.hasClass("placeholder")&&(this.input.removeClass("placeholder"),this.input[0].value="",this.isPassword)){try{this.input[0].setAttribute("type","password")}catch(a){}this.input.show();this.input[0].focus()}},valueIsPlaceholder:function(){return this.input[0].value==this.input.attr("placeholder")},handlePassword:function(){var a=this.input;a.attr("realType","password");this.isPassword=!0;if(b.browser.msie&&a[0].outerHTML){var c=b(a[0].outerHTML.replace(/type=(['"])?password\1/gi,"type=$1text$1"));this.fakePassword=c.val(a.attr("placeholder")).addClass("placeholder").focus(function(){a.trigger("focus");b(this).hide()});b(a[0].form).submit(function(){c.remove();a.show()})}}};var e=!!("placeholder"in document.createElement("input"));b.fn.placeholder=function(){return e?this:this.each(function(){var a=b(this),c=new d(a);c.show(!0);a.focus(function(){c.hide()});a.blur(function(){c.show(!1)});b.browser.msie&&(b(window).load(function(){a.val()&&a.removeClass("placeholder");c.show(!0)}),a.focus(function(){if(this.value==""){var a=this.createTextRange();a.collapse(!0);a.moveStart("character",0);a.select()}}))})}})(jQuery);
|
||||
|
||||
|
|
@ -1,216 +0,0 @@
|
|||
// Stupid jQuery table plugin.
|
||||
|
||||
|
||||
|
||||
//http://joequery.github.com/Stupid-Table-Plugin/
|
||||
|
||||
|
||||
|
||||
// Call on a table
|
||||
// sortFns: Sort functions for your datatypes.
|
||||
(function($){
|
||||
$.fn.stupidtable = function(sortFns){
|
||||
var table = this; sortFns = sortFns || {};
|
||||
|
||||
// ==================================================== //
|
||||
// Utility functions //
|
||||
// ==================================================== //
|
||||
|
||||
// Merge sort functions with some default sort functions.
|
||||
sortFns = $.extend({}, {
|
||||
"int":function(a,b){ return parseInt(a, 10) - parseInt(b, 10); },
|
||||
"float":function(a,b){ return parseFloat(a) - parseFloat(b); },
|
||||
"string":function(a,b){ if (a<b) return -1; if (a>b) return +1; return 0;}
|
||||
}, sortFns);
|
||||
|
||||
// Array comparison. See http://stackoverflow.com/a/8618383
|
||||
var arrays_equal = function(a,b) { return !!a && !!b && !(a<b || b<a);}
|
||||
|
||||
// Return the resulting indexes of a sort so we can apply
|
||||
// this result elsewhere. This returns an array of index numbers.
|
||||
// return[0] = x means "arr's 0th element is now at x"
|
||||
var sort_map = function(arr, sort_function){
|
||||
var sorted = arr.slice(0).sort(sort_function);
|
||||
var map = [];
|
||||
var index = 0;
|
||||
for(var i=0; i<arr.length; i++){
|
||||
index = $.inArray(arr[i], sorted);
|
||||
|
||||
// If this index is already in the map, look for the next index.
|
||||
// This handles the case of duplicate entries.
|
||||
while($.inArray(index, map) != -1){
|
||||
index++;
|
||||
}
|
||||
map.push(index);
|
||||
}
|
||||
return map;
|
||||
}
|
||||
|
||||
// Apply a sort map to the array.
|
||||
var apply_sort_map = function(arr, map){
|
||||
var clone = arr.slice(0);
|
||||
for(var i=0; i<map.length; i++){
|
||||
newIndex = map[i];
|
||||
clone[newIndex] = arr[i];
|
||||
}
|
||||
return clone;
|
||||
}
|
||||
|
||||
// Returns true if array is sorted, false otherwise.
|
||||
// Checks for both ascending and descending
|
||||
var is_sorted_array = function(arr, sort_function){
|
||||
var clone = arr.slice(0);
|
||||
var reversed = arr.slice(0).reverse();
|
||||
var sorted = arr.slice(0).sort(sort_function);
|
||||
|
||||
// Check if the array is sorted in either direction.
|
||||
return arrays_equal(clone, sorted) || arrays_equal(reversed, sorted);
|
||||
}
|
||||
|
||||
|
||||
var what_order_sorted = function(data, sf, isa)
|
||||
{
|
||||
var tmp = [data[0], data[data.length - 1]];
|
||||
|
||||
tmp.sort(sf);
|
||||
|
||||
if(data[0] == tmp[0] || !isa)
|
||||
{
|
||||
return 'desc';
|
||||
}else{
|
||||
return 'asc';
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
// ==================================================== //
|
||||
// Begin execution! //
|
||||
// ==================================================== //
|
||||
// Do sorting when THs are clicked
|
||||
|
||||
table.delegate("th:not(.dontsort)", "click", function(){
|
||||
|
||||
if($(this).text().replace(/ /g, '') == '')
|
||||
{
|
||||
// empty header, don't allow sorting
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
var trs = table.find("tbody tr");
|
||||
var i = $(this).index();
|
||||
var classes = $(this).attr("class");
|
||||
var type = null;
|
||||
|
||||
if (classes){
|
||||
classes = classes.split(/\s+/);
|
||||
|
||||
for(var j=0; j<classes.length; j++){
|
||||
if(classes[j].search("sort-type-") != -1){
|
||||
type = classes[j].replace('sort-', '');
|
||||
break;
|
||||
}
|
||||
}
|
||||
if(type){
|
||||
type = type.split('-')[1];
|
||||
}
|
||||
else{
|
||||
type = "string";
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Don't attempt to sort if no data type
|
||||
//if(!type){return false;}
|
||||
|
||||
|
||||
var sortMethod = sortFns[type];
|
||||
|
||||
|
||||
// Gather the elements for this column
|
||||
column = [];
|
||||
|
||||
// Push either the value of the 'data-order-by' attribute if specified
|
||||
// or just the text() value in this column to column[] for comparison.
|
||||
trs.each(function(index,tr){
|
||||
var e = $(tr).children().eq(i);
|
||||
var order_by = e.attr('data-order-by') || e.text();
|
||||
column.push(order_by);
|
||||
});
|
||||
|
||||
|
||||
// If the column is already sorted, just reverse the order. The sort
|
||||
// map is just reversing the indexes.
|
||||
if(is_sorted_array(column, sortMethod)){
|
||||
column.reverse();
|
||||
var theMap = [];
|
||||
for(var i=column.length-1; i>=0; i--){
|
||||
theMap.push(i);
|
||||
}
|
||||
}else{
|
||||
// Get a sort map and apply to all rows
|
||||
theMap = sort_map(column, sortMethod);
|
||||
}
|
||||
|
||||
|
||||
// remove old sort classes (on this and other columns)
|
||||
$(this).parent().find('th').each(function()
|
||||
{
|
||||
$(this).removeClass('sortasc sortdesc');
|
||||
});
|
||||
|
||||
// what order are we sorting in?
|
||||
var whatorder = what_order_sorted(column, sortMethod, is_sorted_array(column, sortMethod));
|
||||
|
||||
// set new sort class
|
||||
$(this).addClass(whatorder == 'asc' ? 'sortasc' : 'sortdesc');
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
var sortedTRs = $(apply_sort_map(trs, theMap));
|
||||
|
||||
|
||||
|
||||
// Replace the content of tbody with the sortedTRs. Strangely (and
|
||||
// conveniently!) enough, .append accomplishes this for us.
|
||||
table.find("tbody").append(sortedTRs);
|
||||
|
||||
});
|
||||
|
||||
|
||||
|
||||
// remove th icon if no header text
|
||||
$(this).find('th').each(function()
|
||||
{
|
||||
var hv = $(this).text().replace(/ /g, '');
|
||||
|
||||
if(hv == '')
|
||||
{
|
||||
$(this).css('background-image', 'none');
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
})(jQuery);
|
||||
|
||||
|
||||
|
||||
|
||||
$('table.sortable').each(function()
|
||||
{
|
||||
var rows = $(this).find('tbody tr').length;
|
||||
|
||||
if(rows > 1)
|
||||
{
|
||||
$(this).stupidtable();
|
||||
}else{
|
||||
$(this).removeClass('sortable');
|
||||
}
|
||||
});
|
||||
|
||||
123
lsp/server.html
Executable file → Normal file
123
lsp/server.html
Executable file → Normal file
File diff suppressed because one or more lines are too long
139
lsp/test_embedmultitrack.html
Normal file
139
lsp/test_embedmultitrack.html
Normal file
|
|
@ -0,0 +1,139 @@
|
|||
<html>
|
||||
<head>
|
||||
<title></title>
|
||||
<meta content="">
|
||||
<style>
|
||||
#vidcontainer {
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
justify-content: space-around;
|
||||
}
|
||||
#vidcontainer .track {
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-flow: column nowrap;
|
||||
align-items: center;
|
||||
}
|
||||
#vidcontainer .track .trackname {
|
||||
flex-shrink: 0;
|
||||
display: none; /* comment this to show trackname */
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id=vidcontainer>
|
||||
</div>
|
||||
<script>
|
||||
var vidname = 'multibitrate'; // change this to the appropriate stream name
|
||||
var embedbase = 'http://localhost:8080/'; //change this to the appropriate host (with http port)
|
||||
|
||||
//load the info script
|
||||
var script = document.createElement('script');
|
||||
script.src = embedbase+'info_'+vidname+'.js';
|
||||
script.onerror = function(){
|
||||
document.getElementById('vidcontainer').innerHTML = 'Error loading "'+script.src+'".';
|
||||
};
|
||||
script.onload = function(){
|
||||
multitrack(vidname);
|
||||
}
|
||||
document.getElementById('vidcontainer').appendChild(script);
|
||||
|
||||
function multitrack(vidname) {
|
||||
if (typeof mistvideo[vidname] != 'undefined') {
|
||||
var vid = mistvideo[vidname];
|
||||
|
||||
var audio = false;
|
||||
vid.elements = [];
|
||||
if (typeof vid.meta.tracks != 'undefined') {
|
||||
var cont = document.getElementById('vidcontainer');
|
||||
var n = 0;
|
||||
var width = cont.offsetWidth * .49;
|
||||
for (var i in vid.meta.tracks) {
|
||||
var track = vid.meta.tracks[i];
|
||||
n++;
|
||||
|
||||
if (track.type != 'video') {
|
||||
continue;
|
||||
}
|
||||
|
||||
var child = document.createElement('div');
|
||||
child.className = 'track';
|
||||
child.innerHTML = '<span class=trackname>'+i+'</span>';
|
||||
|
||||
var sources = [];
|
||||
var rtmp = '';
|
||||
for (var j in vid.source) {
|
||||
if (vid.source[j].type == 'flash/10') {
|
||||
rtmp = vid.source[j].url+'?video='+n+'&audio='+(audio ? '0' : '-1');
|
||||
}
|
||||
else {
|
||||
sources.push('<source src="'+vid.source[j].url+'?video='+n+'&audio='+(audio ? '0' : '-1')+'">');
|
||||
}
|
||||
}
|
||||
|
||||
//check html mp4 support
|
||||
var support = false;
|
||||
/*try {
|
||||
var v = document.createElement('video');
|
||||
if( v && v.canPlayType('video/mp4') != "" ){
|
||||
support = true;
|
||||
}
|
||||
} catch(e){}*/
|
||||
|
||||
var height = width / track.width * track.height;
|
||||
if (support) {
|
||||
//HTML5 MP4 embed
|
||||
var video = document.createElement('video');
|
||||
video.setAttribute('style','width:'+width+'px; height:'+height+'px;');
|
||||
if (!audio) {
|
||||
video.setAttribute('controls','');
|
||||
video.addEventListener('play',function(){
|
||||
for (var i in vid.elements) {
|
||||
if (vid.elements[i].paused) {
|
||||
vid.elements[i].play();
|
||||
}
|
||||
}
|
||||
});
|
||||
video.addEventListener('pause',function(){
|
||||
for (var i in vid.elements) {
|
||||
if (!vid.elements[i].paused) {
|
||||
vid.elements[i].pause();
|
||||
}
|
||||
}
|
||||
});
|
||||
audio = true;
|
||||
}
|
||||
else {
|
||||
//just in case..
|
||||
video.volume = 0;
|
||||
}
|
||||
video.innerHTML = sources.join('');
|
||||
}
|
||||
else {
|
||||
//go for RTMP (Flash/10) instead
|
||||
var video = document.createElement('object');
|
||||
video.setAttribute('width',width);
|
||||
video.setAttribute('height',height);
|
||||
var url = encodeURIComponent(rtmp)+'&controlBarMode=floating&initialBufferTime=0.5&expandedBufferTime=5&autoPlay=true&minContinuousPlaybackTime=3' + (vid.type == 'live' ? "&streamType=live" : "");
|
||||
var params = [];
|
||||
params.push('<param name="movie" value="http://fpdownload.adobe.com/strobe/FlashMediaPlayback_101.swf"></param>');
|
||||
params.push('<param name="flashvars" value="src='+url+'"></param>');
|
||||
params.push('<param name="allowFullScreen" value="true"></param>');
|
||||
params.push('<param name="allowscriptaccess" value="always"></param>');
|
||||
params.push('<param name="wmode" value="direct"></param>');
|
||||
params.push('<param name="autoPlay" value="true">');
|
||||
params.push('<embed src="http://fpdownload.adobe.com/strobe/FlashMediaPlayback_101.swf" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="'+width+'" height="'+height+'" flashvars="src='+url+'"></embed>');
|
||||
video.innerHTML = params.join('');
|
||||
}
|
||||
|
||||
|
||||
child.appendChild(video);
|
||||
vid.elements.push(video);
|
||||
cont.appendChild(child);
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -3,7 +3,7 @@
|
|||
<title>Test the stream embedding</title>
|
||||
<style></style>
|
||||
<script src=plugins/jquery.js></script>
|
||||
<script src='../src/connectors/embed.js'></script>
|
||||
<script src='../src/embed.js'></script>
|
||||
<script>
|
||||
var embed_settings = {};
|
||||
$(function(){
|
||||
|
|
@ -38,11 +38,11 @@
|
|||
Enter the streamname: <input type=text value=bunny name=streamName>
|
||||
</label><br>
|
||||
<label>
|
||||
Force embed type number: <input type=number name=force min=1> (blank for auto)
|
||||
Force embed type: <input type=text name=force> (blank for auto)
|
||||
</label><br>
|
||||
<button id=embed>Embed</button>
|
||||
<div id=button_container></div>
|
||||
<div id=embedcontainer style="width: 100%; height: 35em;" data-forcesupportcheck>
|
||||
<div id=embedcontainer style="width: 100%; height: 35em;" data-forcesupportcheck data-autoplay>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
216
src/embed.js
216
src/embed.js
|
|
@ -1,71 +1,78 @@
|
|||
function mistembed(streamname)
|
||||
{
|
||||
function mistembed(streamname) {
|
||||
// return the current flash version
|
||||
function flash_version()
|
||||
{
|
||||
function flash_version() {
|
||||
var version = 0;
|
||||
|
||||
try
|
||||
{
|
||||
try {
|
||||
// check in the mimeTypes
|
||||
version = navigator.mimeTypes['application/x-shockwave-flash'].enabledPlugin.description.replace(/([^0-9\.])/g, '').split('.')[0];
|
||||
}catch(e){}
|
||||
try
|
||||
{
|
||||
} catch(e){}
|
||||
try {
|
||||
// for our special friend IE
|
||||
version = new ActiveXObject('ShockwaveFlash.ShockwaveFlash').GetVariable("$version").replace(/([^0-9\,])/g, '').split(',')[0];
|
||||
}catch(e){}
|
||||
} catch(e){}
|
||||
|
||||
return parseInt(version, 10);
|
||||
};
|
||||
|
||||
// return true if silverlight is installed
|
||||
function silverlight_installed()
|
||||
{
|
||||
function silverlight_installed() {
|
||||
var plugin;
|
||||
|
||||
try
|
||||
{
|
||||
try {
|
||||
// check in the mimeTypes
|
||||
plugin = navigator.plugins["Silverlight Plug-In"];
|
||||
return !!plugin;
|
||||
}catch(e){}
|
||||
try
|
||||
{
|
||||
} catch(e){}
|
||||
try {
|
||||
// for our special friend IE
|
||||
plugin = new ActiveXObject('AgControl.AgControl');
|
||||
return true;
|
||||
}catch(e){}
|
||||
} catch(e){}
|
||||
|
||||
return false;
|
||||
};
|
||||
|
||||
// return true if the browser thinks it can play the mimetype
|
||||
function html5_video_type(type)
|
||||
{
|
||||
function html5_video_type(type) {
|
||||
var support = false;
|
||||
|
||||
try
|
||||
{
|
||||
try {
|
||||
var v = document.createElement('video');
|
||||
|
||||
if( v && v.canPlayType(type) != "" )
|
||||
{
|
||||
support = true; // true-ish, anyway
|
||||
}
|
||||
}catch(e){}
|
||||
} catch(e){}
|
||||
|
||||
return support;
|
||||
}
|
||||
|
||||
//return true if rtsp is supported
|
||||
function rtsp_support() {
|
||||
var plugin;
|
||||
|
||||
try {
|
||||
// check in the mimeTypes
|
||||
plugin = navigator.mimeTypes["application/x-google-vlc-plugin"];
|
||||
return !!plugin;
|
||||
} catch(e){}
|
||||
try {
|
||||
// for our special friend IE
|
||||
plugin = new ActiveXObject('VideoLAN.Vlcplugin.1');
|
||||
return true;
|
||||
} catch(e){}
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
// parse a "type" string from the controller. Format:
|
||||
// xxx/# (e.g. flash/3) or xxx/xxx/xxx (e.g. html5/application/ogg)
|
||||
function parseType(type)
|
||||
{
|
||||
function parseType(type) {
|
||||
var split = type.split('/');
|
||||
|
||||
if( split.length > 2 )
|
||||
{
|
||||
if( split.length > 2 ) {
|
||||
split[1] += '/' + split[2];
|
||||
}
|
||||
|
||||
|
|
@ -73,24 +80,21 @@ function mistembed(streamname)
|
|||
}
|
||||
|
||||
// return true if a type is supported
|
||||
function hasSupport(type)
|
||||
{
|
||||
function hasSupport(type) {
|
||||
var typemime = parseType(type);
|
||||
|
||||
switch(typemime[0])
|
||||
{
|
||||
switch(typemime[0]) {
|
||||
case 'flash': return flash_version() >= parseInt(typemime[1], 10); break;
|
||||
case 'html5': return html5_video_type(typemime[1]); break;
|
||||
case 'rtsp': return rtsp_support(); break;
|
||||
case 'silverlight': return silverlight_installed(); break;
|
||||
|
||||
default: return false; break;
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
// build HTML for certain kinds of types
|
||||
function buildPlayer(src, container, videowidth, videoheight, vtype)
|
||||
{
|
||||
function buildPlayer(src, container, videowidth, videoheight, vtype) {
|
||||
// used to recalculate the width/height
|
||||
var ratio;
|
||||
|
||||
|
|
@ -98,16 +102,14 @@ function mistembed(streamname)
|
|||
var containerwidth = parseInt(container.scrollWidth, 10);
|
||||
var containerheight = parseInt(container.scrollHeight, 10);
|
||||
|
||||
if(videowidth > containerwidth && containerwidth > 0)
|
||||
{
|
||||
if(videowidth > containerwidth && containerwidth > 0) {
|
||||
ratio = videowidth / containerwidth;
|
||||
|
||||
videowidth /= ratio;
|
||||
videoheight /= ratio;
|
||||
}
|
||||
|
||||
if(videoheight > containerheight && containerheight > 0)
|
||||
{
|
||||
if(videoheight > containerheight && containerheight > 0) {
|
||||
ratio = videoheight / containerheight;
|
||||
|
||||
videowidth /= ratio;
|
||||
|
|
@ -117,17 +119,16 @@ function mistembed(streamname)
|
|||
var maintype = parseType(src.type);
|
||||
mistvideo[streamname].embedded = src;
|
||||
|
||||
switch(maintype[0])
|
||||
{
|
||||
switch(maintype[0]) {
|
||||
case 'flash':
|
||||
// maintype[1] is already checked (i.e. user has version > maintype[1])
|
||||
var flashplayer,
|
||||
url = encodeURIComponent(src.url) + '&controlBarMode=floating&initialBufferTime=0.5&expandedBufferTime=5&minContinuousPlaybackTime=3' + (vtype == 'live' ? "&streamType=live" : "");
|
||||
url = encodeURIComponent(src.url) + '&controlBarMode=floating&initialBufferTime=0.5&expandedBufferTime=5&minContinuousPlaybackTime=3' + (vtype == 'live' ? "&streamType=live" : "") + (autoplay ? '&autoPlay=true' : '');
|
||||
|
||||
if( parseInt(maintype[1], 10) >= 10 )
|
||||
{
|
||||
if( parseInt(maintype[1], 10) >= 10 ) {
|
||||
flashplayer = 'http://fpdownload.adobe.com/strobe/FlashMediaPlayback_101.swf';
|
||||
}else{
|
||||
}
|
||||
else {
|
||||
flashplayer = 'http://fpdownload.adobe.com/strobe/FlashMediaPlayback.swf';
|
||||
}
|
||||
|
||||
|
|
@ -137,25 +138,54 @@ function mistembed(streamname)
|
|||
'<param name="allowFullScreen" value="true"></param>' +
|
||||
'<param name="allowscriptaccess" value="always"></param>' +
|
||||
'<param name="wmode" value="direct"></param>' +
|
||||
(autoplay ? '<param name="autoPlay" value="true">' : '') +
|
||||
'<embed src="' + flashplayer + '" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="' + videowidth + '" height="' + videoheight + '" flashvars="src=' + url + '"></embed>' +
|
||||
'</object>';
|
||||
break;
|
||||
|
||||
case 'html5':
|
||||
container.innerHTML += '<video width="' + videowidth + '" height="' + videoheight + '" src="' + encodeURI(src.url) + '" controls="controls" ><strong>No HTML5 video support</strong></video>';
|
||||
container.innerHTML += '<video width="' + videowidth + '" height="' + videoheight + '" src="' + encodeURI(src.url) + '" controls="controls" '+(autoplay ? 'autoplay="autoplay"' : '')+'><strong>No HTML5 video support</strong></video>';
|
||||
break;
|
||||
|
||||
case 'silverlight':
|
||||
container.innerHTML += '<object data="data:application/x-silverlight," type="application/x-silverlight" width="' + videowidth + '" height="' + videoheight + '"><param name="source" value="' + encodeURI(src.url) + '/player.xap"/><param name="onerror" value="onSilverlightError" /><param name="autoUpgrade" value="true" /><param name="background" value="white" /><param name="enableHtmlAccess" value="true" /><param name="minRuntimeVersion" value="3.0.40624.0" /><param name="initparams" value =\'autoload=false,autoplay=true,displaytimecode=false,enablecaptions=true,joinLive=true,muted=false,playlist=<playList><playListItems><playListItem title="Test" description="testing" mediaSource="' + encodeURI(src.url) + '" adaptiveStreaming="true" thumbSource="" frameRate="25.0" width="" height=""></playListItem></playListItems></playList>\' /><a href="http://go.microsoft.com/fwlink/?LinkID=124807" style="text-decoration: none;"> <img src="http://go.microsoft.com/fwlink/?LinkId=108181" alt="Get Microsoft Silverlight" style="border-style: none" /></a></object>';
|
||||
case 'rtsp':
|
||||
/*container.innerHTML += '<object classid="clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA" width="'+videowidth+'" height="'+videoheight+'">'+
|
||||
'<param name="src" value="'+encodeURI(src.url)+'">'+
|
||||
'<param name="console" value="video1">'+
|
||||
'<param name="controls" value="All">'+
|
||||
'<param name="autostart" value="false">'+
|
||||
'<param name="loop" value="false">'+
|
||||
'<embed name="myMovie" src="'+encodeURI(src.url)+'" width="'+videowidth+'" height="'+videoheight+'" autostart="false" loop="false" nojava="true" console="video1" controls="All"></embed>'+
|
||||
'<noembed>Something went wrong.</noembed>'+
|
||||
'</object>'; //realplayer, doesnt work */
|
||||
container.innerHTML += '<embed type="application/x-google-vlc-plugin"'+
|
||||
'pluginspage="http://www.videolan.org"'+
|
||||
'width="'+videowidth+'"'+
|
||||
'height="'+videoheight+'"'+
|
||||
'target="'+encodeURI(src.url)+'"'+
|
||||
'autoplay="'+(autoplay ? 'yes' : 'no')+'"'+
|
||||
'>'+
|
||||
'</embed>'+
|
||||
'<object classid="clsid:9BE31822-FDAD-461B-AD51-BE1D1C159921" codebase="http://downloads.videolan.org/pub/videolan/vlc/latest/win32/axvlc.cab">'+
|
||||
'</object>'; //vlc, seems to work, sort of. it's trying anyway
|
||||
break;
|
||||
|
||||
case 'silverlight':
|
||||
container.innerHTML += '<object data="data:application/x-silverlight," type="application/x-silverlight" width="' + videowidth + '" height="' + videoheight + '">'+
|
||||
'<param name="source" value="' + encodeURI(src.url) + '/player.xap"/>'+
|
||||
'<param name="onerror" value="onSilverlightError" />'+
|
||||
'<param name="autoUpgrade" value="true" />'+
|
||||
'<param name="background" value="white" />'+
|
||||
'<param name="enableHtmlAccess" value="true" />'+
|
||||
'<param name="minRuntimeVersion" value="3.0.40624.0" />'+
|
||||
'<param name="initparams" value =\'autoload=false,'+(autoplay ? 'autoplay=true' : 'autoplay=false')+',displaytimecode=false,enablecaptions=true,joinLive=true,muted=false,playlist=<playList><playListItems><playListItem title="Test" description="testing" mediaSource="' + encodeURI(src.url) + '" adaptiveStreaming="true" thumbSource="" frameRate="25.0" width="" height=""></playListItem></playListItems></playList>\' />'+
|
||||
'<a href="http://go.microsoft.com/fwlink/?LinkID=124807" style="text-decoration: none;"> <img src="http://go.microsoft.com/fwlink/?LinkId=108181" alt="Get Microsoft Silverlight" style="border-style: none" /></a>'+
|
||||
'</object>';
|
||||
break;
|
||||
default:
|
||||
container.innerHTML += '<strong>Missing embed code for output type "'+src.type+'"</strong>';
|
||||
|
||||
|
||||
case 'fallback':
|
||||
container.innerHTML += '<strong>No support for any player found</strong>';
|
||||
break;
|
||||
}
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
var video = mistvideo[streamname],
|
||||
container = document.createElement('div'),
|
||||
|
|
@ -168,6 +198,9 @@ function mistembed(streamname)
|
|||
if (me.parentNode.hasAttribute('data-forcesupportcheck')) {
|
||||
var forceSupportCheck = true;
|
||||
}
|
||||
if (me.parentNode.hasAttribute('data-autoplay')) {
|
||||
var autoplay = true;
|
||||
}
|
||||
|
||||
if (video.width == 0) { video.width = 250; }
|
||||
if (video.height == 0) { video.height = 250; }
|
||||
|
|
@ -185,66 +218,39 @@ function mistembed(streamname)
|
|||
}
|
||||
else if ((typeof video.source == 'undefined') || (video.source.length < 1)) {
|
||||
// no stream sources
|
||||
container.innerHTML = '<strong>Error: no streams found</strong>';
|
||||
container.innerHTML = '<strong>Error: no protocols found</strong>';
|
||||
}
|
||||
else{
|
||||
else {
|
||||
// no error, and sources found. Check the video types and output the best
|
||||
// available video player.
|
||||
var i,
|
||||
vtype = (video.type ? video.type : 'unknown'),
|
||||
foundPlayer = false,
|
||||
len = video.source.length;
|
||||
|
||||
if (typeof forceType != 'undefined') {
|
||||
i = forceType;
|
||||
if (typeof video.source[i] == 'undefined') {
|
||||
container.innerHTML = '<strong>Invalid force integer ('+i+').</strong>';
|
||||
}
|
||||
else {
|
||||
if ( hasSupport(video.source[i].type) ) {
|
||||
video.source[i].browser_support = true;
|
||||
buildPlayer(video.source[i], container.parentNode, video.width, video.height, vtype);
|
||||
}
|
||||
else {
|
||||
video.source[i].browser_support = false;
|
||||
container.innerHTML = '<strong>Your browser does not support the type "'+video.source[i].type+'".</strong>';
|
||||
vtype = (video.type ? video.type : 'unknown'),
|
||||
foundPlayer = false,
|
||||
len = video.source.length;
|
||||
|
||||
for (var i in video.source) {
|
||||
var support = hasSupport(video.source[i].type);
|
||||
video.source[i].browser_support = support;
|
||||
if ((support) || (forceType)) {
|
||||
if ((!forceType) || ((forceType) && (video.source[i].type.indexOf(forceType) >= 0))) {
|
||||
if (foundPlayer === false) {
|
||||
foundPlayer = i;
|
||||
if (!forceSupportCheck) {
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
if (foundPlayer === false) {
|
||||
// of all the streams given, none was supported (eg. no flash and HTML5 video). Display error
|
||||
container.innerHTML = '<strong>No support for any player found</strong>';
|
||||
}
|
||||
else {
|
||||
|
||||
for(i = 0; i < len; i++)
|
||||
{
|
||||
//console.log("trying support for type " + video.source[i].type + " (" + parseType(video.source[i].type)[0] + " - " + parseType(video.source[i].type)[1] + ")");
|
||||
if( hasSupport( video.source[i].type ) )
|
||||
{
|
||||
video.source[i].browser_support = true;
|
||||
if (!foundPlayer) { foundPlayer = i; }
|
||||
if (!forceSupportCheck) {
|
||||
// we support this kind of video, so build it.
|
||||
buildPlayer(video.source[i], container.parentNode, video.width, video.height, vtype);
|
||||
|
||||
// we've build a player, so we're done here
|
||||
break; // break for() loop
|
||||
}
|
||||
}
|
||||
else {
|
||||
video.source[i].browser_support = false;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
if(foundPlayer === false)
|
||||
{
|
||||
// of all the streams given, none was supported (eg. no flash and HTML5 video). Display error
|
||||
buildPlayer({type: 'fallback'}, container.parentNode, video.width, video.height);
|
||||
}
|
||||
else if (forceSupportCheck) {
|
||||
// we support this kind of video, so build it.
|
||||
buildPlayer(video.source[foundPlayer], container.parentNode, video.width, video.height, vtype);
|
||||
}
|
||||
// we support this kind of video, so build it.
|
||||
buildPlayer(video.source[foundPlayer], container, video.width, video.height, vtype);
|
||||
}
|
||||
}
|
||||
|
||||
return (typeof mistvideo[streamname].embedded_type != 'undefined' ? mistvideo[streamname].embedded_type : false);
|
||||
return (mistvideo[streamname].embedded ? mistvideo[streamname].embedded.type : false);
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue