Question

我不确定如何正确地提出这个问题，但我有一个功能，即允许用户添加嵌入视频代码和视频标题以在页面上显示视频。

我正在使用来自vimeo网站的通用iframe：

<iframe src="//player.vimeo.com/video/VIDEO_ID" width="WIDTH" height="HEIGHT" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

我正在使用knockout绑定并显示数据。所以在我的模型中我有

var videoModel = function(data){
   self={
       title: ko.observable(data.title || ''),
       embedCode: ko.observable(data.embedCode || '')
    };
   self.videoInfo = function(){..//open form for user to enter video title and embed code..}

}

在我的视图页面中，我可以选择让用户点击打开视频信息条目，但保存信息后，iframe应显示视频值。这就是我遇到麻烦的地方......这就是我现在所拥有的：

    <!-- ko if: edit -->
        <!-- ko ifnot: content().title -->
            <a target="_blank" data-bind="click: videoInfo">Add/Edit Video</a>
        <!-- /ko -->
    <!-- /ko -->

    <!-- ko ifnot: edit -->
    <iframe src="//player.vimeo.com/video/VIDEO_ID" width="WIDTH" height="HEIGHT" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
    <!-- /ko -->

以下是用户可能保存以显示的视频嵌入代码示例：

<iframe src="https://player.vimeo.com/video/92936956" width="500" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
<p><a href="https://vimeo.com/92936956">The BIG Breakfast</a> from <a href="https://vimeo.com/vanderkloot">William VanDerKloot</a> on <a href="https://vimeo.com">Vimeo</a>.</p>

我不确定我需要做什么或丢失什么来确保保存的视频显示在iframe中。目前我保存后得到Oops! The embed code for this video is not valid.但是当我在控制台中调试时，我看到保存的数据就在那里。我相信，保存的实际视频ID不会代替VIDEO_ID

中的iframe呈现

Answer 1

如果您将嵌入代码存储在observable中，则可以使用html绑定来显示嵌入代码。像

这样的东西

<textarea rows=10 cols=50 data-bind="textInput: embedCode" placeholder="Insert embed code"></textarea>
<hr />
<span data-bind="html: embedCode"></span>

function vm(){
    var self = this;
    self.embedCode = ko.observable();
}
ko.applyBindings(new vm())

JsFiddle：http://jsfiddle.net/newuserjs/7wxLxgd1/

如何使用通用播放器iframe显示视频

1 个答案: