Question

我目前正在尝试将视频嵌入iPhone应用程序，运行离子。

HTML格式正确且适用于Android（但仅限于我使用某种形式的人行横道），但在iOS上，该视频会引发以下错误：MEDIA_ERR_SRC_NOT_SUPPORTED。

无效的编译HTML是：

<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>

但是，当我将文件读入数组缓冲区然后将其放入类似的blob时，以下编译的视频标记可以正常工作：

$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);
});

编译成：

<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>

我很想摆脱这种糟糕的hacky解决方法，特别是因为我非常关心将整个文件加载到ArrayBuffer然后再加入blob;在任何合理大小的视频上，这似乎是一场灾难。这是我可以一起破解它的唯一方法。

似乎没有任何方法可以直接读入blob，至少减少一点开销。是否可以在不使用此blob hack的情况下使视频正常工作？无论如何，这为什么会起作用？

为什么我可以嵌入blob网址中的视频，但不能嵌入本地文件？

0 个答案: