SET click em DIV

[Dexter Morgan 7]

Bom dia,

precisava de uma ajuda, tenho uma pagina em que lista varios videos lado a lado:

em cima do video tem um botão que abre uma pagina com video maior la eu consigo colocar uma contagem:

$sql_atualizar_click = "UPDATE midias SET click = (click+1) WHERE id_midia = '$id_midia'";
$resultado_atualizar_click = mysql_query($sql_atualizar_click) or die (mysql_error());

só que queria contar tbm, quando a pessoa assistir direto na parte que exibe varios videos, pensei na solução de colocar uma div sobreposta (invisivel) sobre o video, e ao clicar, faz a contagem, mas to meio perdido se isso funcionaria e nao sei por onde começar, acho que teria que ter algum tipo de evento, ao clicar na div, ela teria que desaparecer e o video começar a rodar ...

[William Bruno 1501]

cara, uma solução muito melhor é vc usar a api do youtube, e ai contabilizar direto no analytics o view do video.

 

sem div sobreposta, sem ajax, sem gambiarra.

https://developers.google.com/youtube/

[milkybar 2]

Crie uma div sobreposta com o sistema de contagem.

Utilize z-index:9 e position:absolute na div para que ela fique sobreposta.

Depois coloque um onClick no link a ser clicado para contabilizado.

 

Para criar o sistema você deve criar o evento Tracking Onclick, juntamente ao Analytics, pesquise que vai ter um monte de tutoriais.

 

Feito isso, basta criar o php nesta div, para exibir a quantidade, puxando diretamente de sua base de dados.

[Dexter Morgan 7]

consegui dessa forma, só que tenho um problema como colocar esse código dentro do while do php com javascript

<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.1.js"></script> 

<div id="ytapiplayer2" style="display:none;">
</div>

<img src="http://i1.ytimg.com/vi/NWHfY_lvKIQ/0.jpg" id="imageID" />
<script type="text/javascript">
$('#imageID').click(function() {
$('#ytapiplayer2').show();
$('#ytapiplayer2').append('<iframe width="480" height="360" src="http://www.youtube.com/embed/NWHfY_lvKIQ" frameborder="0" allowfullscreen></iframe>');
$('#imageID').hide();
});
</script>
</body>




<div id="ytapiplayer3" style="display:none;"></div>

<img src="http://i1.ytimg.com/vi/NWHfY_lvKIQ/0.jpg" id="imageID2" />
<script type="text/javascript">
$('#imageID2').click(function() {
$('#ytapiplayer3').show();
$('#ytapiplayer3').append('<iframe width="480" height="360" src="http://www.youtube.com/embed/NWHfY_lvKIQ" frameborder="0" allowfullscreen></iframe>');
$('#imageID2').hide();
});
</script>

[Diogo Camargo 18]

O que faz um vídeo do YouTube carregar automaticamente é o parâmetro autoplay=1

Ao clicar na imagem do vídeo, você pode usar jQuery para substituir.

<a href="#" class="replaceVideoImage" data-video-id="{VIDEO_ID}">
    <!-- default, hqdefault, mqdefault -->
    <img src="http://img.youtube.com/vi/{VIDEO_ID}/hqdefault.jpg" 
    class="videoImage videoImage{VIDEO_ID}" />
</a>

<script>
// Exemplo
$('body').on('click', '.replaceVideoImage', function(e) {
    var id = $(this).data('video-id');
    
    $('.videoImage' + id).replaceWith('<iframe src="//www.youtube.com/embed/'+ id +'?autoplay=1"></iframe>');
    
    e.preventDefault();
});
</script>

[Dexter Morgan 7]

Resolvido !