JWPlayer which is integrated in web browser(website) is working fine on all desktop browser where as coming to mobile it is not working and also showing that "Error loading media: File could not be played" can any one help me in fixation of this,Here I am attaching concern code thanks in advance.
<html lang="en">
<meta charset="utf-8"></meta>
<head>
<link rel="stylesheet" type="text/css" media="screen, handheld" href="style.css" />
<script src="jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="ui.js" type="text/javascript"></script>
<script type="text/javascript" src="jwplayer.js" ></script>
<script>jwplayer.key="UqsxqSzE4fs4e3/+JJ4g2zVO2jxpFkwT31IzfQ=="</script>
</head>
<body>
<div id="myElement">Loading the player...</div>
<div id="player"></div>
<input type="text" id="stream" value="rtmp://192.168.2.108:1935/live/test.stream"></input>
<button id="start">Start</button>
<button id="stop">Stop</button>
<div id="status"></div>
</body>
</html>
RTMP is, by definition, a Flash format. There's no Flash on a mobile device.
Related
I'm trying to build this directory type of app and I'm using iframe to embed other sites into the app.I'd also like the links of the embedded sites to open within the parent window.
With the Progressive web app version, this works great and there are no redirections to external pages.
With the Native android version, the iframe links are redirected back to the original web site.
Here is the code.
var app = angular.module('bible', []);
app.controller('MainCtrl', function($scope, $element) {
});
app.directive('iframeDirective', ['$sce', function($sce) {
return {
restrict: 'E',
template: '<iframe src="{{ trustedUrl }}" frameborder="0" allowfullscreen></iframe>',
link: function(scope) {
scope.trustedUrl = $sce.trustAsResourceUrl("https://www.bible.com/bible/100/JHN.3");
}
}
}]);
*{margin:0;padding:0}
html, body {height:100%;width:100%;-webkit-overflow-scrolling:touch;position:fixed; overflow:auto;}
table {height:100%;width:100%;table-layout:static;border-collapse:collapse}
iframe {height:100%;width:100%}
.header {border-bottom:1px solid #000}
.content {height:100%}
<!DOCTYPE html>
<html ng-app="bible">
<head>
<meta charset="utf-8" />
<title>Bible app</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<link rel="stylesheet" href="style.css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.js" data-semver="1.2.0"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<iframe-directive></iframe-directive>
</body>
</html>
Any help is much appreciated. Thank you!
Finally got it to work for Android replacing iframe with object data:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<object data="https://www.bible.com/bible/100/JHN.3" width="100%" height="700" type="text/html">
Alternative Content
</object>
</body>
</html>
Fully functional in Android!
Downside is that it doesn't scroll in IOS yet!
In a nutshell, I've built an app using HTML/CSS/JS and Phonegap. It's still in testing phase. I have all my app's images saved in Google Cloud Storage (GCS). I have image tags (divs) within my app that needs to pull those images from GCS to the specific div. However, this method of just adding the direct URL only seems to work on iOS devices. What I need to know is, what is the correct method of pulling those images from GCS to my app so that it works on all platforms (iOS, Android, BlackBerry etc)? Do I need to add a line of code in the head of my index.html or does it have something to do with the config.xml? I've been looking for answers on the net, but nothing could give me clear-cut results that works across all platforms.
I'm still fairly new to the whole "app building game", please be gentle.
Here is some code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width; height=device-height; initial-scale=1"/>
<title>App Name</title>
<link href="simple-flat.min.css" rel="stylesheet" type="text/css"/>
<link href="jquery.mobile-1.3.1 /jquery.mobile.structure-1.3.1.min.css" rel="stylesheet" type="text/css"/>
<link href="General.css" rel="stylesheet" type="text/css"/>
<link href="owl-carousel/owl.carousel.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="jquery.mobile-1.3.1 /demos/js/jquery.js"></script>
<script type="text/javascript" src="jquery.mobile-1.3.1 /demos/js/jquery.mobile-1.3.1.min.js"></script>
<script type="text/javascript" src="maps.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript" src="cordova.js"></script>
<script>var __adobewebfontsappname__="dreamweaver"</script>
<script src="http://use.edgefonts.net/raleway:n1:default.js" type="text/javascript></script>
<script type="text/javascript" charset="utf-8">
function onLoad() {
document.addEventListener("deviceready", onDeviceReady, false);
}
function onDeviceReady() {
document.addEventListener("offline", onOffline, false);
}
function onOffline() {
navigator.notification.alert('Please check your internet connection', function()
{ },'Connection Failure','OK');
window.location = "index.html#offline";
}
</script>
</head>
<body onload="onLoad()">
<div id="cultures" data-role="page" data-theme="a" >
<div data-role="header" id="header" data-theme="a" data-position="fixed">
<h1>Headline</h1>
<div id="image" data-theme="c">
<img src="http://commondatastorage.googleapis.com/about_namibia%2FHimba.jpg" width="100%"/></div>
<div class="headline_bar"><h3>Cultures</h3></div>
</div>
<div data-role="content">
<p>Some copy goes here.</p>
</div>
<div data-role="footer" id="footer" class="ui-bar" data-position="fixed">
</div>
</div>
</body>
</html>
I have phonegap application at html5, with kendo ui.
My button work fine on browser, but at android device I need to click three times to fire the alert.
This is my code:
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="js/jquery-1.8.2.js"></script>
<script src="js/kendo.all.min.js"></script>
<link href="styles/kendo.mobile.all.min.css" rel="stylesheet" />
<link href="styles/kendo.common.min.css" rel="stylesheet" />
<link href="styles/kendo.default.min.css" rel="stylesheet" />
</head>
<body>
<div data-role="view" data-title="Login/Sign-up"
id="view-transitions-login" data-transition="overlay:left"
style="background-color: white;">
<input type="button" id="logButton" value="login"
style="width: 100px; height: 60px" />
</div>
<script>
$(document).ready(function() {
$("#logButton").click(function() {
alert(33);
});
});
</script>
<script>
var app = new kendo.mobile.Application(document.body);
</script>
</body>
</html>
Thanks in advance.
I'm found the answer.
I used the latest version of kendo.all.min, and That made the problem.
I changed the file and everything works as it should.
I am using cordova for mobile app development on android platform.
I have this html code in www/index.html file:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="en" />
<script src="cordova-2.2.0.js" type="text/javascript"></script>
<script src="jquery/jquery.js" type="text/javascript"></script>
<script src="jquery.mobile/jquery.mobile-1.1.0.js" type="text/javascript"></script>
<script src="JS/main.js" type="text/javascript"></script>
<link rel="stylesheet" href="CSS/main.css"/>
</head>
<body id="body" class="body">
<div id="box" class="bodyBlack">
</div>
</body>
</html>
I don't know why but when I am running this app (also when just opening on pc browser) i am having this div appended at the bottom of the page:
<div ui-loader ui-corner-all ui-body-a ui-loader-default>
<span ui-loader ui-corner-all ui-body-a ui-loader-default></span>
<h1>loading</h1>
Here is the content of main.js:
$(document).ready(function(){
$('#box').click(function(){
if($(this).attr('class') == 'bodyBlack'){
$(this).removeClass('bodyBlack');
$(this).addClass('bodyWhite');
}
else{
$(this).removeClass('bodyWhite');
$(this).addClass('bodyBlack');
}
});
});
Why and from where dose it getting from? how I am preventing it to do so?
Thanks!!!
This seems to be a "Loading Message" generated by jQuery Mobile, see this answer. So jQuery Mobile is loading something (and cant't find it, perhaps). Please post the content of your main.js file if you're still having trouble!
I need to make a call by android phoneGap application with sencha touch button.
I have found an iphone plugin to make calls from phoneGap application.
I has not found any plugins or anything for android.
Please help.
thanks in advance
Use this line to make a phone dialer to display
<a href="#" rel="external" id="ext" onclick="document.location='tel:123456'" > </a>
When I look in my Phonegap 1.5.0 Example index.html for Android I see this code:
<html>
<head>
<meta name="viewport" content="width=320; user-scalable=no" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>PhoneGap</title>
<link rel="stylesheet" href="master.css" type="text/css" media="screen" title="no title">
<script type="text/javascript" charset="utf-8" src="cordova-1.5.0.js"></script>
<script type="text/javascript" charset="utf-8" src="main.js"></script>
</head>
<body onload="init();" id="stage" class="theme">
<h1>Welcome to PhoneGap!</h1>
<h2>this file is located at assets/www/index.html</h2>
<div id="info">
<h4>Platform: <span id="platform"> </span>, Version: <span id="version"> </span></h4>
<h4>UUID: <span id="uuid"> </span>, Name: <span id="name"> </span></h4>
<h4>Width: <span id="width"> </span>, Height: <span id="height">
</span>, Color Depth: <span id="colorDepth"></span></h4>
</div>
<dl id="accel-data">
<dt>X:</dt><dd id="x"> </dd>
<dt>Y:</dt><dd id="y"> </dd>
<dt>Z:</dt><dd id="z"> </dd>
</dl>
Toggle Accelerometer
Get Location
Call 411
Beep
Vibrate
Get a Picture
Get Phone's Contacts
Check Network
<dl>
<dt>Compass Heading:</dt><dd id="h">Off</dd>
</dl>
Toggle Compass
<div id="viewport" class="viewport" style="display: none;">
<img style="width:60px;height:60px" id="test_img" src="" />
</div>
</body>
</html>
Notice this line: Call 411 When you click that button, you'll be calling 411. :)