在 iframe 的 src 中硬编码绑定到 Kaltura 视频作品。但是,将它绑定到一个变量在 IE 中不起作用

Hardcoded binding in iframe's src to a Kaltura video works. But, binding it to a variable does not work in IE

我有一个加载 angularjs 的 SharePoint 网站。在我的一个网站上,我试图展示一个带有来自 Kaltura 的嵌入式视频的 iframe。请参阅下面的代码片段。

注意:出于保密原因,下面的嵌入视频不是实际视频。

JavaScript 文件:

var embedVideoLink = 'https://mediaspace.company.com/embed/secure/iframe/entryId/0_dfnoklj0/uiConfId/12345678'; 
$('<iframe>')
    .attr('id', 'cf_iframe_video')
    .attr('src', embedVideoLink)
    .attr('frameborder', 0)
    .attr('allow', 'autoplay *; fullscreen *; encrypted-media *')
    .attr('allowfullscreen', 'allowfullscreen')
    .attr('width', '100%')
    .attr('height', '350px')
    .appendTo('#cf_iframe_video_container');

HTML 文件:

<div id="cf_iframe_video_container" class="row embed-responsive embed-responsive-16by9">

以上代码在 Chrome 和 Edge 中运行良好,但在 IE 中不行。我一直在 IE 上看到 "Error kWdiget never ready"。

为了让它在 IE11 中工作,我将 src 与这样的硬编码值绑定:

.attr('src', 'https://mediaspace.company.com/embed/secure/iframe/entryId/0_dfnoklj0/uiConfId/12345678')

但我不能那样做,因为嵌入 link 存储在其他地方,用户可以自由替换它。我在这里遗漏了什么吗?你能建议我做什么,这样我也可以让它与 IE11 一起工作?

我重构了我的代码。相反,我从用户输入中获取了整个 embedCode。示例预期输入:

<iframe src="https://mediaspace.company.com/embed/secure/iframe/entryId/0_hx1rzwia/uiConfId/12345678" frameborder="0" class="kmsembed" width="100%" height="350px" allow="autoplay *; fullscreen *; encrypted-media *" allowfullscreen="allowfullscreen"></iframe>

那么,我的js代码是这样的:

var embedCode = curItem.checklist; //Taken from User Input in a SharePoint List
embedCode = embedCode.replace(/&gt;/g, ">").replace(/&lt;/g, "<").replace(/&quot;/g, '\"').replace(/&#58;/g, ':').replace(/\/g,'');
var embeddedIframe = '';
embeddedIframe = common.decodeHTML(embedCode);
$scope.embeddedVideo = $sce.trustAsHtml(embeddedIframe);

最后,HTML 文件如下所示:

<div id="cf_iframe_video_container" class="row embed-responsive embed-responsive-16by9" ng-bind-html="embeddedVideo">

现在可以按预期工作了。