He encontrado varios sitios en Google sobre este problema y también encontré algunas preguntas aquí, que aparentemente fueron respondidas, pero como he estado trabajando en esto durante las últimas una o dos semanas y parece que no puedo entenderlo para trabajar en absoluto, quería volver a visitar esto.

Estoy trabajando en una demostración que usa varias etiquetas de video (vd1-3) que luego se usan en varias etiquetas de lienzo (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>

Tengo una versión funcional que usa un video. Ahora me gustaría poder cambiar dinámicamente los clips que se reproducen en mis etiquetas de video y, posteriormente, en las etiquetas de lienzo. Cambiar solo una fuente funcionó, por lo que recuerdo, eso fue solo "vd1.src = '...'", pero quiero tener al menos dos archivos de video allí. Ahora, como puede ver aquí, intenté usar id para las fuentes (como se sugirió en una pregunta respondida aquí en stackoverflow), pero no pude hacer que eso funcionara.

Pudimos obtener todas las fuentes con este pequeño código aquí:

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

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

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

Pero tampoco pude usarlo para cambiar mis fuentes. Pensé que podría usar "items [i] .src = ..." o usar setAttribute, pero no puedo hacer que nada funcione.

Todavía soy bastante nuevo en todo esto, por lo que posiblemente me estoy perdiendo algo muy simple ... así que si alguien tiene una idea y podría señalarme una dirección, realmente lo agradecería.

Actualizar Eventualmente se nos ocurrió esta solución, que es bastante simple y directa

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