make div absolute on finger swipe

make div absolute on finger swipe - javascript

I am using TouchSwipe in my code. I have an #myimageflow div which contains 12 images and one div.
when I swipe I want only the images to swipe, the div should not move.
$("#myImageFlow").swipe({
swipe:function(event, direction, distance, duration, fingerCount) {
if(direction == 'left') {
my.MouseWheel.handle(-1);
} else if (direction == 'right') {
my.MouseWheel.handle(1);
}
}
});
HTML code::
iSlider
<!-- CSS -->
<link rel="stylesheet" href="css/style.css" type="text/css" />
<link rel="stylesheet" href="css/iSlider.css" type="text/css" />
<!-- JS -->
<!--<script type="text/javascript" src="js/iSlider.js"></script> -->
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<!--<script type="text/javascript" src="js/jquery-1.7.1.js"></script>-->
<!--<script type="text/javascript" src="js/jquery.js"></script>-->
<script type="text/javascript" src="js/jquery.ui.touch-punch.js"></script>
<script type="text/javascript" src="js/jquery-css-transform.js"></script>
<script type="text/javascript" src="js/rotate3Di.js"></script>
<script type="text/javascript" src="js/klass.min.js"></script>
<script type="text/javascript">
var imgArr = new Array();
var imgFront=new Array();
var i = 1;
var n=0;
var backimg=new Array();
var frontimg=new Array();
var clickEnabled = true;
$(document).ready(function () {
/* Reading the data from XML file*/
$.ajax({
type: "GET",
url: "photos.xml",
dataType: "xml",
success: function(xml) {
$(xml).find('item').each(function(){
var path = $(this).attr('path');
var width = $(this).attr('width');
var height = $(this).attr('height');
var id = $(this).attr('id');
var alt = $(this).attr('alt');
var longdesc = $(this).find('longdesc').text();
var description = $(this).find('desc').text();
$('#myImageFlow').append('<img src="'+path+'" id='+id+' height="'+height+'" width="'+ width+'" longdesc="'+longdesc+'" alt="'+alt+'"/>');
imgArr[i] = description;
imgFront[i]=longdesc;
backimg[i]=longdesc;
frontimg[i]=path;
i = i+1;
});
}
});
/* ===================================== */
//$("#myImageFlow").show();
$.getScript('js/iSlider.js');
$.getScript('js/code.photoswipe.jquery-3.0.5.js');
$.getScript('js/touchSwipe.js');
});
</head>
<body style="background-image:url('img/Mesh2.png');background-repeat:no-repeat; background-size: cover; width=:'100%'">
<h1>iSlider</h1>
<div id="header">
</div>
<div id="container">
<div id="center" class="column">
<!-- This is all the XHTML ImageFlow needs -->
<div id="myImageFlow" class="imageflow">
<div id="front">Initialy This is Front </div>
</div>
</div>
<div id="left" class="column">
</div>
<div id="right" class="column">
</div>
</div>
<div id="footer">
</div>
</body>
</html>

Related

google stand alone webapp unable to get message after submit

