Angular 无法使Edge将封装的blob识别为视频元素内部的源url

我需要使用blob作为视频文件的源

在Chrome和Safari上一切都很好，但我无法让它在Edge上工作

这个方法是用typescript构建的，我使用Angular 7。我在Edge手机上看到的似乎是断开的链接

private initVideoFromBlob(blob: Blob) {
  const edBlob = new Blob([blob], { type: 'video/mp4' });
  const url = URL.createObjectURL(edBlob);
  this.videoSrc = this.sanitizer.bypassSecurityTrustResourceUrl(url);
}

我也试过这个，但结果是一样的

private initVideoFromBlob(blob: Blob) {
  let url: any;
  const edBlob = new Blob([blob], { type: 'video/mp4' });
  if (window.navigator.msSaveOrOpenBlob) {
    url = window.navigator.msSaveOrOpenBlob(edBlob);
  } else {
    url = (URL || webkitURL).createObjectURL(edBlob);
  }
  this.videoSrc = this.sanitizer.bypassSecurityTrustResourceUrl(url);
}

我的Html：

<video controls>
  <source *ngIf="videoSrc" [src]="videoSrc" type="video/mp4" />
</video>

---

这是一个错误，我将在更新版本中修复，您必须将blob转换为数据uri

//**指向blob的数据URL**
函数dataURLtoBlob（dataurl）{
var arr=dataurl.split（'，），mime=arr[0]。match（/：（.*）；/）[1]，
bstr=atob（arr[1]），n=bstr.length，u8arr=newuint8array（n）；
而（n--）{
u8arr[n]=bstr.charCodeAt（n）；
}
返回新Blob（[u8arr]，{type:mime}）；
}
//**blob到dataURL**
函数blobToDataURL（blob，回调）{
var a=新文件读取器（）；
a、 onload=函数（e）{callback（e.target.result）；}
a、 readAsDataURL（blob）；
}
//测试：blobURL\/
var blob=dataURLtoBlob（'data:text/plain；base64，ywfhyyq=='）；
blobToDataURL（blob，函数（dataurl）{
log（dataurl）；
//dataurl是这里的一个变量，它提供了一个变量，所以您想用blob做的事情与dataurl一起工作
});这是一个bug，我将在更新的版本中修复，您必须将blob转换为数据uri


//**指向blob的数据URL**
函数dataURLtoBlob（dataurl）{
var arr=dataurl.split（'，），mime=arr[0]。match（/：（.*）；/）[1]，
bstr=atob（arr[1]），n=bstr.length，u8arr=newuint8array（n）；
而（n--）{
u8arr[n]=bstr.charCodeAt（n）；
}
返回新Blob（[u8arr]，{type:mime}）；
}
//**blob到dataURL**
函数blobToDataURL（blob，回调）{
var a=新文件读取器（）；
a、 onload=函数（e）{callback（e.target.result）；}
a、 readAsDataURL（blob）；
}
//测试：blobURL\/
var blob=dataURLtoBlob（'data:text/plain；base64，ywfhyyq=='）；
blobToDataURL（blob，函数（dataurl）{
log（dataurl）；
//dataurl是这里的一个变量，它提供了一个变量，所以您想用blob做的事情与dataurl一起工作
});我用一个本地视频文件做了一个测试，它似乎可以在Edge上正常工作。我没有现成的blob url，所以我先将本地视频文件传输到blob。代码示例如下所示，您可以进行测试：

<video controls>
    <source id="videoSrc" type="video/mp4" >
</video>

<script>
    var xhr = new XMLHttpRequest();
    xhr.responseType = 'blob';

    xhr.onload = function () {

        var reader = new FileReader();

        reader.onloadend = function () {

            var byteCharacters = atob(reader.result.slice(reader.result.indexOf(',') + 1));

            var byteNumbers = new Array(byteCharacters.length);

            for (var i = 0; i < byteCharacters.length; i++) {

                byteNumbers[i] = byteCharacters.charCodeAt(i);

            }

            var byteArray = new Uint8Array(byteNumbers);
            var blob = new Blob([byteArray], { type: 'video/mp4' });
            var url = URL.createObjectURL(blob);

            document.getElementById('videoSrc').src = url;

        }

        reader.readAsDataURL(xhr.response);

    };

    xhr.open('GET', 'video/test.mp4');
    xhr.send();
</script>


var xhr=new XMLHttpRequest（）；
xhr.responseType='blob'；
xhr.onload=函数（）{
var reader=new FileReader（）；
reader.onloadend=函数（）{
var-byteCharacters=atob（reader.result.slice（reader.result.indexOf（'，'）+1））；
var byteNumbers=新数组（byteCharacters.length）；
for（变量i=0；i

结果是。如果使用上述功能问题仍然存在，您可以尝试制作最小样本来重现问题。
我使用本地视频文件进行了测试，它似乎可以在Edge上正常工作。我没有现成的blob url，所以我先将本地视频文件传输到blob。代码示例如下所示，您可以进行测试：

<video controls>
    <source id="videoSrc" type="video/mp4" >
</video>

<script>
    var xhr = new XMLHttpRequest();
    xhr.responseType = 'blob';

    xhr.onload = function () {

        var reader = new FileReader();

        reader.onloadend = function () {

            var byteCharacters = atob(reader.result.slice(reader.result.indexOf(',') + 1));

            var byteNumbers = new Array(byteCharacters.length);

            for (var i = 0; i < byteCharacters.length; i++) {

                byteNumbers[i] = byteCharacters.charCodeAt(i);

            }

            var byteArray = new Uint8Array(byteNumbers);
            var blob = new Blob([byteArray], { type: 'video/mp4' });
            var url = URL.createObjectURL(blob);

            document.getElementById('videoSrc').src = url;

        }

        reader.readAsDataURL(xhr.response);

    };

    xhr.open('GET', 'video/test.mp4');
    xhr.send();
</script>


var xhr=new XMLHttpRequest（）；
xhr.responseType='blob'；
xhr.onload=函数（）{
var reader=new FileReader（）；
reader.onloadend=函数（）{
var-byteCharacters=atob（reader.result.slice（reader.result.indexOf（'，'）+1））；
var byteNumbers=新数组（byteCharacters.length）；
for（变量i=0；i

结果是。如果使用上述函数问题仍然存在，您可以尝试制作一个最小的样本来重现问题。
我希望top避免这样做，因为数据url要大得多。您是否碰巧有与此bug问题相关的链接？我认为这可能是一个bug，但还没能对此做出任何改进。不，对不起，我可以在我的网站上给你一个关于所有bug的统一页面，所以我希望top避免这样做，因为数据url要大得多。您是否碰巧有与此bug问题相关的链接？我认为这可能是一个bug，但还没有发现任何问题。不，很抱歉，我可以在我的网站上为您提供关于所有问题的统一页面。当您使用
window.navigator.msSaveOrOpenBlob
时，Edge中是否有任何“打开或保存”弹出窗口？此方法可以触发“打开或保存”弹出窗口，让您选择而不是直接显示文件。此外，在边缘控制台中是否有任何错误？不，如果我可以这样做，这将是一个好的选择。Edge在控制台中未显示任何错误。视频文件甚至正在加载。这很奇怪。当您使用
window.navigator.msSaveOrOpenBlob
时，Edge中是否有任何“打开或保存”弹出窗口？此方法可以触发“打开或保存”弹出窗口，让您选择而不是直接显示文件。此外，在边缘控制台中是否有任何错误？不，如果我可以这样做，这将是一个好的选择。Edge在控制台中未显示任何错误。视频文件甚至正在加载。这一切都很奇怪。