I'm newbie using ionic framework. I want to play file video in device uses ionic.
ex: path file '../Library/NoCloud/Test/demo.mp4'
Please help me.Thanks
You can find different approaches if you google or visit ionic documentation...
Here i made a simple example with basic html video tag and js.
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
$scope.makeAction=function(){
var vidURL = "http://clips.vorwaerts-gmbh.de/VfE_html5.mp4";
var myVideo = document.getElementsByTagName('video')[0];
myVideo.src = vidURL;
myVideo.load();
myVideo.play();
}
});
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js#1.4.x" src="https://code.angularjs.org/1.4.12/angular.js" data-semver="1.4.9"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<p>Hello {{name}}!</p>
<video controls="controls" width="640" height="340" name="Video Name" ></video>
<button type="button" ng-click="makeAction()">play</button>
</body>
</html>
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!
I'm trying to show this video on my app using CordovaCapture in Ionic app.
I'm also using window.resolveLocalFileSystemURL to get the video URL but still not working please go through my code and help me.
controller.js
angular.module('starter.controllers', ['ngCordova'])
.controller('VideoCtrl', function($scope, $cordovaCapture) {
function successCallback(fileEntry) {
$scope.video = fileEntry.nativeURL;
console.log(fileEntry.name);
console.log(fileEntry);
console.log($scope.video);
}
function errorCallback(fileEntry) {
console.log(fileEntry.name);
}
var captureSuccess = function(mediaFiles) {
var i, path, len;
for (i = 0, len = mediaFiles.length; i < len; i += 1) {
// do something interesting with the file
$scope.$apply(function(){
$scope.path = mediaFiles[i].fullPath;
window.resolveLocalFileSystemURL($scope.path, successCallback, errorCallback);
console.log($scope.path);
});
console.log($scope.path);
}
};
// capture error callback
var captureError = function(error) {
navigator.notification.alert('Error code: ' + error.code, null, 'Capture Error');
};
var options = { limit: 1, duration: 15 };
// start video capture
$scope.captureVideo = function() {
// Launch device video recording application,
navigator.device.capture.captureVideo(captureSuccess, captureError, options);
}
index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<link rel="manifest" href="manifest.json">
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<script src="lib/ngCordova/dist/ng-cordova.js"></script>
<!-- <script type="text/javascript" src="cordova.js"></script>-->
<!-- your app's js -->
<script src="js/app.js"></script>
<script src="js/controller.js"></script>
</head>
<body ng-app="starter">
<ion-view ng-controller="VideoCtrl">
<ion-header-bar class="bar-stable">
<h1 class="title">My videos</h1>
</ion-header-bar>
<ion-content>
<div class="list">
<div class="item item-divider">
<i class="ion-videocamera"></i>
Current clip
</div>
{{video}}
<video width="320" height="240" controls ng-if="path"> -->
<source ng-src="{{video}}" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
</ion-content>
<ion-footer-bar align-title="center" class="bar bar-light">
<div class="button-bar">
<button class="button button-positive" ng-click="captureVideo()">
Capture a video
</button>
</div>
</ion-footer-bar>
</ion-view>
</body>
</html>
I don't know whether I'm doing it right or wrong. Please help me how to make it work on the view.
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.
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!