4

I am currently attempting to embed a video on an iPhone app, running off ionic.

The HTML is properly formatted and works on android (but only if I'm using some form of crosswalk), however on iOS the video throws the following error: MEDIA_ERR_SRC_NOT_SUPPORTED.

The compiled HTML that does not work is:

<video preload="true" autoplay="true" controls="controls" src="file:///Users/xueye/Library/Developer/CoreSimulator/Devices/78EC1017-3C73-40C0-890A-92874790A463/data/Containers/Data/Application/250685C6-985D-42B4-BD0E-163C319F5C9E/Library/NoCloud/attachments/my_file.mp4">
    <source src="file:///Users/xueye/Library/Developer/CoreSimulator/Devices/78EC1017-3C73-40C0-890A-92874790A463/data/Containers/Data/Application/250685C6-985D-42B4-BD0E-163C319F5C9E/Library/NoCloud/attachments/my_file.mp4" type="video/mp4">
</video>

However, when I read the file into an array buffer and then put it into a blob like so, the following compiled video tag works:

$cordovaFile.readAsArrayBuffer(cordova.file.dataDirectory + "attachments/", fileName).then((result) => {
    var videoBlob = new Blob([result], {type: playerType});
    var blobUrl = URL.createObjectURL(videoBlob);

    var newEle = angular.element('<video preload="true" autoplay="true" controls="controls"><source src="' + blobUrl + '" type="' + playerType + '"></source></video>');
    player = <HTMLMediaElement><any>newEle[0];

    player.loop = $scope.loop;
    player.src = blobUrl;

    player.addEventListener('error', (e) => {
        console.log(e);
    }, true);

    element.append(newEle);
    player.play();
}, (error) => {
    console.log(error);
});

Which compiles into:

<video preload="true" autoplay="true" controls="controls" src="blob:file:///4ea350bd-1f61-4b4b-8a4d-4e75d0247fad">
    <source src="blob:file:///4ea350bd-1f61-4b4b-8a4d-4e75d0247fad" type="video/mp4">
</video>

I would love to get away from this awful hacky workaround, especially because I'm highly concerned about loading an entire file into an ArrayBuffer and then again into a blob; on any reasonable size video, that seems like a disaster. This was the only way I could hack it together.

There doesn't even appear to be any way to read directly into a blob to at least cut down on a little overhead. Is it possible to get the video working without using this blob hack? Why does that work, anyways?

Phil Barresi
  • 1,355
  • 1
  • 14
  • 30
  • `MEDIA_ERR_SRC_NOT_SUPPORTED` seems to happen if the [_MIME_ is not correct](http://stackoverflow.com/questions/2260321/media-err-src-not-supported-html5-audio-woes) (or a supported format). Does it work if you only have the _src_ on `` and not ` – Paul S. Apr 14 '15 at 15:21
  • That error still occurs then; I'm going to try and see if maybe FileTransfer isn't properly saving the MIME type. – Phil Barresi Apr 14 '15 at 15:27
  • Just realized, mime types are generally set by the server, aren't they? That would explain the issue; just not sure how to work around it. – Phil Barresi Apr 14 '15 at 15:37
  • Related: [How to open local file from browser?](https://stackoverflow.com/q/46430889/11107541) and [browser load local file without upload](https://stackoverflow.com/q/4574240/11107541) – starball Dec 11 '22 at 23:46

0 Answers0