dynamic video source change issue in azure media player - html

Here is my full code.
When I click "Show" button, it shows the video dynamically. But when I click it again, it doesn't show. How can I avoid this type of error?
<!DOCTYPE html>
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta http-equiv="Content-Script-Type" content="text/javascript" /><meta http-equiv="Content-Style-Type" content="text/css" /><meta http-equiv="X-UA-Compatible" content="IE=Edge" /><meta http-equiv="Pragma" content="no-cache" />
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>
<!-- for Azure Media Player -->
<link href="//amp.azure.net/libs/amp/latest/skins/amp-default/azuremediaplayer.min.css" rel="stylesheet" />
<script src="//amp.azure.net/libs/amp/latest/azuremediaplayer.min.js"></script>
<script>
amp.options.flashSS.swf = "//amp.azure.net/libs/amp/latest/techs/StrobeMediaPlayback.2.0.swf"
amp.options.flashSS.plugin = "//amp.azure.net/libs/amp/latest/techs/MSAdaptiveStreamingPlugin-osmf2.0.swf"
amp.options.silverlightSS.xap = "//amp.azure.net/libs/amp/latest/techs/SmoothStreamingPlayer.xap"
</script>
<title>
eConnect eLearning
</title></head>
<body>
Show
<div id="content_html" style="height: 100%; "></div>
<script>
function sv1() {
$('#content_html').html('<video id="azuremediaplayer" class="azuremediaplayer amp-default-skin amp-big-play-centered" tabindex="0"> </video>');
var myOptions = {
"nativeControlsForTouch": false,
autoplay: false,
controls: true,
width: "640",
height: "400",
poster: ""
};
var myPlayer = amp("azuremediaplayer", myOptions);
myPlayer.src([{ src: "http://amssamples.streaming.mediaservices.windows.net/91492735-c523-432b-ba01-faba6c2206a2/AzureMediaServicesPromo.ism/manifest", type: "application/vnd.ms-sstr+xml" }, ]);
}
</script>
</body>
</html>

I got the answer from MS forum. I have to dispose the old player before reuse it.
if (!!myPlayer) {
myPlayer.dispose();
}

