0

Tenho uma pasta, na qual abrange vários vídeos com nomes iguais e formatos diferentes:

https://sites.google.com/site/mplayerplugin/repositorio/monstros_sa_2.webm

https://sites.google.com/site/mplayerplugin/repositorio/monstros_sa_2.mp4

https://sites.google.com/site/mplayerplugin/repositorio/big_buck_bunny.webm

https://sites.google.com/site/mplayerplugin/repositorio/big_buck_bunny.mp4

E assim por diante ...


Como vou dar duas opções de download, para os visitantes. Tenho que alterar uma delas. Veja:

function baixar(arquivo) {

    var get = document.getElementById("download").getElementsByTagName('a');

		for(var i in get) {
		     get[i].href = arquivo; 
		}
}
<a href="https://sites.google.com/site/mplayerplugin/repositorio/monstros_sa_2.webm" onclick="baixar(this); return false">A</a>
<a href="https://sites.google.com/site/mplayerplugin/repositorio/madagascar_2.webm" onclick="baixar(this); return false">B</a>
<a href="https://sites.google.com/site/mplayerplugin/repositorio/big_buck_bunny.webm" onclick="baixar(this); return false">C</a>
<a href="https://sites.google.com/site/mplayerplugin/repositorio/procurando_dory.webm" onclick="baixar(this); return false">D</a>

    <hr>

    <span id="download">
        <a id='mp4'>MP4</a> &nbsp; | &nbsp; <a id='webm'>WEBM</a>
    </span>

Como podemos observar, todos os links no documento HTML são de natureza *.webm.

O que falta é efetuar a troca de *.webm por *.mp4, para o link <a id='mp4'>MP4</a>.


Pensei em trabalhar com RegExp, uma coisa que ainda não consigo elaborar.

Alguém tem uma lógica a me mostrar de como posso contornar este empecilho?

3
  • seuLink.replace('.webm', '.mp4');
    – andrepaulo
    Commented 7/04/2017 às 19:20
  • @andrepaulo Huuummm! verdade nem me lembrava desta função no momento que você me trouxe a frente a lembrança. Vou testa-lá e jaja volto pra confimar se funcionou corretamente para o propósito. =) Commented 7/04/2017 às 19:22
  • eu nao entendi quando voce vai usar Mp4 e quando vai usar o WEBM... nessa hora que voce converte o nome ... supondo que voce tenha dois links.. um pra WEBM e uma pra MP4... no de mp4 voce tem que rodar um metodo que pega o link e troca pra .mp4 .. ja que o mesmo esta vindo com o .webm
    – andrepaulo
    Commented 7/04/2017 às 19:27

3 Respostas 3

3

Há um problema em usar .replace() assim:

str.replace(".webm", ".mp4");

O que acontece se location tiver ".webm" no meio da cadeia em vez de como uma extensão?

var str = "www.webmail.meusite.com/foo.webm",
    ext = str.replace(".webm", ".mp4");

console.log(ext); // -> "www.mp4ail.meusite.com/foo.webm"    (-Caramba!)



Tem que usar uma expressão regular para evitar isso:

/\.webm$/i
  • \.webm - Casa à cadeia literal ".webm".
  • $ - Cifrão que corresponde o fim da cadeia.
  • /i - ignorar maiúsculas/minúsculas.

Código

function alternarExt(value) {
    var links = document.getElementsByTagName("a"),
        regex, ext, a;

    if (value == 0) {
        regex = /\.mp4$/i;
        ext = ".webm";
    } else if (value == 1) {
        regex = /\.webm$/i;
        ext = ".mp4";
    }
        
    // Substituir os links
    for (var i = 0; i < links.length; i++) {
        a = links[i];
        a.href = a.href.replace(regex, ext);
        a.textContent = a.href;
        //console.log(a.href);
    }
}
<form>
  <input type="radio" name="ext" value="0" id="opt-webm" onchange="alternarExt(value);" checked="checked">
  <label for="opt-webm">.mp4 -> .webm</label>
  <input type="radio" name="ext" value="1" id="opt-mp4" onchange="alternarExt(value);">
  <label for="opt-mp4">.webm -> .mp4</label>
</form>

