Changing target of an embed vlc video

Question

I'm trying to change the target/source of a vlc video based on the user's selection. This is what I have so far:

$('select').change(function() {
            var router = $(this).val();
            alert("The port number is "+router);

            var link = "http://xxx:"+router+"/videostream.cgi?user=admin&pwd=cam1&t=";
            alert("The stored link is: "+link);

            alert("The current target is: "+$("#vlc").attr("target"));

            $("#vlc").attr("target",link);

            alert("The new target is: "+$("#vlc").attr("target",link));

        });

The selection:

<select name="cameras" id="cameras">
    <option value="1101">Cam 1</option>
    <option value="1102">Cam 2</option>
</select>

The vlc object:

<embed type="application/x-vlc-plugin" pluginspage="http://www.videolan.org" version="VideoLAN.VLCPlugin.2"  width="500"  height="500" id="vlc" loop="yes" autoplay="yes" target="http://xxx:1101/videostream.cgi?user=admin&pwd=cam1&t="></embed>

xxx refers to the user's IP. The alerts are for my own testing purposes. The first three go off as they should, but the last returns [object Object]. I've been able to change other attributes of the vlc object, like the width, so it's something with the target attribute I'm missing

Answer 1

You have to detach the <embed> element from the DOM before you change the target attribute. And then attach it again.

var embed, embedParent;

$('select').change(function() {
    var router = $(this).val();

    alert("The port number is "+router);

    var link = "http://xxx:"+router+"/videostream.cgi?user=admin&pwd=cam1&t=";
    alert("The stored link is: "+link);

    alert("The current target is: "+$("#vlc").attr("target"));

    // getting parent for further use
    embedParent = $("#vlc").parent();

    // will remove element from DOM and assing to embed var
    embed = $("#vlc").detach();
    embed.attr("target", link);
    embed.appendTo(embedParent);
});