HTML5視頻 - 更改多個來源

我在Google上發現了幾個關於此問題的網站，並且在這裏發現了幾個問題，這些問題顯然已得到解答，但由於我一直在爲此工作一兩個星期，只是似乎無法讓它工作，我想重溫一下。HTML5視頻 - 更改多個來源

我正在使用幾個視頻標籤（vd1-3），然後在幾個畫布標籤（cv1-3）中使用的演示。

<video id="vd1" width="480" preload> 
    <source src="jerryclips/Bild01.webm" type="video/webm" id="vd1webm"> 
    <source src="jerryclips/Bild01.mp4" type="video/mp4" id="vd1mp4"> 
</video> 

<canvas id="cv1" width="160" height="270"></canvas>

我有一個使用一個視頻的工作版本。現在我希望能夠動態更改在我的視頻標籤中播放的剪輯，並隨後在畫布標籤中進行播放。據我所知，只改變一個源代碼就是「vd1.src ='...'」，但我希望至少有兩個視頻文件。現在，您可以在這裏看到，我嘗試使用id的源代碼（正如在stackoverflow上回答的問題中所建議的那樣），但我無法完成這項工作。

我們能夠得到的所有來源與這裏的代碼這一點：

var x = document.getElementById("vd1"); 

var items = x.getElementsByTagName("source"); 

for(var i= 0; i < items.length; i++){ 
    alert(items[i].getAttribute('src')); 
} 
}, false);

但我也沒有用它，以改變我的消息來源。我想我可能會使用「items [i] .src = ...」或使用setAttribute，但我無法獲得任何工作。

我對這一切還是比較陌生的，所以我可能會錯過一些非常簡單的東西......所以如果任何人有一個想法，並可以指向我的方向，我會非常感激。

更新： 我們最終想出了這個解決方案是非常簡單和直接

var videoPlaying = vd1.currentSrc; 
var ext = videoPlaying.substr(videoPlaying.lastIndexOf(".")); 
vd1.src = "jerryclips/Bild02"+ext;

來源

2011-04-18 chuls

我覺得你過於複雜的東西 - 有沒有必要更新多個來源爲任何給定的瀏覽器是唯一永遠不會播放你的一個視頻。如果您使用JavaScript加載新源，則只需查詢vd1的currentSrc屬性，即可確定正在播放哪些視頻並以該格式加載新視頻。在這一點上，我只是刪除所有source元素，並將video.src設置爲新值。

來源

2011-04-18 23:24:13 robertc

我想能夠簡化是一個方面，使一個好的程序員:) 所以我最終想做的是有一個視頻數組，並根據用戶輸入或隨機播放這些。如果我只是想找出這個類型，使用子字符串是否有效，並且只需要詢問currentrc給出的字符串的最後4個字母？所以說s.substring（...）=「.webm」或s.substring（...）=「.ogv」 – chuls 2011-04-19 02:37:42

@chuls我假設你是在控制視頻文件名 - 只要你一致地命名它們應該有效。如果您需要爲每個視頻類型匹配多個文件擴展名，請改爲使用正則表達式。 – robertc 2011-04-19 07:22:21

如果您已經有一個視頻正在播放，這會起作用，但是如果當前沒有視頻正在播放並且您想切換播放源？ – Steph 2012-10-31 22:22:25

HTML5視頻 - 更改多個來源

回答

相關問題