How would one implement the azureMediaPLayer inside of cordova application?
I tried the tutorials/instructions from the website: http://amp.azure.net/libs/amp/latest/docs/ but I just can't make it work.
I put the
<link href="http:////amp.azure.net/libs/amp/1.5.0/skins/amp-default/azuremediaplayer.min.css" rel="stylesheet">
<script src= "http://amp.azure.net/libs/amp/1.5.0/azuremediaplayer.min.js"></script>
in my header of index.html
then i put the
<video id="vid1" class="azuremediaplayer amp-default-skin" autoplay controls width="640" height="400" poster="poster.jpg" data-setup='{"nativeControlsForTouch": false}'>
<source src="http://amssamples.streaming.mediaservices.windows.net/91492735-c523-432b-ba01-faba6c2206a2/AzureMediaServicesPromo.ism/manifest" type="application/vnd.ms-sstr+xml" />
<p class="amp-no-js">
To view this video please enable JavaScript, and consider upgrading to a web browser that supports HTML5 video
</p>
</video>
in the html
and it's just a black screen, no controls, no loading, and no error message from debug.
I tried the manual example running from the angular controller but that just tells me that amp is undefined.
var myPlayer = amp('vid1', { /* Options */
"nativeControlsForTouch": false,
autoplay: false,
controls: true,
width: "640",
height: "400",
poster: ""
}, function() {
console.log('Good to go!');
// add an event listener
this.addEventListener('ended', function() {
console.log('Finished!');
}
}
);
myPlayer.src([{
src: "http://amssamples.streaming.mediaservices.windows.net/91492735-c523-432b-ba01-faba6c2206a2/AzureMediaServicesPromo.ism/manifest",
type: "application/vnd.ms-sstr+xml"
}]);
Have anyone made this work? I started to look into the dash.js but I can't make that work either...
Cordova has the concept of whitelisting domains that are okay for use in the application. You will need to whitelist the domains for the AMP scripts and your domain for the streaming locators. Here is more information: https://cordova.apache.org/docs/en/latest/guide/appdev/whitelist/index.html
Related
I have to show jwplayer in a popup, for popups I am using ngDialog(angular), code for ngDialog is below:
$scope.showVideoPlayerPopup = function(video_path)
{
$scope.ngDialog = ngDialog;
ngDialog.open({
animation: true,
scope:$scope,
template:'<div id="video_popup"></div>',
plain: true,
//className: 'ngdialog-theme-default',
closeByDocument: true
//backdrop : 'static'
});
playVideo(video_path);
}
play video function called above contains code for jwplayer, which is below:
<script>
function playVideo(video_path)
{
jwplayer("video_popup").setup({
file: video_path,
width: "600px",
height: "600px",
stretching: "bestfit",
});
}
</script>
when I use the same jwplayer code for simple html code which is without popup it works fine but I try to put my html in popup it gives me below error:
Error: jwplayer(...).setup is not a function
update
Files I have included:
<script src="https://content.jwplatform.com/libraries/qAkRysIB.js"></script>
Ensure the jwplayer src is included (you likely already did but in case not:)
Update 11/2021
see the section Cloud-hosted on the documentation page Add a player library. This will require obtaining a JWPlayer account.
From your Player Downloads & Keys page, scroll down to the Cloud Hosted Player Libraries section.
In the Cloud Hosted Player Libraries section, select a Player Title from the dropdown menu.
Copy the Cloud Player Library Url.
Within the <head> of your page, copy and paste the URL to the player library.
<script src="{cloud_hosted_player_library_url}"></script>
Ensure that the panel has loaded before calling the setup function. One way to do this is to register an event listener for ngDialog.opened from the ngDialog (see the Events section of the ngDialog readme):
$scope.$on('ngDialog.opened', function (e, $dialog) {
playVideo();
});
Yes...because your div tag with id "current_video_path" has to be there in DOM before jwplayer(...).setup script can work...May be you can add some delay using $timeout or setTimeout so it will have enough time to render div in popup before this script can wrok..
So I am building an Ionic / AngularJS app using Wistia player API. I finial tried and everything work right on browser test mode. But when compile onto iOs, it just show white screen. Here is the detail:
View - HTML page:
<!-- Wistia Embed -->
<div id="{{ 'wistia_' + mediaHashId }}" class="wistia_embed" style="width:398px;height:224px;" ng-if="mediaHashId"></div>
Controller:
$timeout(function() {
var wistiaEmbed = Wistia.embed($scope.mediaHashId, {
videoFoam: true,
playerColor: "3B97D3"
});
wistiaEmbed.bind("end", function () {
alert ("Video is finished");
});
}, 100);
So it load perfectly onto Chrome.
But when I compile it onto xcode and run it on my phone. It just show a white screen (with no JS error!)
SECOND OPTION: iframe - since iframe load okay on iOs (http://wistia.com/doc/player-api#using_iframes_and_the_player_api).
The second option is attach wistiaApi onto an iframe. But the code does not work.
View - HTML page:
<div class="video-container">
<iframe id="wistia_player" ng-src="{{ mediaHashId | wistiaEmbedUrl }}" allowtransparency="true" frameborder="0" scrolling="no" class="wistia_embed" name="wistia_embed" width="640" height="360"></iframe>
</div>
Controller:
$timeout(function() {
var wistiaEmbed = document.getElementById("wistia_player").wistiaApi;
console.log (wistiaEmbed);
wistiaEmbed.bind("end", function () {
alert ("Video is finished");
});
}, 100);
The wistiaEmbed console log an undefined.
And error log:
TypeError: Cannot read property 'bind' of undefined
at lesson-detail-ctrl.js:46
at ionic.bundle.js:24922
at completeOutstandingRequest (ionic.bundle.js:13604)
at ionic.bundle.js:13984
So clearly .wistiaApi does not work...
I do include this in my index.html:
I will love a AngularJS library like this https://github.com/brandly/angular-youtube-embed with Wistia Player...but no luck...
Wow, I've found the problem. This is actually a very common problem when building ionic apps on iOs and/or Android. When you include <script> tags in your index.html, always put the full http://.... instead of using just //.
In my case, I included the Wistia API via their official documentation like:
<script src="//fast.wistia.com/assets/external/E-v1.js"></script>
It works on browsers because browsers are smart. Devices are not as smart as browsers so by including the http like so:
<script src="https://fast.wistia.com/assets/external/E-v1.js"></script>
Solves it!
i am using ionic framework and use navigator loading.
i have installed this plugin
cordova plugin add org.apache.cordova.dialogs
and used this method:
navigator.notification.activityStart("Please wait....", "loading");
navigator.notification.activityStop();
config file :
<feature name="Notification">
<param name="android-package" value="org.apache.cordova.dialogs.Notification" />
</feature>
not working. Didn't come any error and one help after falshscreen hide show loading box
i solved this ionic angularjs framework loading problem.
Here is the solution:
loading and hide is use inside this controller
.controller('AppCtrl', function($scope,$ionicLoading) {
/* ionic Loading show */
$scope.loadingIndicator = $ionicLoading.show({
content: 'Loading Data..',
animation: 'fade-in',
showBackdrop: true,
maxWidth: 600,
showDelay: 500
});
/* ionic Loading hide with Timeout */
window.setTimeout(function(){
$scope.loadingIndicator.hide();
},10000);
});
I have one cardboard application which display's number of cards for each PortfolioItem/Feature. likewise it's on Rally platform Release Planning. I want to implement filter box like that.
Attached the screenshot of filters, which I want to implement.
You can sometimes get hints/code for your apps via the open source repo for the Rally App Catalog. For your example, there is available source code for the Release Planning App. Reviewing the source code, you can see that the Filter Picker is defined by the following requirement defined in the source:
Rally.ui.gridboard.plugin.GridBoardCustomFilterControl
And this is incorporated into the board by adding its plugin to the board configuration.
It's tempting to add this to a Simple Grid example, exactly as the Release planning board does, which I tried doing as follows:
<!DOCTYPE html>
<html>
<head>
<title>Rally Example: Simple Board</title>
<script type="text/javascript" src="/apps/2.0rc3/sdk.js"></script>
<script type="text/javascript">
Rally.onReady(function () {
Ext.define('Rally.example.SimpleBoard', {
extend: 'Rally.app.App',
requires: [
'Rally.ui.gridboard.plugin.GridBoardCustomFilterControl'
],
launch: function() {
this.add({
xtype: 'rallycardboard',
types: ['User Story'],
attribute: 'ScheduleState',
context: this.getContext(),
readOnly: true,
cardConfig: {
showIconsAndHighlightBorder: false,
editable: false
},
plugins: [
{
ptype: 'rallygridboardcustomfiltercontrol',
filterChildren: false,
filterControlConfig: {
margin: '3 9 3 30',
blackListFields: ['PortfolioItemType', 'Release'],
whiteListFields: [this._milestonesAreEnabled() ? 'Milestones' : ''],
modelNames: ['HierarchicalRequirement']
}
}
]
});
}
});
Rally.launchApp('Rally.example.SimpleBoard', {
name:"Rally Example: Simple Board",
parentRepos:""
});
});
</script>
<style type="text/css">
.app {
/* Add app styles here */
}
</style>
</head>
<body>
</body>
</html>
However, if you try to load the app in this way, you'll get a 404 when it looks for the Rally.ui.gridboard.plugin.GridBoardCustomFilterControl class.
Looking at the AppSDK2.0rc3 docs, this plugin does not appear to be available under the Rally.ui.cardboard.plugins.* tree that's bundled into the SDK. See screenshot here:
AppSDK2.0rc3 screenshot excerpt:
Nor does it appear that the Rally.ui.gridboard.plugin.* tree is bundled into the AppSDK. It is likely that the class is however, available to the Rally UI via a different javascript bundle (non-public) that the Rally developers use.
Perhaps it would be feasible for Rally Engineering to bundle this plugin into the AppSDK so that customer developers could use it - perhaps file a Feature Request on Rally Ideas or something like that to see if this is achievable.
Site I'm talking about is here:
https://www.facebook.com/kleenexau/app_295074103899059
If you run it in popular browsers - it works. If you run it in IE7 then it magically stops working. I was digging around more then 1 day so far, and decided to post this question here.
The code I'm using to connect to fb is:
<div id="fb-root"></div>
<script src="//connect.facebook.net/en_US/all.js"></script>
<script type="text/javascript">
FB.init({
appId: _FBAPPID, xfbml: true, status: true, cookie: true, oauth: true,
channelUrl: "//sharethesoftness.kleenex.com.au/channel.php"
});
</script>
When you click the button this code is triggered:
function jumpToChoose(data) {
if(data) {
window.location = _SITE + "choose.html";
}
}
function startButtonClickHandler() {
$("#startButton").fadeOut();
$("#ajaxloader").fadeIn();
FB.ui({
method : "permissions.request",
"perms" : 'user_hometown,friends_hometown,email' /*publish_stream,user_about_me,friends_about_me,*/
}, jumpToChoose);
}
Adding 'http' to channelUrl doesn't work either. I have no clue what is causing this problem. I tried many solutions, also this: http://blog.coderubik.com/2011/03/cookies-and-facebook-canvas-apps/.
Any help would be appreciated. If you need any other details, let me know.
Try adding this at the very top of your page and see if it work.
<?php
header('P3P: CP="NOI ADM DEV PSAi COM NAV OUR OTRo STP IND DEM"');
?>
It seems that IE is preventing you from storing third-party cookies, this header will enable your cookie to survive any privacy setting.