I think it is problem with the dynamically added element with id. I have done some modifications to avoid dynamic elements with same id and is working. Is this OK for you?
<div id="content_html" style="height: 100%; ">
<video id="azuremediaplayer" class="azuremediaplayer amp-default-skin amp- big-play-centered" tabindex="0"> </video>
</div>
<script>
$('#content_html').hide();
function sv1() {
$('#content_html').show();

<!DOCTYPE html>
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta http-equiv="Content-Script-Type" content="text/javascript" /><meta http-equiv="Content-Style-Type" content="text/css" /><meta http-equiv="X-UA-Compatible" content="IE=Edge" /><meta http-equiv="Pragma" content="no-cache" />
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<!-- for Azure Media Player -->
<link href="http://amp.azure.net/libs/amp/latest/skins/amp-default/azuremediaplayer.min.css" rel="stylesheet" />
<script src="http://amp.azure.net/libs/amp/latest/azuremediaplayer.min.js"></script>
<script>
amp.options.flashSS.swf = "//amp.azure.net/libs/amp/latest/techs/StrobeMediaPlayback.2.0.swf"
amp.options.flashSS.plugin = "//amp.azure.net/libs/amp/latest/techs/MSAdaptiveStreamingPlugin-osmf2.0.swf"
amp.options.silverlightSS.xap = "//amp.azure.net/libs/amp/latest/techs/SmoothStreamingPlayer.xap"
</script>
<title>
eConnect eLearning
</title></head>
<body>
Show
<div id="content_html" style="height: 100%; ">
<video id="azuremediaplayer" class="azuremediaplayer amp-default-skin amp-big-play-centered" tabindex="0"> </video>
</div>
<script>
$('#content_html').hide();
function sv1() {
$('#content_html').show();
var myOptions = {
"nativeControlsForTouch": false,
autoplay: false,
controls: true,
width: "640",
height: "400",
poster: ""
};
var myPlayer = amp("azuremediaplayer", myOptions);
myPlayer.src([{ src: "http://amssamples.streaming.mediaservices.windows.net/91492735-c523-432b-ba01-faba6c2206a2/AzureMediaServicesPromo.ism/manifest", type: "application/vnd.ms-sstr+xml" }, ]);
}
</script>
</body>
</html>

myPlayer.src({src: "http://www.example.com/path/to/video.mp4" });

Related

How to create a greeting card by html using canvas

I used the canvas to save what's inside the div as an image, but it worked if the
css (dispaly:none) property was not showing..
I want the image to be hidden so that it does not appear, and when I press the download button, it downloads what's inside the div
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="capture" style=" position: relative;padding: 10px; ">
<img width="500" height="500" src="pic1.png" />
<div style="position: absolute; top:450px; left:450px">my name is</div>
</div>
<div id="invite">
</div>
<div id="print-area">
<button onclick="print()" id="print">download</button>
</div>
<script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
<script>
function print(){
html2canvas(document.querySelector("#capture")).then(canvas => {
var link = document.createElement('a');
link.download = 'filename.png';
link.href = canvas.toDataURL()
link.click();
});
}
</script>
</body>
</html>

Why isn't my page redirecting after video?

Why isn't my page redirecting after the video finishes? Currently, it is live at https://www.eves.website/eve_3.html
After the video finishes, it is supposed to go to https://www.eves.website/eve_4.html
Which is also live. But it just says on eve_3. html
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>eve_</title>
<link rel="icon" rel="preload" href="images/evecircle.png" />
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js">
</script>
<script type="text/javascript">
$(document).ready(function(){
$("#myVideo").bind('ended', function(){
location.href="https://www.eves.website/eve_4.html";
});
});
</script>
</head>
<body>
<video id="myVideo" style="margin-left:-10px; margin-top:-10px;" width="105%" height="105%" autoplay>
<source src="images/human.mp4" autoplay="true" type="video/mp4" />
Your browser does not support the video tag.
</video>
</body>
</html>
Try this one...
$(document).ready(function(){
$("#myVideo").bind('ended', function(){
window.location.href="https://www.eves.website/eve_4.html";
});
});
It was because it wasn't secure, therefore it wasn't allowing me to redirect to another site.

How to move to a view in an other html page with Dojo Mobile?

I want to do this Dojo transition to another html file in same project. Select a view from an other html page, the code available on the link is very similar to what I have in my project. While the solution is accepted, I'm unable to have success with it whereas I have tested it several times. Can someone check it, please ?
Thank you in advance
Here are two html files that allow you testing it, it's not my real code but that provides same result :
Index.html
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>
<title>Index</title>
<!-- application stylesheet will go here -->
<!-- dynamically apply native visual theme according to the browser user agent -->
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/dojo/1.9.6/dojox/mobile/deviceTheme.js"></script>
<!-- dojo configuration options -->
<script type="text/javascript">
dojoConfig = {
async: true,
parseOnLoad: false
};
</script>
<!-- dojo bootstrap -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs /dojo/1.9.6/dojo/dojo.js"></script>
<!-- dojo application code -->
<script type="text/javascript">
require(["dojox/mobile/parser",
"dojox/mobile/ViewController",
"dojox/mobile",
"dojox/mobile/ScrollableView",
"dojox/mobile/TabBar",
"dojox/mobile/Switch",
"dojox/mobile/deviceTheme",
"dojox/mobile/compat",
"dojox/mobile/IconMenu",
"dojox/mobile/SimpleDialog",
"dojox/mobile/Button",
"dojox/mobile/Heading",
"dijit/registry",
"dojo/domReady!",
"dojo/dom",
"dojo/ready"
], function(parser) {
parser.parse();
});
</script>
</head>
<body>
<div id="detailsHeading" data-dojo-type="dojox.mobile.Heading"
data-dojo-props="fixed: 'top', label: 'Details', back:'Back', moveTo:'view1', transition:'slide', transitionDir:'-1',url:'sample.html'">
</div>
</body>
<html>
sample.html
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>
<title>Sample</title>
<!-- application stylesheet will go here -->
<!-- dynamically apply native visual theme according to the browser user agent -->
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/dojo/1.9.6/dojox/mobile/deviceTheme.js"></script>
<!-- dojo configuration options -->
<script type="text/javascript">
dojoConfig = {
async: true,
parseOnLoad: false
};
</script>
<!-- dojo bootstrap -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/dojo/1.9.6/dojo/dojo.js"></script>
<!-- dojo application code -->
<script type="text/javascript">
require(["dojox/mobile/parser",
"dojox/mobile/ViewController",
"dojox/mobile",
"dojox/mobile/ScrollableView",
"dojox/mobile/TabBar",
"dojox/mobile/Switch",
"dojox/mobile/deviceTheme",
"dojox/mobile/compat",
"dojox/mobile/IconMenu",
"dojox/mobile/SimpleDialog",
"dojox/mobile/Button",
"dojox/mobile/Heading",
"dijit/registry",
"dojo/domReady!",
"dojo/dom",
"dojo/ready"
], function(parser) {
parser.parse();
});
</script>
</head>
<body>
<div data-dojo-type="dojox.mobile.ScrollableView" id="view1" data-dojo-props="selected:false,scrollDir:'v'">
</div>
</body>
</html>
Put them in a same directory and test it
The Main Html File.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
<meta name="format-detection" content="telephone=no" />
<!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height" />
<meta name="msapplication-tap-highlight" content="no" />
<!-- dojo stylesheet will go here -->
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/dojo/1.9.6/dojox/mobile/deviceTheme.js"></script>
<title>Dojo Mobile Simple View</title>
<!-- dojo configuration options -->
<script>
dojoConfig = {
async: true,
parseOnLoad: false
};
</script>
<!-- dojo bootstrap -->
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.9.6/dojo/dojo.js"></script>
<script>
require([
"dojox/mobile/parser",
"dojo/ready",
"dojox/mobile/ScrollableView",
"dojox/mobile/Heading",
"dojox/mobile/ToolBarButton"
], function (parser, ready ) {
ready ( function() {
parser.parse();
});
});
</script>
</head>
<body style="visibility:hidden;">
<!-- the view or "page"; select it as the "home" screen -->
<div id="view1" data-dojo-type="dojox/mobile/ScrollableView" data-dojo-props="selected:true">
<div id="detailsHeading" data-dojo-type="dojox/mobile/Heading"
data-dojo-props="fixed: 'top', label: 'View1'">
<span id="rightbtn" data-dojo-type="dojox/mobile/ToolBarButton"
style="float:right;"
data-dojo-props="transition:'slide', transitionDir:'-1',url:'Sample.html' ">Sample
</span>
</div>
</div>
</body>
</html>
The Sample.html file is a HTML Fragment it should NOT contain head, body tags.
<!-- Sample View -->
<div id="sample" data-dojo-type="dojox/mobile/ScrollableView" >
<!-- heading -->
<h1 id="edit1" data-dojo-type="dojox/mobile/Heading"
data-dojo-props=" fixed:'top' ">Sample
</h1>
</div>

Why intel xdk doesn't work in tablets with android 3.1?

I'm making an app using intel xdk. It works in many devices but when i try in tablets with android 3.1 it doesn't work. The title of pannels is not displayed and the $.ui.ready is not fired. Even trying with this simple code it fails (the hello world button is not displayed either):
<!DOCTYPE html>
<html><!--HTML5 doctype-->
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta http-equiv="Pragma" content="no-cache">
<script type="text/javascript" charset="utf-8" src="intelxdk.js"></script>
<script type="text/javascript" language="javascript">
var isIntel=window.intel&&window.intel.xdk
// This event handler is fired once the intel libraries are ready
function onDeviceReady() {
//hide splash screen now that our app is ready to run
intel.xdk.device.hideSplashScreen();
setTimeout(function () {
$.ui.launch();
}, 50);
}
//initial event handler to detect when intel is ready to roll
document.addEventListener("intel.xdk.device.ready", onDeviceReady, false);
</script>
<script src="js/appframework.ui.min.js"></script>
<script>
if(isIntel)
$.ui.autoLaunch = false;
$.ui.useOSThemes = false; //Change this to false to force a device theme
$.ui.blockPageScroll();
$(document).ready(function () {
if ($.ui.useOSThemes && (!$.os.ios||$.os.ios7))
$("#afui").removeClass("ios");
});
$.ui.ready(function(){
alert('uiready');
//App is ready lets check if a user exists.
});
</script>
<link href="css/icons.css" rel="stylesheet" type="text/css">
<link href="css/af.ui.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="afui" class="ios">
<div id="header" class="header"></div>
<div id="content" style="">
<div class="panel" title="Main" id="main" selected="selected"
style="">
<a class="button" href="#" style="" data-appbuilder-object="button">Hello World</a>
</div>
</div>
<div id="navbar" class="footer">
Home
</div>
</div>
</body>
</html>
Any ideas?
Check your text/html Content-Encoding in Header Data. With Content-Encoding: gzip this will not work. Maybe .htaccess => Modul mod_filter.c

intel-xdk: not able to get contacts list

I am not able to get contacts list.
HTML Code:
<!DOCTYPE html><!--HTML5 doctype-->
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0" />
<style type="text/css">
/* Prevent copy paste for all elements except text fields */
* { -webkit-user-select:none; -webkit-tap-highlight-color:rgba(255, 255, 255, 0); }
input, textarea { -webkit-user-select:text; }
body { background-color:green; color:black }
</style>
<script src='intelxdk.js'></script>
<script type="text/javascript">
/* This code is used to run as soon as Intel activates */
var onDeviceReady=function(){
//hide splash screen
intel.xdk.device.hideSplashScreen();
};
document.addEventListener("intel.xdk.device.ready",onDeviceReady,false);
</script>
</head>
<body>
<script>
document.addEventListener('intel.xdk.contacts.get', contactsReceived, true);
function contactsReceived() {
alert("contacts recieved");
var table = document.getElementById("contacts");
table.innerHTML = '';
var myContacts = intel.xdk.contacts.getContactList();
alert("Contacts length: "+myContacts.length);
}
</script>
</body>
</html>
intel.xdk.contacts.get event is not fired. Is it a bug ?
I was not calling intel.xdk.contacts.getContacts() inside onDeviceReady. Found this from the post here.
Hi i am getting same problem. But I am able to get contacts in Phone after deploying (Sony xperia ion).
This is my code.
I set the permission for contacts.
<!DOCTYPE html>
<html><!--HTML5 doctype-->
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta http-equiv="Pragma" content="no-cache">
<script src="intelxdk.js"></script>
<!-- phantom library, needed for XDK api calls -->
<script src="cordova.js"></script>
<!-- phantom library, needed for Cordova api calls -->
<script src="xhr.js"></script>
<!-- phantom library, needed for XDK CORS -->
<script type="text/javascript" language="javascript">
var onDeviceReady = function () { // called when Cordova is ready
if (window.Cordova && navigator.splashscreen) { // Cordova API detected
navigator.splashscreen.hide(); // hide splash screen
}
setTimeout(function () {
$.ui.launch();
}, 50);
intel.xdk.contacts.getContacts();
};
document.addEventListener("deviceready", onDeviceReady, false);
</script>
<script src="js/appframework.ui.min.js"></script>
<script>
if (isIntel)
$.ui.autoLaunch = false;
$.ui.useOSThemes = true; //Change this to false to force a device theme
$.ui.blockPageScroll();
$(document).ready(function () {
if ($.ui.useOSThemes && (!$.os.ios || $.os.ios7))
$("#afui").removeClass("ios");
});
document.addEventListener('intel.xdk.contacts.get', contactsReceived, false);
function contactsReceived() {
var table = document.getElementById("contacts");
table.innerHTML = '';
var myContacts = intel.xdk.contacts.getContactList();
if(myContacts.length==0)
{
alert("No contact found");
}
for(var i=0;i<myContacts.length;i++) {
//add row to table
var contactInfo = intel.xdk.contacts.getContactData(myContacts[i]);
var tr = document.createElement("tr");
tr.setAttribute('id', 'pnid'+contactInfo.id);
tr.setAttribute('onClick', 'document.getElementById("iden").value = '+contactInfo.id+';');
tr.setAttribute('style', 'background-color:#B8BFD8');
var id = document.createElement("td");
id.innerHTML = contactInfo.id;
tr.appendChild(id);
var msg = document.createElement("td");
msg.innerHTML = contactInfo.name;
tr.appendChild(msg);
table.appendChild(tr);
}
}
</script>
<link href="css/icons.css" rel="stylesheet" type="text/css">
<link href="css/af.ui.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="afui" class="ios">
<div id="header" class="header"></div>
<div id="content" style="">
<div class="panel" title="Main" data-nav="nav_0" id="main" selected="selected"
style="">
<a class="button" href="#" style="" data-appbuilder-object="button" onclick="contactsReceived();">Hello World</a>
<table id="contacts">
</table>
</div>
</div>
<div id="navbar" class="footer">
Home
</div>
<header id="header_0" data-appbuilder-object="header">
<a id="backButton" href="#" class="button backButton" style="visibility: visible; ">Back</a>
<h1 id="pageTitle" class="">test</h1>
</header>
<nav id="nav_0" data-appbuilder-object="nav">
<h1>Side Menu</h1>
</nav>
</div>
</body>
</html>