Best approach for Mobile Application integration ?
Hello
I have already purchased a Premium account and using cloud-hosted JW Player on a standard website. Everything is fine.
But what is the best approach to include JW Player in a *Mobile Application* ? My goal is to provide video streaming in a connected app (PhoneGap/AngularJS etc..).
Licencing mecanism will probably refuse to activate the player for requests of http://jwpsrv.com/library/MyToken.js made from mobile devices since their domain is not part of the allowed domain list...
I meant that we have never tested against running the player inside of a mobile app, either with PhoneGap or a WebView.
I did a quick test though using PhoneGap build and and a licensed player and the player was able to play properly though in the native iOS app after building it, though.
A deeper integration of the JWPlayer in a phonegap application display an error message instead of the video stream : "Offline playback not supported".
Here is my current context : - PhoneGap v3.3.0, - AngularJS, - JWP v6.8.4816 Premium (self hosted), - Online Youtube Videos, - Internet access.
It looks like the player behaves within phonegap exactly the same way as it would work with local files on a PC (file:///). My analyse is that this error message is displayed not because I'm offline but because local resources are trying to access online files.
For instance, using the same source/code but changing the protocol will change the result : bc.. file:///C:/myApp/index.html => "Offline playback not supported" bc.. http://127.0.0.1/myApp/index.html => Video streamed properly
As a result, any PhoneGap integration of JWPlayed sounds impossible.... Do you guys have any idea to solve this issue ?
That is weird. I tested the player in a PhoneGap 3.3.0 app and I got it to show up and play. Using a licensed copy. I tried cloud hosted and self hosted.
I'm back after i made some clean-up in my code. I managed to produce a working version of the mobile application in this context : - PhoneGap v3.3.0, - AngularJS, - JWP v6.8.4816 Premium (self hosted), - Online Youtube Videos, - Internet access.
My only remaining problem is on iPhone devices... No video is loaded. The <DIV> remains empty as if the _jwplayer().setup()_ was effectless...
The code works fine on Android devices, Chrome and iPad but .... fails on iPhone.
Do you have any idea ? Here some more details about my code.
In order to render videos, I have created an Angular Directive. Right now, my *<myvideotag>* directive is very similar to this : bc.. 'use strict'; angular.module('video-player', []) .directive('myvideotag', function () { return { restrict: 'E',
link: function(scope, element, attrs) {
<...>
var newsId = '123'; var videoSource = 'https://www.youtube.com/watch?v=aynNYT8dM94'; var tagId = 'jwplayer-'+ newsId;
var tag = "<div id='" + tagId + "'></div>"; element.append(tag);
In my *index.html*, all needed files are loaded properly : bc.. <...> <script src="app/lib/jwplayer/jwplayer.js"></script> <script type="text/javascript">jwplayer.key="xxxxxxxx";</script> <script src="app/js/directives/video-player.js"></script> <...>
Some step-by-step debug show that the code goes through the _jwplayer().setup()_ function with no particular error.
What could possibly go wrong with JWP + Angular + iPhone ??
I have made another set of modifications in my view : - fixed : non unique IDs for multiple players in the same page, - fixed : URLs such as jwpltx.com blocked by proxy. and guess what : It worked !
So I can say that *JWP6 is a working way to display Youtube videos in a mobile App for iOS & Android based on AngularJS framework and build with PhoneGap*.
