I had implement JW Player in android, but getting black screen when video load from live URL.
My HTML file
<!DOCTYPE html>
<html>
<head>
<script src="http://jwpsrv.com/library/WcmD+p3DEeKQvCIACpYGxA.js"></script>
</head>
<body>
<div id='my-video'></div>
<script type='text/javascript'>
jwplayer('my-video').setup({
file: 'http://content.bitsontherun.com/videos/lWMJeVvV-364767.mp4',
image: 'http://www.longtailvideo.com/content/images/jw-player/lWMJeVvV-876.jpg',
width: '320',
height: '180'
});
</script>
</body>
</html>
and my Java Code is
myBrowser.getSettings().setJavaScriptEnabled(true);
myBrowser.loadUrl("http://. . . /hardik/jwplayerhtml.html");
what is wrong with me? Please help me.
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!
Is it a good way to use card in Materialize CSS as on click card popups it used for values to edit and save and it pops back i'm using it for android application using a Phonegap.
The real problem is i was not able to use modal in Materialize CSS as this is not responding well in my emulator.modal is pop up's without clicking.
Thanks in advance.
Sometime this will be happened when you use <a> tag. Instead of using<a> tag use <button> tag. I have added sample html code snippet. Try this.
HTML
<button data-target="modal1" class="btn modal-trigger">Click ME</button>
<div id="modal1" class="modal">
<div class="modal-content">
<h4>POP UP</h4>
</div>
</div>
JavaScript
<script>
$(document).ready(function () {
$('.modal-trigger').leanModal();
});
</script>
Full Code in single html page.
<!DOCTYPE html>
<html>
<head>
<title>Select</title>
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body>
<button data-target="modal1" class="btn modal-trigger">Click ME</button>
<div id="modal1" class="modal" style="width: 360px; max-height: 100%; height: 50%;" >
<div class="modal-content">
<h4>POP UP</h4>
</div>
</div>
<!--Import jQuery before materialize.js-->
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js"></script>
<script>
$(document).ready(function () {
$('.modal-trigger').leanModal();
});
</script>
</body>
</html>
i am getting error on logcat "mediaplayer error (-1,2147483648)" while trying to play a video on android using phonegap.
i am using cordova videoplayer plugin.
so why i am getting this error while testing it on android emulator api v14? am i missing something?? please help me out.
here i am pesting my entire code.
<!DOCTYPE html>
<html>
<head>
<script src="js/cordova-2.7.0.js" type="text/javascript"></script>
<script src="js/video.js" type="text/javascript"></script>
<link rel="stylesheet" href="js/video-js.css" type="text/css">
<meta charset="utf-8">
<title>HTML5 Video Player</title>
<style>
body {
font-family: sans-serif;
border: 0;
margin: 0;
padding: 0;
}
header {
text-align: center;
}
#player {
display: table;
width: 100%;
padding: 4px;
}
</style>
<script type="text/javascript">
$( document ).ready(function() {
//This is on load , You can also use 'example_video_1' click event
var video = $('#example_video_1').get(0);
video.load();
video.play();
});
</script>
</head>
<body>
<header>
<h1>HTML5 Video Player</h1>
</header>
<div>
<section id="player">
<video id="example_video_1" class="video-js vjs-default-skin" controls autobuffer height="430" width="400">
<source src="/playvideo/res/raw/asd.mp4">
<source src="mrbeancart_c5bplN27.mp4">
</video>
</section>
</div>
</body>
</html>
thank you for any kind of help....
Maybe not the answer you are lookig for, but, there's no need to use a plugin, at least for me.
My workaround is to save the files locally and bind them from the root directory, into a html5 video tag, as I stated
here
Hope this helps.
Also, this will cause the error you write about on emulator, so the video never plays but it is confirmed in real devices. I have tested this approach in several models of android 4.0
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 am loading an HTML file from my assets folder into a WebView using loadUrl(). The HTML file references a JW Player swf embedded alongside it in the assets folder.
I want JW Player to play a remote URL. Sadly, it will not.
If I load the SWF remotely from another server (instead of using the SWF in my assets folder) I can access external URL's. In this case, the external URL is an RTMP stream. For example:
<!DOCTYPE html>
<html lang='en'>
<head><meta charset='utf-8'>
</head>
<body style='margin:0; pading:0;background-color: #000000;'>
<script type='text/javascript' src='http://developer.longtailvideo.com/svn/trunk/fl5/jwplayer.min.js'></script>
<div id='mediaspace'>This text will be replaced</div>
<script type='text/javascript'>
jwplayer('mediaspace').setup({
'flashplayer': 'http://developer.longtailvideo.com/svn/trunk/fl5/player.swf',
'file': 'testvid.mp4',
'streamer': 'rtmp://b27i9s9t3.rtmphost.com/AndroidMedia',
'controlbar': 'bottom',
'width': '800',
'height': '450'
});
</script>
</body>
...works
<!DOCTYPE html>
<html lang='en'>
<head><meta charset='utf-8'>
</head>
<body style='margin:0; pading:0;background-color: #000000;'>
<script type='text/javascript' src='file:///android_asset/jwplayer.min.js'></script>
<div id='mediaspace'>This text will be replaced</div>
<script type='text/javascript'>
jwplayer('mediaspace').setup({
'flashplayer': 'file:///android_asset/player.swf',
'file': 'testvid.mp4',
'streamer': 'rtmp://b27i9s9t3.rtmphost.com/AndroidMedia',
'controlbar': 'bottom',
'width': '800',
'height': '450'
});
</script>
</body>
...does not work. JW Player loads - but once the play button is hit it flashes a quick "connection unavailable: error #2028" and then spins the ajax spinner forever.
I'm assuming this is a general issue with all SWF's loaded from the assets folder into a web view and is not specific to JW Player.
Any ideas?