<ul>
  <li><a href="https://sites.google.com/site/mplayerplugin/repositorio/monstros_sa_2.webm">https://sites.google.com/site/mplayerplugin/repositorio/monstros_sa_2.webm</a></li>
  <li><a href="https://sites.google.com/site/mplayerplugin/repositorio/madagascar_2.webm">https://sites.google.com/site/mplayerplugin/repositorio/madagascar_2.webm</a></li>
  <li><a href="https://sites.google.com/site/mplayerplugin/repositorio/big_buck_bunny.webm">https://sites.google.com/site/mplayerplugin/repositorio/big_buck_bunny.webm</a></li>
  <li><a href="https://sites.google.com/site/mplayerplugin/repositorio/procurando_dory.html">https://sites.google.com/site/mplayerplugin/repositorio/procurando_dory.html</a></li>
  <li><a href="https://www.webmail.com/foo.webm">https://www.webmail.com/foo.webm</a></li>
</ul>



  • Alternativamente pode usar a seguinte expressão regular para casar qualquer extensão:

    /\.[a-z0-9]{1,5}$/i
    
3
  • Legal que tenha sido útil
    – Mariano
    Commented 8/04/2017 às 11:46
  • @Diego pode fazê-lo com a informação contida nesta resposta. O que é relevante é efectivamente substituir o link.
    – Mariano
    Commented 11/04/2017 às 15:27
  • 1
    Ok, entendo sua postura no seu modo de ver e interpretar. Mas não era bem uma lista com todos formatos sendo alternado de webm para mp4 e vice-versa. O que buscava era examente como dei a resposta. No caso estou usando a minha solução. No entanto, a sua resposta me chamou a atenção sobre o detalhe da cadeia de caracteres ter o conjunto "webm" e/ou "mp4" em sua formação. Resultando assim, num possível erro, senão fazer o uso da expressão regular para tratar a(s) strings. Commented 11/04/2017 às 16:41
1

Segue uma resposta sólida pelo o método replace, que é mais prático para o objetivo. Veja:

function baixar(arquivo) {
    var get = document.getElementById("download").getElementsByTagName('a');

    var ext = document.getElementById("mp4");

  	    for(var i in get) {
	        var vid = get[i];
	        vid.href = arquivo;
	        ext.href = vid.href.replace(/\.webm$/g, '.mp4');
  	    }
}
<a href="https://sites.google.com/site/mplayerplugin/repositorio/monstros_sa_2.webm" onclick="baixar(this); return false">A</a>
<a href="https://sites.google.com/site/mplayerplugin/repositorio/madagascar_2.webm" onclick="baixar(this); return false">B</a>
<a href="https://sites.google.com/site/mplayerplugin/repositorio/big_buck_bunny.webm" onclick="baixar(this); return false">C</a>
<a href="https://sites.google.com/site/mplayerplugin/repositorio/procurando_dory.webm" onclick="baixar(this); return false">D</a>

<hr>

    <span id="download">
        <a id='mp4'>MP4</a> &nbsp; | &nbsp; <a id='webm'>WEBM</a>
    </span>

Explicação

Tive que criar outras variáveis, para aplicar o que andrepaulo sugeriu - o método replace .

São elas, as variáveis: ext e vid.

E partindo do argumento de Mariano, sobre expressão regular. Fiz a inclusão para evitar erros.

Aplicamos o método replace para atualizar as propriedades do objeto RegExp global.

replace(/\.webm$/g, '.mp4');

Para mais detalhes, compare o antes e o depois:

Antes

function baixar(arquivo) {

    var get = document.getElementById("download").getElementsByTagName('a');

    for(var i in get) {
         get[i].href = arquivo; 
    }
}

Depois

function baixar(arquivo) {
    var get = document.getElementById("download").getElementsByTagName('a');

    var ext = document.getElementById("mp4");

    for(var i in get) {
            var vid = get[i];
            vid.href = arquivo;
            ext.href = vid.href.replace(/\.webm$/g, '.mp4');
    }
}

O código é relativamente limpo e dispensa comentários.

1
  • Sugestão de interface: utilize radio button ao invés de link para que o usuário saiba se está baixando em mp4 ou webm
    – Marco
    Commented 7/04/2017 às 21:00
0

Acredito ser nessa parte, se entendi direito o que você quer fazer.

você pode usar o método replace das strings no javascript.

href = href.replace('.webm','.mp4');
0

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .