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

Question

我有一个加载 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 上看到“错误 kWdiget 从未准备好”。

为了使其在 IE11 中工作，我将 src 与硬编码值绑定，如下所示：

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

但我不能这样做，因为嵌入链接存储在其他地方，用户可以自由替换它。 我在这里错过了什么吗？ 你能建议我做什么，这样我也可以让它与 IE11 一起工作？

Answer 1

我重构了我的代码。 相反，我从用户输入中获取了整个 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">

它现在按预期工作。