dynamically handling metadata

Question

I get data from the server to dynamically create a video gallery on the client. Those data contain metadata-related information such as contributor etc.

I have a standard snippet for dublin core data in my webpage like

    <meta name="DC.Source" id="videdsource" />
    <meta name="DC.Description" id="metadesv" />
    <meta name="DC.Creator" id="videdcreator" />
    <meta name="DC.Contributor" id="videdcontr" />
    //and so on, for all the dublin core elements...

Each time the users picks another video,I want to dynamically change the metadata values using a code like

document.getElementById("videdcreator").content=arrayvid[i];

This is not working. Because If I load the web page and look at the source code, the dublin core elements that are standard have a value , like

<meta name="DC.Rights" content="Copyright 2014"  />

but, the elements that I want to change dynamically, have no values, like

<meta name="DC.Contributor" id="videdcontr" />

How do I fix this?

What is the best practice to dynamically handle multimedia metadata on a webpage?

Thanks

Answer 1

Use php and do something like

<meta name="DC.Creator" id="videdcreator" content="<?echo $arrayvid["vidcreator"][i];?>"/>

Answer 2

I'm fairly new to JS and to stackoverflow as well. Don't know if this is going to help you, but have you tried the following?

Ex. 1

• Have id's to your meta tags -- checked

  <meta name="DC.Source" id="videdsource" />
  <meta name="DC.Description" id="metadesv" />
  <meta name="DC.Creator" id="videdcreator" />
  

• The trigger

object.onclick=changeTags();

• JS function

  function changeTags(){
         $("#videdsource").attr("content","yourlink");
         $("#metadesv").attr("content","Coolest video");
         $("#videdcreator").attr("content","Chuck Norris");
      } 

Does this help you in any way?

Answer 3

This is was my mistake, because first of all, metadata dont support id.

But they have a name. So, in pure JS, I can do getElementsByName and then setAttribute

So the code is

//html part
<meta name="DC.Creator"/>
<button id="change" type="button">change it</button>


//javascript part
document.getElementById('change').onclick=myfunc;
var ha="ha";
function myfunc()
    {
    document.getElementsByName("DC.Creator")[0].setAttribute("content",ha);
    }

You can see your changes by doing "inspect element" on your browser

Credits go to the user named "geomagas" on this Greek forum