3

Desenvolvi um pequeno plugin comumente conhecido como bookmarklet. Resultado esta quase satisfatório para meu caso, no entanto esta havendo um empencilho. Para mim iniciá-lo tenho de dar um duplo clique senão, ele não lança o player na página. Uma vez que toda a função contém os elementos de modo dinâmico, ou seja, será incluso em tempo de execução no documento HTML.

Meu Bookmarklet

javascript:(function(){
var head=document.getElementsByTagName('head')[0];
var scriptA=document.createElement('script');
scriptA.setAttribute('type', "text/javascript");
scriptA.setAttribute('src', "http://releases.flowplayer.org/js/flowplayer-3.2.13.min.js");
head.appendChild(scriptA);
var link=document.createElement('a');
link.setAttribute('class', "player");
link.setAttribute('id', "player");
link.setAttribute('href', "http://www.hdwplayer.com/videos/2012.mp4");
link.setAttribute('style', "display:block;width:1280px;height:720px;margin:10px auto"); 
document.getElementById('video').appendChild(link);
var body=document.getElementsByTagName('body')[0];
var scriptB=document.createElement('script');
scriptB.setAttribute('type', "text/javascript");
scriptB.innerHTML='flowplayer("player", "http://releases.flowplayer.org/swf/flowplayer-3.2.18.swf")';
body.appendChild(scriptB);
}())

Abaixo esta a estrutura do documento HTML, pra realizar Teste(s) onde plugin bookmarklet irá aplicar o "flowplayer":

    <html>
     <head>
      <title>Video</title>
      <style>
        #video {
            background-color: black;
            border: 1px solid red;
            width: 1280px; 
            height: 720px; 
        }
      </style>
     </head>
     <body>
        <center>
            <div id='video'></div>
        </center>
     </body>
     </html>

Resumo

Ele parece não inserir o(s) elemento(s) html e/ou script na primeira inserção com apenas um clique. Isso mostra que somente parte da função é inclusa na página HTML faltando um segundo clique para que complemente o primeiro, fazendo assim a inserção do flowplayer. Mas porque isso ocorre???

Acho que algo em torno do innerHTML

Se eu der um clique só, a saída no console exibi o seguinte alerta:

inserir a descrição da imagem aqui

Após clicar novamente, não ha alerta no console. Tudo flui normalmente.


Atenção - FlowPlayer requer FlashPlayer.

1 Resposta 1

4
+50

O que acho que está acontecendo é que o script do flowplayer ainda não terminou de ser carregado na página e por isso que aparece o erro flowplayer is not defined no primeiro clique e funciona sem problemas no segundo (por que quando você clica a segunda vez ele já está na página). Eu alterei seu script para utilizar o flowplayer após ele ser inserido na página.

Tenta utilizar esse script:

javascript:(function(){
var head = document.getElementsByTagName('head')[0];
var scriptA = document.createElement('script');
scriptA.type = "text/javascript";
scriptA.src = "http://releases.flowplayer.org/js/flowplayer-3.2.13.min.js";
scriptA.onload = function () {
  var link = document.createElement('a');
  link.setAttribute('class', "player");
  link.setAttribute('id', "player");
  link.setAttribute('href', "http://www.hdwplayer.com/videos/2012.mp4");
  link.setAttribute('style', "display:block;width:1280px;height:720px;margin:10px auto"); 
  document.getElementById('video').appendChild(link);
  var body = document.getElementsByTagName('body')[0];
  var scriptB = document.createElement('script');
  scriptB.type = "text/javascript";
  scriptB.innerHTML = 'flowplayer("player", "http://releases.flowplayer.org/swf/flowplayer-3.2.18.swf")';
  body.appendChild(scriptB);
};
head.appendChild(scriptA);
}())

Tudo que depende do flowplayer foi movido para dentro de scriptA.onload que é um callback que só será executado depois que o script do flowplayer for carregado na página.

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 .