[PROMOÇÃO] Assine com + 30% de desconto ANUAL MENSAL (últimas horas)
Ari Lima Souza
Criador Ari Lima Souza 24/09/2018

Boa tarde mestre Carlos.

Td bem ?

 

Como faço um update em minha TABELA usando LARAVEL + JS.

 

OBS.: Eu preciso fazer uma update em minha tabela VIEW quando o usuário assistir 90% do vídeo do vímeo. 

 

 

#####################MINHA VIEW######################

              <div class="meu_iframe">

                  <iframe src="https://player.vimeo.com/video/41578877" width="640" height="360" frameborder="0" allowfullscreen></iframe>

                </div>

                <!-- Inclusão jQuery -->

                <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

                <script src="https://player.vimeo.com/api/player.js"></script>

                <script type="text/javascript">

                    $(function(){

                        //inclusão do plugin

                        if($('.meu_iframe').length){

                            //aqui faz a captura do iframe

                            var iframe = document.querySelector('iframe');

                            //aqui inicia o plugin do vimeo

                            var player = new Vimeo.Player(iframe);

                            //aqui faz a chamada do evento on e solicita o 'play'(indica que o vídeo foi startado)

                            //existe outros parametros como pause, ended, timeupdate...

                            

Criador Ari Lima Souza 24/09/2018

player.on('play', function(tempo) {

                                //aqui captura o tempo total do vídeo

                                var tempoTotal = tempo.duration;

                                //aqui captura o percentual em execução do vídeo

                                var percentAssistido = tempo.percent;

                                //aqui captura os segundos em execução do vídeo

                                var segundosAssistido = tempo.seconds;

                                console.log(tempoTotal);

                                //essa funcao conta o tempo do vídeo e depois envia um post pro arquivo php

                                setTimeout(function () {

                                    $.post('{{route('ajaxview')}}', {tempo_video: tempoTotal}, function (data) {

                                        if(data.atualizado){

                                            alert("Tabela atualizada no banco");

                                        }

                                    }, 'json');

                                }, (Math.trunc(tempoTotal) * 1000));

                             });

                        }

                    });

                </script>

 

 

 

#####################MINHA ROTA######################

$this->post('ajax', 'SchoolController@ajaxView')->name('ajaxview');

 

 

#####################MEU CONTROLE######################

    public function ajaxview(Request $request)

    {

      return view('school.salavirtual.ajaxview');

    }

Ari Lima Souza
Manager Carlos Ferreira 24/09/2018

Olá, Ari!
Tudo bem;

Primeiramente, recomendo que use o AXIOS, igual fiz no Curso de Laravel com Vue.js

Você está conseguindo recuperar corretamente a porcentagem "percorrida" do vídeo?
console.log(tempo.duration)

Segue uma ideia:
player.on('play', function(time) {
    let duration = time.duration
    let lesson = "{{ $idLesson }}"

    if (duration >= 90) {
        axios.post('/view', {lesson, duration})
                .then(response => {
                    console.log('Success')
                    console.log(response)
                })
                .catch(error => {
                    console.log('Error')
                    console.log(error)
                })
                .finally(() => console.log('Acabou'))
    }
});

Nessa requisição você enviou dos parâmetros "lesson" e "duration".

Sugiro que dê uma olhada no Curso de Laravel com Vue.js, ele vai te ajudar a criar aplicações mais dinâmicas e profissionais.

Qualquer dúvida amigo, pode me retornar. Tá bom?

Carlos Ferreira
Manager Carlos Ferreira 24/09/2018

Aguardo o seu retorno.

Carlos Ferreira
Criador Ari Lima Souza 24/09/2018

Opa mestre...

 

Você está conseguindo recuperar corretamente a porcentagem "percorrida" do vídeo?
console.log(tempo.duration)

ESTOU SIM....

 

O problema é que não consigo chamar o controle....

 

Nessa linha.... dá erro