Hi I'm using this small google standalone webapp for the users to submit a number and i'm trying to get it so that if the number was already submitted the form will not be submitted and a message saying it was already submitted would popup. But if the number was not already submitted the message would say Thank you it was successfully submitted everything works great except for the message part is not showing up
here's my code
GS Code
function doGet(request) {
return HtmlService.createTemplateFromFile('Index').evaluate();
}
/* #Include JavaScript and CSS Files */
function include(filename) {
return HtmlService.createHtmlOutputFromFile(filename)
.getContent();
}
/* #Process Form */
function processForm(formObject) {
var lock = LockService.getScriptLock();
lock.waitLock(3000);
var ss = SpreadsheetApp.openById("SheetID");
var ws = ss.getSheetByName("Copy of Data");
var existingSB = ws.getRange("H2:H").getValues().flat(); // Flatten the 2D array into a 1D array
var ws2 = ss.getSheetByName('HelpSheet');
var nextSubmit = ws2.getRange('L13').getValue() + 1;
var nextID = ws2.getRange('LastFormID').getValue() + 1;
var SBNumber = parseInt(formObject.SBNum);
console.log(existingSB);
// Check if SBNumber exists in existingSB array
if (existingSB.indexOf(SBNumber) !== -1) {
// SBNumber already exists, do nothing
lock.releaseLock();
var existingMessage = '<p>This Number Was Already Submited</p>';
var htmlOutput = HtmlService.createHtmlOutput(existingMessage);
return htmlOutput;
}
// SBNumber doesn't exist, continue with appending to spreadsheet
var USERNAME = 'API Key';
var PASSWORD = 'x';
var url = 'https://test.salesbinder.com/api/2.0/documents.json?documentNumber=' + SBNumber + '&compact=false&contextId=5';
var headers = {
"Authorization": "Basic " + Utilities.base64Encode(USERNAME + ':' + PASSWORD)
};
let response = UrlFetchApp.fetch(url, { headers });
const value = JSON.parse(response.getContentText());
const addValues = [value.document[0].customer.name, value.document[0].issue_date, value.document[0].attention, value.document[0].public_note];
const res = value.document[0].document_items.map(o => [value.document[0].document_number, ...["name","public_notes"].map(h => o[h]), ...addValues])
var Client = addValues[0];
var DateIssued = addValues[1];
var Consultant = addValues[2];
var Notes = addValues[3];
Notes = Notes.replace(/<br\s*\/?>/gi, "\n");
Notes = Notes.replace(/<[^>]*>/g, "");
var formattedDate = formatDate(DateIssued);
ws.appendRow([nextID,new Date(),formattedDate,"Parts",,Client,Consultant,formObject.SBNum,,,,,,,,,,,Notes
]);
lock.releaseLock();
var thankYouMessage = '<p>Thank You Successfully Posted</p>';
var htmlOutput = HtmlService.createHtmlOutput(thankYouMessage);
return htmlOutput;
}
function formatDate(dateStr) {
var date = new Date(dateStr);
var options = {month: 'short', day: '2-digit', year: 'numeric'};
return date.toLocaleDateString('en-US', options);
}
HTML Code
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"
integrity="sha384-xrRywqdh3PHs8keKZN+8zzc5TX0GRTLCcmivcbNJWm2rs5C8PRhcEn3czEjhAO9o"
crossorigin="anonymous"></script>
<?!= include('JavaScript'); ?>
<?!= include('CSS'); ?>
<!-- Select2 CDN -->
<link href="https://cdn.jsdelivr.net/npm/select2#4.1.0-beta.1/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2#4.1.0-beta.1/dist/js/select2.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<!-- CSS only -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<!-- JS, Popper.js, jquery and jQuery autocomplete -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous">
</script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js"
integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN"
crossorigin="anonymous">
</script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"
integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYx
crossorigin="anonymous">
</script>
<script>
$(document).ready(function() {
$(window).keydown(function(event){
if(event.keyCode == 13) {
event.preventDefault();
return false;
}
});
});
</script>
<base target="_top">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-12">
<form id="myForm" onsubmit="handleFormSubmit(this)">
<p class="h4 mb-4 text-center"></p>
<h4 style="color:blue">Company Name </h4>
<h4 style="color:blue">Insert Ticket Number </h4>
<br>
<br>
<!------------------------------------------------ SALEBINDER NUMBER ----------------------->
<div class="form-row">
<div class="form-group col-md-4">
<label for="SBNum">SalesBinder Number</label>
<input type="text" class="form-control" id="SBNum" name="SBNum" >
</div>
</div>
<!-------------------------- Submit botton ------------------------------>
<button type="submit" class="btn btn-success btn-block col-md-3" >Submit</button>
</form>
<br><br><br>
<div id="output"></div>
</div>
</div>
</div>
</body>
</html>
CSS Code
<style>
.btn-group-xs > .btn, .btn-xs {
padding: .25rem .4rem;
font-size: .875rem;
line-height: .5;
border-radius: .2rem;
}
type="text/css">
.form-group {
margin: 15px;
}
.mycheckbox input[type="checkbox"]
{
margin-right: 5px;
}
.custom-control-label::before,
.custom-control-label::after {
top: .8rem;
width: 1.25rem;
height: 1.25rem;
}
.custom-control-label::before ,.custom-control-label::after{width:20px; height:20px}
.dollar{
display:inline-block;
position: relative;
}
.dollar input{
padding-left:15px;
}
.dollar:before {
position: absolute;
content:"$";
left:5px;
top:2px;
}
</style>
Javascript Code
<script>
// Prevent forms from submitting.
function preventFormSubmit() {
var forms = document.querySelectorAll('form');
for (var i = 0; i < forms.length; i++) {
forms[i].addEventListener('submit', function(event) {
event.preventDefault();
});
}
}
window.addEventListener('load', preventFormSubmit);
function handleFormSubmit(formObject) {
google.script.run.processForm(formObject);
document.getElementById("myForm").reset();
}
</script>

