替代用於設置srcObject

設置HTML視頻元素的「src」屬性不Vue.js和Vuex工作：替代用於設置srcObject

<video id="myVideoEl" :src="myStreamSrc" autoplay="autoplay">

myStreamSrc是一個計算值，並在突變的事件設置處理：

AddStream: function (state, plMyStream) { 
    state.myRTCPeerConnection.addStream(plMyStream) 
    state.myStreamSrc = plMyStream 
}

當我運行我的代碼的應用程序，我得到以下錯誤：

HTTP 「Content-Type」 of 「text/html」 is not supported. Load of media resource http://localhost:8080/[object%20MediaStream] failed.

當我執行以下操作時：

state.myVideoEl = document.querySelector('#myVideoEl') 
state.myVideoEl.srcObject = payloadWithMyStream

我沒有收到任何錯誤並顯示流。問題是，我不能使用剪切的工作代碼，因爲引用的元素稍後添加到DOM。當我將div中的html視頻元素綁定到Vuex.js屬性時，此代碼段不起作用。然後我只是得到「未定義」（因爲帶有視頻元素的div元素在頁面加載時不存在）。

設置srcObject和設置src屬性有什麼不同嗎？我認爲，當我設置srcObject視頻元素將具有src屬性，但它不。

是否可以在視頻html屬性中設置srcObject？

欲瞭解更多信息，請訪問我的theard在Vue.js論壇： https://forum.vuejs.org/t/reference-elements-when-they-rendered-with-v-if/16474/13

來源

2017-08-25 La0x1

您是否嘗試過'<視頻V-IF = 「myStreamSrc」 ID = 「myVideoEl」：SRC = 「myStreamSrc」自動播放=「自動播放「>'？ – Reiner

嘗試了您的建議。我犯了同樣的錯誤。 – La0x1

你試過

<video v-if="myStreamSrc" id="myVideoEl" :srcObject ="myStreamSrc" autoplay="autoplay"> ?

否則我建議你寫這種情況下，一個組件：

var videoComponent = { 
    template: '<video ref="myVideoEl" :srcObject ="myStreamSrc" autoplay="autoplay">' 
    props: ['myStreamSrc'] 
} 
Vue.component("video-component", videoComponent)

在母模板中

<video-component v-if="myStreamSrc" :myStreamSrc="myStreamSrc"></video-component>

或者在父項中，您可以將一個觀察者放在srcObject中，我假定它等於false直到正確的視頻源被加載。在這種情況下，您可以等待源目標被設置，然後以工作方式進行。

... 
watchers:{ 
    myStreamSrc: function (newValue, oldValue) { 
     if(!oldValue && !!newValue){ 
     this.nextTick(function() { 
      state.myVideoEl = document.querySelector('#myVideoEl') 
      state.myVideoEl.srcObject = payloadWithMyStream 
     }) 
     } 
    } 
}

提示：當您設置ref="myVideoEl"的HTML元素，而不是id="myVideoEl"您可以使用$refs.myVideoEl代替document.querySelector('#myVideoEl')。這只是一種口味。

PS：我寫的計算器直接將代碼沒有拼寫檢查...

來源

2017-08-26 10:57:59 Reiner

嘗試和「：srcObject =」myStreamSrc「不起作用。沒有錯誤，似乎它不被支持。第二個和第三個解決方案將不起作用，因爲設置」srcObject「或引用一個HTML元素的」$ refs「後來被添加到DOM的」v-if「無法找到和引用，這是我的主要問題。 – La0x1

好的，請添加一切取決於id或ref在https://vuejs.org/v2/api/#Vue-nextTick函數內 – Reiner

謝謝，它的工作原理！但爲什麼我必須使用「nextTick」功能？爲什麼我不能只使用「v-if」，觀察變化並在觀察變量更改爲true後設置視頻html元素的「srcObject」？如果我這樣做，在DOM中找不到該元素。爲什麼它只與「nextTick」函數一起工作？ – La0x1

替代用於設置srcObject

回答

相關問題