UPDATE AJAX + LARAVEL
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...
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');
}
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?
Aguardo o seu retorno.
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 :(
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,
}
});
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 :)
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)
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
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).
Precisa estar logado para conseguir responder a este ticket!
Clique Aqui Para Entrar!