Draggable is not working getting the uncaught reference error

I am trying to add a draggable to the frames but it is not working and throwing the below exception
created the Frames using iframe but could not apply the draggable for my frames.Please help me to solve my problem.
Uncaught ReferenceError: HSplitter is not defined at HTMLDivElement.onmousedown
Please find my code below:
var HSplitter = {
mouseDown: function (_split, event)
{
if(!this.isToggle)
{
this.parent = _split.parentNode.parentNode; //td
this.currentSplit = _split;
this.splitterWidth = $(this.currentSplit).getWidth();
this.splitPointX = Event.pointerX(event);
this.drag = true;
this.splitDiv = $(this.parent).getElementsByClassName("HSplitDiv")[0];
//min width of a parent container couldn't be less than splitter width.
if( this.minWidth < this.splitterWidth )
this.minWidth = this.splitterWidth;
this.mouseOver(_split, event);
$(this.splitDiv).setStyle({paddingRight: '0px'}); //reset padding
this._splitDivOverflow(true); //set overflow to ON
}
},
mouseUp: function (split, event)
{
if(!this.isToggle)
{
this.drag = false;
this._setDynamicOverflow();
}
},
};
<head>
<link href="/Work/css/tab_style.css" type="text/css" rel="stylesheet"/>
<link href="D:/cnsdi-projects/style.css" type="text/css" rel="stylesheet"/>
<link rel="stylesheet" href="/Work/css/1.10.19/dataTables.bootstrap.min.css">
<link rel="stylesheet" href="/Work/css/1.10.19/bootstrap.min.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">
</script>
<script type="text/javascript" src="/Work/js/3.3.7/bootstrap.min.js">
</script>
</head>
<body>
<div class="tab-content" >
<div id="sectionA" class="tab-pane fade in active" style="overflow:visible;">
<iframe scrolling="yes" src="pg1.html" name="leftside" style="position:absolute;top:140px;left:0%;width:25%;height:100%;border: none;" ></iframe>
<div class="split1" onselect="return false;" unselectable="on" onmouseup="HSplitter.mouseUp(this, event);" onmousedown="HSplitter.setMaxMinWidth('-1','-1'); HSplitter.mouseDown(this, event);" style="left: auto;">
<span class="collapse l-splt-btn" onclick="HSplitter.splitToggle(this);"></span>
</div>
<iframe src="pg2.html" name="rightside" scrolling="yes" style="position:absolute;top:140px;left:25%;width:75%;height:50%;border: none;"></iframe>
<div class="split"><div class="vcollapse d-splt-btn" onclick="VSplitter.splitToggle(this);" toppaneheight="50%" id="idx1320192_vspltbtn"></div></div>
<iframe src="pg3.html" name="rightside" scrolling="yes" style="position:absolute;top:450px;left:25%;width:75%;height:30%;border: none;"></iframe>
</div>
</body>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/utils/Draggable.min.js"></script>
Please input this code in your site header and if it doesn't work , let me know.
Thank you!

I have a jquery issue. I have two divs showing and hiding. Both are set to refresh but one is overriding it

