在 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(/>/g, ">").replace(/</g, "<").replace(/"/g, '\"').replace(/:/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">
现在可以按预期工作了。
我有一个加载 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(/>/g, ">").replace(/</g, "<").replace(/"/g, '\"').replace(/:/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">
现在可以按预期工作了。