$.post('{{route('ajaxview')}}', {tempo_video: tempoTotal}, function (data) {

 

 

 

ainda não assisti o Curso de Laravel com Vue.js e não sei o que é AXIOS :(

 

 

 

 

EU TENHO ISSO EM PHP SEM LARAVEL....

<div class="meu_iframe">

    <iframe src="https://player.vimeo.com/video/41578877" width="640" height="360" frameborder="0" allowfullscreen></iframe>

</div>

 

<!-- Inclusão jQuery -->

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script src="https://player.vimeo.com/api/player.js"></script>

 

<script type="text/javascript">

    $(function(){

        //inclusão do plugin

        if($('.meu_iframe').length){

            //aqui faz a captura do iframe

            var iframe = document.querySelector('iframe');

            //aqui inicia o plugin do vimeo

            var player = new Vimeo.Player(iframe);

            //aqui faz a chamada do evento on e solicita o 'play'(indica que o vídeo foi startado)

            //existe outros parametros como pause, ended, timeupdate...

            player.on('play', function(tempo) {

                //aqui captura o tempo total do vídeo

                var tempoTotal = tempo.duration;

                //aqui captura o percentual em execução do vídeo

                var percentAssistido = tempo.percent;

                //aqui captura os segundos em execução do vídeo

                var segundosAssistido = tempo.seconds;

                console.log(tempoTotal);

                //essa funcao conta o tempo do vídeo e depois envia um post pro arquivo php

                setTimeout(function () {

                    //NO ARQUIVO AJAX.PHP FAÇO MEU UPDATE NA TABELA

                    $.post('ajax.php', {tempo_video: tempoTotal}, function (data) {

                        if(data.atualizado){

                            alert("Tabela atualizada no banco");

                        }

                    }, 'json');

                }, (Math.trunc(tempoTotal) * 1000));

            });       

        }

    });

 

</script>

 

 

PRECISO MUDAR ISSO PARA LARAVEL... PODE ME AJUDAR ... Desesperado aqui :(

Ari Lima Souza
Manager Carlos Ferreira 24/09/2018

Olá Ari!

Ajudo amigo, pode sempre contar comigo.

O axios é uma biblioteca muito útil e simples para fazer requisições AJAX. Mais simples ainda do que a opção do jQuery. Veja esse tutorial: https://blog.especializati.com.br/como-fazer-requisicoes-ajax-com-o-axios/

Depois quando tiver tempo veja o curso de Laravel com Vue.js, tenho certeza que você vai gostar e ele vai te ajudar demais.

----------------------------------------

Qual o erro que dá ao enviar a requisição AJAX?
Provavelmente é de CSRF, porque requisições POST no Laravel são validadas, e sempre precisa enviar no Header da requisição AJAX o token.

No header da sua página inclua (no template):
<meta name="csrf-token" content="{{ csrf_token() }}">

Agora você precisa pegar esse token e setar no Header, seja do jQuery, ou do AXIOS (que recomendo). Veja como incluir o Header no jQuery:
let token = document.head.querySelector('meta[name="csrf-token"]');
$.ajax({
    type: 'POST',
    url: '/rota-aqui',
    headers: {
        "X-Requested-With": "XMLHttpRequest",
        "X-CSRF-TOKEN": token.content,
    }
});

Carlos Ferreira
Criador Ari Lima Souza 24/09/2018

Boa noite mestre.. td bem ?

 

consegui usar o axion...Muito obrigado.. mas ainda estou com problemas na lógica...creio que seja na captura do tempo dos videos no vimeo...

 

Estou conseguindo fazer o update apenas se o video for assistido até o final...utilizando o parametro END da API do vimeo... mas preciso que o update seja disparado quando o video for assistido 90%.

 

Pode me ajudar ?

 

segue o código:

https://pastebin.com/NupMkT9L

 

 

Desde já agradeço :)

Ari Lima Souza
Manager Carlos Ferreira 24/09/2018

Vi seu código. Gostou do axios? Aposto que sim! :)

Nessa variável "percentAssistido" você está conseguindo recuperar a porcentagem exata de tempo que foi assista no vídeo?

Porque se sim, pode fazer algo mais ou menos assim:
if (percentAssistido > 90) {
    axios.post('URL')

    [...]
}

(https://www.urbaninsight.com/article/tracking-progress-embedded-vimeo-videos)

Carlos Ferreira
Criador Ari Lima Souza 24/09/2018

Gostei do axios SIM mestre parece ser bem fácil :)

 

Estou conseguindo recuperar a percentAssistido SIM porém tenho que usar o parametro "timeupdate" do vime...e quando o utilizo a lógica faz vários incrementos quando a variavel percentAssistido fica com o valor maior que 90% ... eu naõ consigo fazer apenas um update quando ficar maior que 90...

 

Conseguiu entender ?

 

 

Pois quando utilizo essa lógica:

if (percentAssistido > 90) {
    axios.post('URL')

    [...]
}

 

são disparados varios ajax quando a variavel fica com valor maior que 90....

 

:(

 

Help me rs

 

Ari Lima Souza
Manager Carlos Ferreira 24/09/2018

Ah sim entendi. A partir do momento que passa dos 90% do vídeo faz várias requisições ajax... você quer fazer apenas uma, certo?

Existe uma forma simples de resolver, apenas controlando com variáveis. Veja se gosta:
let completed = false;

if (!completed && percentAssistido > 90) {
    completed = true

    axios.post('URL')

    [...]
}

Dessa forma só vai entrar nesse if uma única vez.

Ah, mas se atualizar a página e chegar novamente nos 90%?
O sistema vai e deve computar uma nova view no vídeo, o que de fato foi.

Ah, mas não quer computar novas views?
É possível controlar isso no lado do Laravel, usando o método firstOrCreate. Mas, de qualquer forma a lógica acima com JS é indispensável, para evitar várias requisições no servidor.

Outra alternativa para controlar a marcação da view no lado do cliente é usar armazenamento local com locaStorage (não acho que seja necessário).

Carlos Ferreira
Sabe a Solução? Ajude a resolver!

Precisa estar logado para conseguir responder a este ticket!

Clique Aqui Para Entrar!