Opening external links and other apps from an Ionic app

ionic-v1
1

Hello,

I would like to know how I can open others apps in my phone like Youtube or the native video player. I have a lot of problems embedding videos with the cordova video player. Indeed, I know that the tag doesn’t work very well in Android devices.

I want to create a sharing video app and I’ve implemented a solution that I thought that it would work:

  1. The videos are uploaded from the Camera to my server using cordova FileTransfer
  2. I’m using the module ffmpeg in backend to get a thumbnail from my video (.mp4)
  3. I show the thumbnails in my device
  4. When user wants to see a video, tap on the thumbnails and video file is downloaded from the server and is located in the device (in a project folder)

Until here, everything is working well. I’ve failed in the next and last step.
I’ve tried a lot of options.

  • Embedding the video file using the tag
  • Embedding the file in a iframe
  • Calling the cordova-media plugin (play() method)

But i didn’t get it work. Someone would help me?

Thanks in advance!

2

Have you tried use the html video tags with a remote source?

3

What do you mean for remote source?

4

You can open another app programmatically via cordova.

navigator.app.loadUrl(link, {openExternal: true});

For example, if your link is of format market://details?id=com.example.app , the play store market will be opened with the listing of the app with the id com.example.app as the landing page.

I’m not sure about the structure of the youtube:// links though

1 Like
5

Thanks, I’m calling directly to the url http://youtube.com/…

6

Hi Pablo! the <video src="localfile.mp4"></video> isn’t working ?

7

Hello,

have you achieved to solve the problem?
I have similar problem , but In my case i try to download from the server and the file is located in the device (in the folder that retrieves cordova.file.dataDirectory ) . ths folder is supposed to be /data/data/app-id/files/
I use this code:

            var targetPath = cordova.file.dataDirectory + video_SD; 

            $cordovaFileTransfer.download(server_url_video, targetPath, {}, true).then(function(result) {
                // Success!
                alert("Ok la descarga: "+ JSON.stringify(result));

image

but when i look inside this folder, nothing appears:
image

maybe is a matter of permissions? does anybody know what is happening? thank you in advance

8

FYI, i have solved this problem.

In order to download the files properly, the right targetpath must be:
var targetPath = cordova.file.externalDataDirectory + video_SD;

and here is the URL ready to be used in video src tag :
$scope.srcFile = result.toNativeURL();

Regards.

9

“cordova.file.dataDirectory” it points the path of apps data directory and i can’t be acessed outside d app . if u want to acess it u need to embed player into app to access the file or else u can try “cordova.file.externalDataDirectory” to view the contents in sdcard

$cordovaFile.checkFile(cordova.file.dataDirectory, filename)
  		.then(function (success) {
			$ionicModal.fromTemplateUrl('templates/audioplayer.html', {
  				scope: $scope,
  				animation: 'slide-in-up'
				}).then(function(modal) {
  				$scope.modal = modal;
  				$scope.modal.show();
				});
		   	//plays audio
		    $scope.getSpecificAudio=function(){
				$scope.specificAudioListURL=(cordova.file.dataDirectory + filename); // calls API service to get the specific audio URL
				console.log($scope.specificAudioListURL)
				$scope.audioplayer = {
					sources: [
		    	        { src: $scope.specificAudioListURL, type: "audio/mpeg"}
		        	],
					theme: {
		        		url: "https://unpkg.com/videogular@2.1.2/dist/themes/default/videogular.css"
						}
					};
					console.log(JSON.stringify($scope.audioplayer))
				}
		},function (error) {
	    	var targetPath = cordova.file.dataDirectory + filename;
		    var trustHosts = true;
		    var options = {};
		    alert(targetPath)
    		$cordovaFileTransfer.download(url, targetPath, options, trustHosts)
  			.then(function(result) {
  				$ionicLoading.hide();
  				alert(JSON.stringify(result))
    			// Success!
  			}, function(err) {
  				alert(JSON.stringify(err))
    			// Error
  			}, function (progress) {
    			$timeout(function () {
      				$scope.downloadProgress = (progress.loaded / progress.total) * 100;
    			});
				$ionicLoading.show({
						template: 'Downloading.. '
				})
			});
  		});

audio player

<div ng-controller="CategoryDetailModelCtrl">
      <div class="videogular-container">
        <videogular vg-theme="audioplayer.theme.url" class="videogular-container audio">
          <vg-media vg-src="audioplayer.sources" vg-type="audio"></vg-media>
          <vg-controls>
            <vg-play-pause-button></vg-play-pause-button>
            <vg-volume>
              <vg-mute-button></vg-mute-button>
            </vg-volume>
            <vg-time-display>{{ currentTime | date:'mm:ss':'+0000' }}</vg-time-display>
            <vg-scrub-bar>
              <vg-scrub-bar-current-time></vg-scrub-bar-current-time>
            </vg-scrub-bar>
            <vg-time-display>{{ timeLeft | date:'mm:ss':'+0000' }}</vg-time-display>
          </vg-controls>
        </videogular>
      </div>
    </div>