iOS 9 - Can't play video files from device file system, in html 5 video player

ionic-v1
1

Hey there,

Has anyone else had the issue where in iOS 9 when you try to play a video from a file that has been downloaded to the device, it gives you no error and does nothing? Even if the file does exist?

I’m using HTML 5 video like this:

<video controls="controls" preload="metadata" webkit-playsinline="webkit-playsinline" > <source ng-src="{{resourceURL | trustAsResourceUrl}}" type="video/mp4"/> </video>

I know resourceURL exists and that it is a safe URL after it goes through my trustAsResourceUrl filter, but despite my best efforts, the video will not play. It has no problem in Android, but when I test is on both of iPhone 6s Plus & iOS 9 emulator.

I’ve even tried linking directly to the video file in my code with both the file:// and cdvfile:// versions and the video just won’t play. Does anyone have any idea why this would be happening?

I can play the video from an external source or even from my app’s www folder, but when it comes to trying to access it using the file:// or cdvfile:// protocol, it doesn’t seem to like it :frowning:

2

Did you ever find a fix for this?

3

Yes I did, actually. I completely forgot to post this on here, so I appreciate the reminder.

Basically, what I was trying to do was get the video to play inside the one of the ion-tab views, and despite my best efforts, it just WOULD NOT work. I ended up using an ionic modal to serve the <video />.

HTML Modal Template: (I apologize for the spacing, as I couldn’t get it to work properly)

`

{{resource.name}}

Your browser does not support the video tag. `

In the controller, you need to resolve the local file system URL for iOS, because it likes to be weird and inconsistent. I use the regular source of the file, if it’s a video, otherwise, I use the internal URL for any other types of content, such as PDFs, audio files, etc.

$window.resolveLocalFileSystemURL(src, function(dir){

  basePath = dir.toInternalURL();
  media = $cordovaMedia.newMedia(basePath);

  // Check if this is a video, and if so,
  // use the regular src
  // - Otherwise, use the internal URL
  if($scope.resourceType === 'video') {
    $scope.resourceURL = src;
  } else {
    $scope.resourceURL = basePath;
  }

});

I hope this helps!

4

Thanks! Great stuff, sorted this out for me.

5

@snstarosciak, @antonfire i am stuck in this problem for days but no luck , i am simply downloading a file use cordova file transfer plugin and then setting the resource url of video tag in ionic modal example

var targetPath = cordova.file.documentsDirectory + ‘abc.mp4’;
$cordovaFileTransfer.download(url, targetPath, options, trustHosts).then(function(result) {
console.log('download complete (path): ’ + result.fullPath);
console.log('download complete (native): ’ + result.toNativeURL());
console.log('download complete (cdvfile): ’ + result.toInternalURL());
$scope.resourceURL = $scope.toInternalURL();
}

<video controls preload="auto" webkit-playsinline>
<source ng-src="{{resourceURL | trustAsResourceUrl}}">
 </video>

also for testing purpose i am using the IOS9 simulator.Let me know if i am doing something wrong i will be very thankful to you.

6

var targetPath = cordova.file.documentsDirectory + ‘abc.mp4’;
$cordovaFileTransfer.download(url, targetPath, options, trustHosts).then(function(result) {
console.log('download complete (path): ’ + result.fullPath);
console.log('download complete (native): ’ + result.toNativeURL());
console.log('download complete (cdvfile): ’ + result.toInternalURL());
$scope.resourceURL = result.fullPath;
}

Try that