Databases
StackOverflow2013
Postsdbo
POHTML5 Video - Change multiple sources
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHTML5 Video - Change multiple sources
    text
    copied!<p>I have found several sites on Google about this problem and also found a few questions on here, which were apparently answered, but as I've been working on this for the last one or two weeks and just can't seem to get it to work at all, I wanted to revisit this.</p> <p>I'm working on a demo that uses several video tags (vd1-3) which are then used in several canvas tags (cv1-3).</p> <pre><code>&lt;video id="vd1" width="480" preload&gt; &lt;source src="jerryclips/Bild01.webm" type="video/webm" id="vd1webm"&gt; &lt;source src="jerryclips/Bild01.mp4" type="video/mp4" id="vd1mp4"&gt; &lt;/video&gt; &lt;canvas id="cv1" width="160" height="270"&gt;&lt;/canvas&gt; </code></pre> <p>I got a working version that uses one video. Now I would like to be able to dynamically change the clips that are playing in my video tags and subsequently in the canvas tags. Changing only one source worked, as far as I remember that was just "vd1.src = '...'", but I want to have at least two video files in there. Now as you can see here, I tried using id's for the sources (as was suggested in an answered question here on stackoverflow), but I wasn't able to make that work.</p> <p>We were able to get all the sources with this little bit of code here:</p> <pre><code>var x = document.getElementById("vd1"); var items = x.getElementsByTagName("source"); for(var i= 0; i &lt; items.length; i++){ alert(items[i].getAttribute('src')); } }, false); </code></pre> <p>But I also failed to use it in order to change my sources. I thought I might be able to use "items[i].src = ..." or use setAttribute, but I can't get anything to work.</p> <p>I'm still fairly new to all this, so I'm possibly missing something very simple... so if anyone has an idea and could point me into a direction, I would really appreciate it.</p> <p><strong>Update:</strong> Eventually we came up with this solution which is pretty simple and straightforward</p> <pre><code>var videoPlaying = vd1.currentSrc; var ext = videoPlaying.substr(videoPlaying.lastIndexOf(".")); vd1.src = "jerryclips/Bild02"+ext; </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload