Botão "Finalizar esta aula" liberado após ver o vídeo

Para que o recurso funcione, primeiro você deve ir em editar os dados do seu curso, e na aba Recursos marcar como SIM a opção "Finalizar aula para progredir?"



Você também pode assistir nosso vídeo tutorial explicativo sobre os próximos passos, veja:

> > > Assistir Vídeo < < <



Após ativar o recurso, você deve ir até a aula e:


1° Inserir o vídeo (Youtube ou Vímeo) - Incorporar Vídeo.

2 - Depois, insira um conteúdo do tipo texto, e na opção 'código-fonte' inclua o código* respectivo abaixo:

* Atente-se, pois abaixo possui o código para Youtube e para o Vimeo, estão separados em seções.



Youtube:

<style type="text/css">
    .maestrus-video {
    display: none
}

.embed-container {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    max-width: 100%;
}

.embed-container iframe, .embed-container object, .embed-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

#btn-end-lesson {
    visibility: hidden
}
</style>
<div class="embed-container">
    <div id="player"></div>
</div>
<script src="https://www.youtube.com/player_api"></script>
<script>
    var url_video = document.getElementsByClassName("oembed")[0].href
    var url = new URL(url_video);
    var v = url.searchParams.get("v");

    // create youtube player
    var player;

    function onYouTubePlayerAPIReady() {
        player = new YT.Player('player', {
            width: '800',
            height: '600',
            videoId: v,
            events: {
                onReady: onPlayerReady,
                onStateChange: onPlayerStateChange
            }
        });
    }

    // autoplay video
    function onPlayerReady(event) {
        event.target.playVideo();
    }

    // when video ends
    function onPlayerStateChange(event) {
        if (event.data === 0) {
            document.getElementById("btn-end-lesson").style.visibility = "visible";
        }
    }

</script>
HTML





Vimeo:

<style type="text/css">.maestrus-video {
    display: none
}

.embed-container {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    max-width: 100%;
}

.embed-container iframe, .embed-container object, .embed-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

#btn-end-lesson {
    visibility: hidden
}
</style>
<div class="embed-container">
    <iframe allowfullscreen="" frameborder="0" height="600" id="vimeo-video" mozallowfullscreen="" src=""
            webkitallowfullscreen="" width="800"></iframe>
</div>
<script src="https://player.vimeo.com/api/player.js"></script>
<script>
    var video = document.getElementsByClassName("oembed")[0].href;
    console.log(video);
    video = video.replace("https://vimeo.com", "https://player.vimeo.com/video");
    console.log(video);
    document.getElementById("vimeo-video").src = video;
    var iframe = document.querySelector('iframe');
    var player = new Vimeo.Player(iframe);

    player.on('ended', function () {
        document.getElementById("btn-end-lesson").style.visibility = "visible";
    });
</script>