I have a jquery issue I have two divs showing and hiding and both are set to refresh but one is over riding the other. I am not sure why the load1 were div1 is at keeps overriding the load2 div2. so when i click on button completed the received div is automatically refreshing and changing the page back to received. I will try to get this on fiddle.
<!DOCTYPE html>
<html>
<head>
<title></title>
<link href="http://localhost/test/assets/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="http://localhost/test/assets/css/custom.css" rel="stylesheet">
<link href="http://localhost/test/assets/css/custom_edit.css" rel="stylesheet">
<link href="http://localhost/test/assets/datatables/css/dataTables.bootstrap.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<pre><button class="btn btn-sm btn-primary" id="received">Received</button><button class="btn btn-sm btn-success" id="completed">Completed</button></pre>
<div id="load1">
<div id="div1">
<h3>Received Section</h3>
//code goes here......
</div>
</div>
<div id="load2">
<input type="hidden" id="show_completed" value="1" name="show_completed">
<div id="div2">
<h3>Completed Section</h3>
//code goes here......
</div>
</div>
<footer>
<script src="http://localhost/test/assets/jquery/jquery-3.1.0.min.js"></script>
<script src="http://localhost/test/assets/bootstrap/js/bootstrap.min.js"></script>
<script src="http://localhost/test/assets/datatables/js/jquery.dataTables.min.js"></script>
<script src="http://localhost/test/assets/datatables/js/dataTables.bootstrap.js"></script>
<script type="text/javascript">
var $show_completed = document.getElementById('show_completed');
if($show_completed.value == '0')
{
setInterval(function() {
$("#load1").load(location.href+" #load1>*","");
}, 10000); // seconds to wait, miliseconds
}
else($show_completed.value == '1')
{
setInterval(function() {
$("#load2").load(location.href+" #load2>*","");
}, 100000); // seconds to wait, miliseconds
}
</script>
<script type="text/javascript">
$(document).ready( function () {
$('#div2').fadeOut();
} );
$("#received").on('click', function() {
document.getElementById("show_completed").value='0';
$("#div1").fadeIn();
$("#div2").fadeOut();
});
$("#completed").on('click', function() {
document.getElementById("show_completed").value='1';
$("#div2").fadeIn();
$("#div1").fadeOut();
});
</script>
</footer>
</body>
</html>

Try this... Hope it helps
<!DOCTYPE html>
<html>
<head>
<title></title>
<link href="http://localhost/test/assets/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="http://localhost/test/assets/css/custom.css" rel="stylesheet">
<link href="http://localhost/test/assets/css/custom_edit.css" rel="stylesheet">
<link href="http://localhost/test/assets/datatables/css/dataTables.bootstrap.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="http://localhost/test/assets/bootstrap/js/bootstrap.min.js"></script>
<script src="http://localhost/test/assets/datatables/js/jquery.dataTables.min.js"></script>
<script src="http://localhost/test/assets/datatables/js/dataTables.bootstrap.js"></script>
</head>
<body>
<pre>
<button class="btn btn-sm btn-primary" id="received">Received</button>
<button class="btn btn-sm btn-success" id="completed">Completed</button>
</pre>
<div id="load1">
<div id="div1">
<h3>Received Section</h3>
//code goes here......
</div>
</div>
<div id="load2">
<input type="hidden" id="show_completed" value="1" name="show_completed">
<div id="div2">
<h3>Completed Section</h3>
//code goes here......
</div>
</div>
<script type="text/javascript">
var $show_completed = document.getElementById('show_completed');
if($show_completed.value == '0'){
setInterval(function() {
$("#load1").load(location.href+" #load1>*","");
}, 10000); // seconds to wait, miliseconds
} else($show_completed.value == '1'){
setInterval(function() {
$("#load2").load(location.href+" #load2>*","");
}, 100000); // seconds to wait, miliseconds
}
</script>
<script type="text/javascript">
$(document).ready( function () {
$('#div2').fadeOut();
});
$("#received").on('click', function() {
document.getElementById("show_completed").value='0';
$("#div1").fadeIn();
$("#div2").fadeOut();
});
$("#completed").on('click', function() {
document.getElementById("show_completed").value='1';
$("#div2").fadeIn();
$("#div1").fadeOut();
});
</script>
</body>
</html>

How to insert extra fields to a DB table in dhtmlxscheduler?

