zppinto Posted July 18, 2012 Report Share Posted July 18, 2012 (edited) Boas, Estou a tentar implementar um sistema que me associe determinadas tags num determinado timecode do vídeo. Mas cada vez que o faço, o ficheiro insert.php que escreve na base de dados os valores de tag e timecode, é executado, e o visionamento do vídeo termina tenho que retroceder para o continuar a ver. Eu gostaria de saber qual a melhor forma para inserir esses dados sem sair página html, e como o faço. Obrigado. <!DOCTYPE html> <html> <body> <video id="video1" controls="controls"> <source src="movie.mp4" type="video/mp4" /> <source src="movie.ogg" type="video/ogg" /> O browser não suporta HTMl5. <div id="time"></div> </video> <script type="text/javascript"> myVid=document.getElementById("video1"); function getCurTime() { var aux = myVid.currentTime; document.forms['form'].timecode.value = aux.toFixed(0); document.forms['form'].submit(); } </script> <form name='form' action="insert.php" method="post"> Tag: <input type="text" name="tag" /> <input type="hidden" name="timecode" value=""/><p> <button onclick="getCurTime()" type="button">Submeter</button> </form> </body> </html> Edited July 18, 2012 by zppinto Link to comment Share on other sites More sharing options...
KiNgPiTo Posted July 18, 2012 Report Share Posted July 18, 2012 (edited) O teu problema pode ser resolvido com javascript+ajax, facilmente com jquery: $("#iddoform").submit(function(){ // O form foi submetido... $.ajax({ type: "POST", url: "insert.php", data: $(this).serializeArray(), }).done(function( msg ) { // Recebes aqui o output do teu insert.php alert("Recebido: " + msg); // Fazes o que quiseres com os dados que recebes (se precisares de retornar vários dados, sugiro que os retornas com json }); return false; // Impede a mudança de página }); Os dados do lado do insert.php são normalmente recebidos pelo post... Edit: Para este código funcionar deves receber o jquery, insere isto no head: <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script> Edited July 18, 2012 by KiNgPiTo Link to comment Share on other sites More sharing options...
zppinto Posted July 19, 2012 Author Report Share Posted July 19, 2012 Obrigado pela ajuda. Contudo resolvi o problema de uma forma bem mais simples... iframe 🙂 Link to comment Share on other sites More sharing options...
HappyHippyHippo Posted July 19, 2012 Report Share Posted July 19, 2012 Obrigado pela ajuda. Contudo resolvi o problema de uma forma bem mais simples... iframe 🙂 nãoooooooooooooooooooooooooooooooooooooo IRC : sim, é algo que ainda existe >> #p@p Portugol Plus Link to comment Share on other sites More sharing options...
zppinto Posted July 19, 2012 Author Report Share Posted July 19, 2012 😕 Que fiz eu? Link to comment Share on other sites More sharing options...
HappyHippyHippo Posted July 19, 2012 Report Share Posted July 19, 2012 iframe IRC : sim, é algo que ainda existe >> #p@p Portugol Plus Link to comment Share on other sites More sharing options...
zppinto Posted July 19, 2012 Author Report Share Posted July 19, 2012 Pois, mas o código do KingPito não resulta. O refresh é feito e eu perco o timecode onde me encontrava e o vídeo é reiniciado. O iframe resolvia-me este problema e estava funcional... Mas já agora qual o problema de usar iframe? Link to comment Share on other sites More sharing options...
HappyHippyHippo Posted July 20, 2012 Report Share Posted July 20, 2012 se tens refresh é por uma de duas razões : ou não tens o return false ou tens um erro no javascript que para a execução e segue o submit do formulário ... agora escolhe IRC : sim, é algo que ainda existe >> #p@p Portugol Plus Link to comment Share on other sites More sharing options...
zppinto Posted July 20, 2012 Author Report Share Posted July 20, 2012 Desculpem a ignorância, mas não consigo descobrir o gato 😞 <!DOCTYPE html> <html> <body> <video id="video1" controls="controls"> <source src="movie.mp4" type="video/mp4" /> <source src="movie.ogg" type="video/ogg" /> O browser não suporta HTMl5. <div id="time"></div> </video> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"> $("form").submit(function(){ // O form foi submetido... $.ajax({ type: "POST", url: "insert.php", data: $(this).serializeArray(), }).done(function( msg ) { // Recebes aqui o output do teu insert.php alert("Recebido: " + msg); }); return false; // Impede a mudança de página }); </script> <script type="text/javascript"> myVid=document.getElementById("video1"); function getCurTime() { var aux = myVid.currentTime; document.forms['form'].timecode.value = aux.toFixed(0); document.forms['form'].submit(); } </script> <form id='form' name='form' method="post"> Tag: <input type="text" name="tag" /> <input type="hidden" name="timecode" value=""/><p> <button onclick="getCurTime()" type="button">Submeter</button> </form> </body> </html> Link to comment Share on other sites More sharing options...
HappyHippyHippo Posted July 20, 2012 Report Share Posted July 20, 2012 assim de repente (acho que somente o IE é que não come isto) data: $(this).serializeArray(), /* tens uma virgula a mais */ }).done(function( msg ) { IRC : sim, é algo que ainda existe >> #p@p Portugol Plus Link to comment Share on other sites More sharing options...
KiNgPiTo Posted July 20, 2012 Report Share Posted July 20, 2012 Os gatos são tantos, mas fica aqui algumas modificações... @HappyHippyHippo: Com a ultima versão do IE (talvez ultimas) nunca tive problemas com o serializeArray(), mas fica directamente então... <!DOCTYPE html> <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function() { function getCurTime(){ var myVid=document.getElementById("video1"); return myVid.currentTime; } $("#form").submit(function(){ /* Isto para que não precises do hidden, do outro lado recebes na mesma pelo post o valor do campo timecode pelo $_POST["timecode"] */ var curTime = getCurTime(); $.ajax({ type: "POST", url: "insert.php", data: { tag: $("#tag").val(), timecode: curTime } }).done(function( msg ) { // Recebes aqui o output do teu insert.php alert("Recebido: " + msg); }); return false; // Impede a mudança de página }); }); </script> </head> <body> <video id="video1" controls="controls"> <source src="movie.mp4" type="video/mp4" /> <source src="movie.ogg" type="video/ogg" /> O browser não suporta HTMl5. <div id="time"></div> </video> <form id='form' name='form' method="post"> Tag: <input type="text" name="tag" id="tag" /> <p><input type="submit" value="Submeter" /></p> </form> </body> </html> 1 Report Link to comment Share on other sites More sharing options...
HappyHippyHippo Posted July 20, 2012 Report Share Posted July 20, 2012 (edited) @HappyHippyHippo: Com a ultima versão do IE (talvez ultimas) nunca tive problemas com o serializeArray(), mas fica directamente então... o que eu disse foi que o IE não gosta de virgulas extra exemplo: /* erro so no IE */ var array = {1, 2, 3, 4,}; ps : nunca usei o $.ajax().done() ... isso corre bem quando existe erro de resposta ?? não seria melhor usar isto: $.ajax({ url: url, success: function(data, textStatus, jqXHR) { /* success action */ }, error: function(jqXHR, textStatus, errorThrown) { /* error action */ } }); Edited July 20, 2012 by HappyHippyHippo IRC : sim, é algo que ainda existe >> #p@p Portugol Plus Link to comment Share on other sites More sharing options...
KiNgPiTo Posted July 20, 2012 Report Share Posted July 20, 2012 Ah ok, my bad 🙂 Link to comment Share on other sites More sharing options...
zppinto Posted July 20, 2012 Author Report Share Posted July 20, 2012 Muito obrigado pela ajuda 😉 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now