2

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.

I'm working on a demo that uses several video tags (vd1-3) which are then used in several canvas tags (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>

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.

We were able to get all the sources with this little bit of code here:

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

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

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

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.

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.

Update: Eventually we came up with this solution which is pretty simple and straightforward

var videoPlaying = vd1.currentSrc;
var ext = videoPlaying.substr(videoPlaying.lastIndexOf("."));
vd1.src = "jerryclips/Bild02"+ext;
chuls
  • 217
  • 1
  • 5
  • 9

1 Answers1

4

I think you're overcomplicating things - there's no need to update multiple sources as any given browser is only ever going to be playing one of your videos. If you're loading new sources with JavaScript you can simply query the currentSrc property of vd1, determine which of the videos is playing and load the new video in that format. At that point I'd simply remove all the source elements and set video.src to the new value.

robertc
  • 69,665
  • 18
  • 184
  • 170
  • i suppose being able to simplify is one aspect that makes a good programmer :) So what I'm trying to do eventually is to have an array of several videos and play those depending on user input or at random. If I just wanted to find out the type, would it be efficient to use a substring and just ask for the last 4 letters of the string I'm given by currentsrc? so say s.substring(...) = ".webm" or s.substring(...) = ".ogv" – chuls Apr 19 '11 at 02:37
  • @chuls I was assuming you were in control of the video filenames - as long as you're naming them consistently that should work. If you need to match more than one file extension for each video type then use a regular expression instead. – robertc Apr 19 '11 at 07:22
  • This works if you already have a video playing, but what if there is currently no video playing and you want to switch the source? – Steph Oct 31 '12 at 22:22
  • @Steph Start a video playing and then switch the source. – robertc Oct 31 '12 at 22:24
  • @robertc Right, but let's say I have to select the video source based on user input, so the user tells me the video name, but I need to decide whether to give the browser a webm, mp4, or ogg. I can't determine which one based on the `currentSrc` property, as suggested above because initially there is no `currentSrc`. – Steph Nov 01 '12 at 18:20
  • @Steph Yes, so to get it to work you need to get to a point where there is a `currentSrc`, before you ask the user anything. – robertc Nov 02 '12 at 00:38
  • @robertc Yeah, there's gotta' be a better solution than this. – Steph Nov 02 '12 at 23:19
  • @Steph I'm not sure why you're finding this so difficult to follow. A lot of detection techniques depend upon creating an element whose only purpose is for performing the detection, why can't detecting supported video formats work the same way? – robertc Nov 03 '12 at 10:40
  • @robertc Correct me if I am misunderstanding, but it sounds like you are saying that I have to start playing a video before I can make use of any user input. If that's the case, then that solution will not work for me, as I would like to start the first video based on user input. That's all I'm saying. This solution works better for me: http://stackoverflow.com/questions/5235145/changing-source-on-html5-video-tag – Steph Nov 05 '12 at 21:59
  • @Steph Note that the `Modernizr.video.webm` and similar values in that answer are [not booleans](https://github.com/Modernizr/Modernizr/blob/master/feature-detects/video.js), they are based on [`canPlayType`](http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#dom-navigator-canplaytype) which returns either the empty string or `"probably"` or `"maybe"`. The time when you're going to find out whether or not the browser can *really* play a particular media is after you've played a video. Playing a hidden video for less than 1/100th of a second seems better to me. – robertc Nov 05 '12 at 22:30