2015-11-25 86 views
0

我不知道如何正確地問這個問題,但我有一個功能,讓用戶添加一個嵌入的視頻代碼與視頻標題一起在頁面上顯示視頻。如何使用通用播放器的iframe來顯示視頻

我用的還有Vimeo的網站普遍IFRAME是:

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

我使用淘汰賽綁定和顯示數據。 所以在我的模型,我有

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_IDiframe

+1

需要更多的代碼。你如何設置編輯,video_id,可觀察寬度等? – Dandy

+0

@Dandy編輯我有一個彈出窗口顯示用戶輸入標題和他們想要的視頻的嵌入代碼,然後保存。我有那部分工作正常。它是獲取嵌入代碼實際顯示在iframe中的問題。我不知道如何將嵌入代碼值作爲參數傳遞給iframe。 – 072et

回答

0

您可以使用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/

+0

哇 - 我想我是過度的這個。這很好!謝謝!我沒有考慮'html'的綁定 – 072et

相關問題