Why can I embed a video from a blob url but not from a local file?

I am currently trying to embed a video in an iPhone app while working with ionic.

HTML formatted correctly and runs on android (but only if I use any form of pedestrian crossing), but in iOS video displays the following error: MEDIA_ERR_SRC_NOT_SUPPORTED.

Compiled HTML that does not work:

<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 the array buffer and then put it in blob, for example, 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);
});

What compiles to:

<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 like to get away from this terrible hacker bypass, especially because I am very concerned about loading the whole file in ArrayBuffer, and then again in blob; on any video with a reasonable size that seems disastrous. That was the only way to crack it.

, . , blob? ?

+4

All Articles