I am new with dhtmlxscheduler. I have created some demo schedulers. As everyone knows, we can make custom lightbox and send data accordingly, however, what I really want to know is how to send a default variable's data to database from php. Well, I know it sounds messy. Let me make it clear. Below is my scheduler.html:
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>How to start</title>
<link rel="stylesheet" href="dhtmlxScheduler/codebase/dhtmlxscheduler.css" type="text/css">
<style type="text/css" media="screen">
html, body{
margin:0px;
padding:0px;
height:100%;
overflow:hidden;
}
</style>
</head>
<script>
function init() {
scheduler.config.multi_day = true;
scheduler.config.xml_date="%Y-%m-%d %H:%i";
var d = new Date();
var m = d.getMonth();
var y = d.getFullYear();
scheduler.config.limit_start = new Date(y,m,1);
scheduler.config.limit_end = new Date (2100,0,1);
scheduler.init('scheduler_here', new Date(), "month");
//scheduler.load("dhtmlxScheduler/demo_php/data.php");
scheduler.locale.labels.section_type = "Type";
scheduler.config.lightbox.sections = [
{name:"description", height:200, map_to:"text", type:"textarea" , focus:true},
{name:"type", height:21, map_to:"type", type:"select", options:[
{key:"Call", label:"Call"},
{key:"Appointment", label:"Appointment"},
{key:"Both", label:"Both"}
]},
{name:"time", height:72, type:"time", map_to:"auto"},
];
scheduler.load("dhtmlxScheduler/samples/01_initialization_loading/data/types.php", function(){
scheduler.showLightbox(2);
});
var dp = new dataProcessor("dhtmlxScheduler/samples/01_initialization_loading/data/types.php");
dp.enableUTFencoding(true);
dp.init(scheduler);
function show_minical(){
if (scheduler.isCalendarVisible())
scheduler.destroyCalendar();
else
scheduler.renderCalendar({
position:"dhx_minical_icon",
date:scheduler._date,
navigation:true,
handler:function(date,calendar){
scheduler.setCurrentView(date);
scheduler.destroyCalendar()
}
});
}
</script>
<body onload="init();return false;">
<div id="scheduler_here" class="dhx_cal_container" style='width:100%; height:100%;'>
<div class="dhx_cal_navline">
<div class="dhx_cal_prev_button"> </div>
<div class="dhx_cal_next_button"> </div>
<div class="dhx_cal_today_button"></div>
<div class="dhx_cal_date"></div>
<div class="dhx_minical_icon" id="dhx_minical_icon" onclick="show_minical()"> </div>
<div class="dhx_cal_tab" name="day_tab" style="right:204px;"></div>
<div class="dhx_cal_tab" name="week_tab" style="right:140px;"></div>
<div class="dhx_cal_tab" name="month_tab" style="right:76px;"></div>
</div>
<div class="dhx_cal_header"></div>
<div class="dhx_cal_data"></div>
</div>
<script src="dhtmlxScheduler/codebase/dhtmlxscheduler.js" type="text/javascript"></script>
<script src="dhtmlxScheduler/codebase/ext/dhtmlxscheduler_limit.js" type="text/javascript"></script>
<script src="dhtmlxScheduler/codebase/ext/dhtmlxscheduler_minical.js" type="text/javascript"></script>
<script src="dhtmlxScheduler/codebase/ext/dhtmlxscheduler_collision.js"></script>
</body>
</html>
And this is my types.php:
<?php
require_once('../../common/connector/scheduler_connector.php');
include('../../common/config.php');
$doctor_id=1;
$scheduler = new schedulerConnector($res, $dbtype);
$scheduler->render_table("tevents", "event_id","start_date,end_date,event_name,type","extra");
?>
What I actually want to do is to insert the value of $doctor_id to the "extra" column of "tevents" table. What am I supposed to do ?
Thanks in advance !!!

How do i embed mpeg-dash live video stream using this code?

I have a working code to embed a Wowza manifest.mpd live video stream into a MPEG-dash player on a website but in order for it to work, you have to put in the URL to the manifest file and then click connect.
I need to get rid of the input box and just have it load the manifest file automatically on page load.
I've tried adding the src to the video tag as the manifest URL but it doesn't load. I'm guessing that when clicking connects to load the manifest file the script is also doing something else but with no scripting knowledge I don't know what.
Can anyone suggest what I would change the code to so that it will load the script as it does when you click connect but automatically on page load?
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>MPEG-DASH Player - Live Video Streaming</title>
<script language="javascript">AC_FL_RunContent = 0;</script>
<link rel="stylesheet" href="css/screen.css" type="text/css" media="screen, projection">
<link rel="stylesheet" href="css/wowza.css" type="text/css" />
<!-- Libraries -->
<script src="app/lib/jquery/js/jquery-1.8.3.min.js"></script>
<script src="app/lib/jquery/js/jquery-ui-1.9.2.custom.min.js"></script>
<!-- https://github.com/kriskowal/q -->
<script src="app/lib/q.js"></script>
<!-- https://github.com/creynders/dijon-framework -->
<script src="app/lib/dijon.js"></script>
<!-- Misc Libs -->
<script src="app/lib/xml2json.js"></script>
<script src="app/lib/objectiron.js"></script>
<script src="app/lib/long.js"></script>
<script src="app/lib/Math.js"></script>
<!-- Player -->
<script src="app/js/streaming/MediaPlayer.js"></script>
<script src="app/js/streaming/Context.js"></script>
<script src="app/js/streaming/ErrorHandler.js"></script>
<script src="app/js/streaming/Capabilities.js"></script>
<script src="app/js/streaming/Debug.js"></script>
<script src="app/js/streaming/VideoModel.js"></script>
<script src="app/js/streaming/vo/SegmentRequest.js"></script>
<script src="app/js/streaming/ManifestLoader.js"></script>
<script src="app/js/streaming/ManifestUpdater.js"></script>
<script src="app/js/streaming/ManifestModel.js"></script>
<script src="app/js/streaming/MediaSourceExtensions.js"></script>
<script src="app/js/streaming/SourceBufferExtensions.js"></script>
<script src="app/js/streaming/VideoModelExtensions.js"></script>
<script src="app/js/streaming/BufferExtensions.js"></script>
<script src="app/js/streaming/FragmentController.js"></script>
<script src="app/js/streaming/AbrController.js"></script>
<script src="app/js/streaming/FragmentLoader.js"></script>
<script src="app/js/streaming/Stream.js"></script>
<script src="app/js/streaming/BufferController.js"></script>
<script src="app/js/streaming/rules/SwitchRequest.js"></script>
<script src="app/js/streaming/rules/DownloadRatioRule.js"></script>
<script src="app/js/streaming/rules/InsufficientBufferRule.js"></script>
<script src="app/js/streaming/rules/LimitSwitchesRule.js"></script>
<script src="app/js/streaming/rules/BaseRulesCollection.js"></script>
<!-- Metrics -->
<script src="app/js/streaming/vo/MetricsList.js"></script>
<script src="app/js/streaming/MetricsModel.js"></script>
<script src="app/js/streaming/vo/metrics/BufferLevel.js"></script>
<script src="app/js/streaming/vo/metrics/HTTPRequest.js"></script>
<script src="app/js/streaming/vo/metrics/PlayList.js"></script>
<script src="app/js/streaming/vo/metrics/RepresentationSwitch.js"></script>
<script src="app/js/streaming/vo/metrics/TCPConnection.js"></script>
<script src="app/js/streaming/vo/metrics/DroppedFrames.js"></script>
<!-- Dash -->
<script src="app/js/dash/Dash.js"></script>
<script src="app/js/dash/DashContext.js"></script>
<script src="app/js/dash/vo/Segment.js"></script>
<script src="app/js/dash/DashParser.js"></script>
<script src="app/js/dash/DashHandler.js"></script>
<script src="app/js/dash/BaseURLExtensions.js"></script>
<script src="app/js/dash/FragmentExtensions.js"></script>
<script src="app/js/dash/DashManifestExtensions.js"></script>
<script src="app/js/dash/DashMetricsExtensions.js"></script>
<script src="app/js/dash/DashMetricsConverter.js"></script>
<!-- App -->
<!--script src="app/js/main.js"></script-->
<!-- Framework CSS -->
<link rel="stylesheet" href="css/screen.css" type="text/css" media="screen, projection">
<link rel="stylesheet" href="css/wowza.css" type="text/css" />
<script>
function supports_media_source()
{
"use strict";
var hasWebKit = (window.WebKitMediaSource !== null && window.WebKitMediaSource !== undefined),
hasMediaSource = (window.MediaSource !== null && window.MediaSource !== undefined);
return (hasWebKit || hasMediaSource);
}
</script>
</head>
<body>
<div class="container">
<!-- HEADER -->
<div class="span-18">
<h1>Live Video Streaming</h1>
<h2>MPEG-DASH Player</h2>
</div>
<div class="span-6 last">
<img src="img/wowza-logo_1024.png" class="logo" style="height:72px;width:205px" />
</div>
<hr class="heading">
<!-- END HEADER -->
<!-- EXAMPLE PLAYER: WIDTH of this player should be 630px, height will vary depending on the example-->
<div class="span-16">
<div id="supported" style="display:none">
<div>
<style>
video {
background-color: #000000;
}
</style>
<video id="videoObj" x-webkit-airplay="allow" controls alt="Example File" width="630" height="354" onerror="failed(event)" src="http://undergroundsoundz.com:1935/uszlive/myStream/manifest.mpd"></video>
</div>
<table>
<tr>
<td>
<button id="playObj" type="button" style="width:50px" onclick="JavaScript:playControl()" disabled="disabled">Pause</button>
</td>
</tr>
<tr>
<td align="right">
<b>Stream:</b>
</td>
<td>
<input id="connectStr" size = "56" type="text" placeholder="" value="http://undergroundsoundz.com:1935/uszlive/myStream/manifest.mpd"/>
<button id="connectObj" type="button" style="width:80px" onclick="JavaScript:connect()">Connect</button>
</td>
</tr>
<tr>
<td align="right">
<b>Status:</b>
</td>
<td>
<label id="statusStr" size = "100" type="text" placeholder="" value="">Disconnected</label>
</td>
</tr>
</table>
</div>
<div id="debug_log" style="height: 425px; width: 630px; overflow: auto; clear: both;">
</div>
<script>
if ( supports_media_source() ) {
supported.style.display="";
videoObj.style.display="";
}
else {
notsupported.style.display="";
}
var player;
function connect()
{
if(connectObj.textContent == "Disconnect") {
if(player!=null)
player.stop();
videoObj.src = null;
videoObj.load();
connectObj.textContent = "Connect";
playObj.disabled = "disabled";
playObj.textContent = "Pause";
statusStr.textContent = "Disconnected";
}
else {
connectObj.textContent = "Disconnect";
playObj.disabled = "";
playObj.textContent = "Pause";
statusStr.textContent = "Playing";
var video = document.querySelector("video"),
context = new Dash.di.DashContext();
player = new MediaPlayer(context);
player.startup();
debug = player.debug;
//debug.init(console);
player.autoPlay = true;
player.attachView(video);
player.setIsLive(true);
player.attachSource(connectStr.value);
}
}
function playControl() {
if (videoObj.paused == false) {
videoObj.pause();
statusStr.textContent = "Paused";
playObj.textContent = "Play";
}
else {
videoObj.play();
statusStr.textContent="Playing";
playObj.textContent = "Pause";
}
}
function failed(e) {
// video playback failed - show a message saying why
switch (e.target.error.code) {
case e.target.error.MEDIA_ERR_ABORTED:
statusStr.textContent='You aborted the video playback.';
break;
case e.target.error.MEDIA_ERR_NETWORK:
statusStr.textContent='A network error caused the video download to fail part-way.';
break;
case e.target.error.MEDIA_ERR_DECODE:
statusStr.textContent='The video playback was aborted due to a corruption problem or because the video used features your browser did not support.';
break;
case e.target.error.MEDIA_ERR_SRC_NOT_SUPPORTED:
statusStr.innerHTML= 'The video could not be loaded, either because the server or network failed or because the format is not supported.<br/>';
statusStr.innerHTML+= '<span style="color:red;">Please close all tabs and then try running the appropriate <span style="font-style:italic;">LaunchDashPlayer</span> script for your system in your \"examples/LiveVideoStreaming/MPEGDASHPlayer\" folder.</span>';
break;
default:
statusStr.textContent = 'An unknown error occurred.';
break;
}
}
</script>
</div>
</div>
</body>

Develop Reference

JavaScript is the programming language of the Web.

make div absolute on finger swipe - javascript

Related

google stand alone webapp unable to get message after submit

Draggable is not working getting the uncaught reference error

I have a jquery issue. I have two divs showing and hiding. Both are set to refresh but one is overriding it

How to insert extra fields to a DB table in dhtmlxscheduler?

How do i embed mpeg-dash live video stream using this code?

Categories

Resources