How to do one function within another

Question

Hello, I’m trying to make subtitles . ass run in a video, I managed to find this API, but need to run inside the click of a button, but when it reaches the line x.onreadystatechange = function() he stops executing, how can I fix it ??

$(document).ready(function()
{
    $(document).on('click', '.class', function()
    {
        var videoLink = 'videos/video.mkv';
        var subtitle = 'videos/subtitle.ass';

        document.getElementById("video").remove();
        var videoHTML = ['<video id="video" class="video" autoplay controls>',
                             '<source src="'+videoLink+'"/>',
                         '</video>'].join('');

        document.getElementById("videoContainer").innerHTML = videoHTML;

        var x = new XMLHttpRequest();
        x.open('GET', subtitle, 1);
        x.onreadystatechange = function() 
        {
            if (x.readyState === 4 && x.status === 200) 
            {
                var ass = new ASS();
                ass.init(x.responseText, document.getElementById('video'));
            }
        };
    });
});

Answer 1

Try to add the .play(), another detail, lack the send() in your Ajax, the autoplay does not seem necessary, just execute the play as soon as the legend is started.

An important detail, this there is no:

 document.getElementById("video").remove();

The function .remove does not exist in DOM, you must have mistaken the jQuery lib with pure JS, that’s what must have given the whole error, do everything with jQuery even:

$(document).on('click', '.class', function()
{
    var videoLink = 'videos/video.mkv';
    var subtitle = 'videos/subtitle.ass';

    var video = $("#video");
    var videoContainer = $("#videoContainer");

    //Remove o video anterior
    videoContainer.html("");

    var videoHTML = ['<video class="video" controls>',
                         '<source src="'+videoLink+'"/>',
                     '</video>'].join('');

    var x = new XMLHttpRequest();
    x.open('GET', subtitle, 1);
    x.onreadystatechange = function()
    {
        if (x.readyState === 4)
        {
            if (x.status !== 200) {
                alert("Erro ao requisitar:" + x.status);
                return;
            }

            //Atualiza a variável do video com o novo video
            video = $(videoHTML);

            //Adiciona o video ao container
            video.appendTo(videoContainer);
            var c = video.get(0);

            setTimeout(function () {
               var ass = new ASS();

               c.play();

               //video.get(0) pega o video como DOM e passa para o ASS.init
               ass.init(x.responseText, c);
            }, 100);
        }
    };

    x.send(null); //**FALTAVA ISTO**
});

A functional example

$(document).on('click', '.class', function()
{
    var videoLink = 'https://ass.js.org/test.mp4';
    var subtitle = 'https://raw.githubusercontent.com/Aegisub/Aegisub/master/docs/specs/ass-format-tests.ass';
    var video = $("#video");
    var videoContainer = $("#videoContainer");

    //Remove o video anterior
    videoContainer.html("");

    var videoHTML = ['<video class="video" controls>',
                         '<source src="'+videoLink+'"/>',
                     '</video>'].join('');

    var x = new XMLHttpRequest();
    x.open('GET', subtitle, 1);
    x.onreadystatechange = function()
    {
        if (x.readyState === 4)
        {
            if (x.status !== 200) {
                alert("Erro ao requisitar:" + x.status);
                return;
            }

            //Atualiza a variável do video com o novo video
            video = $(videoHTML);

            //Adiciona o video ao container
            video.appendTo(videoContainer);
            var c = video.get(0);

            setTimeout(function () {
               var ass = new ASS();

               c.play();

               //video.get(0) pega o video como DOM e passa para o ASS.init
               ass.init(x.responseText, c);
            }, 100);
        }
    };

    x.send(null); //**FALTAVA ISTO**
});

.video {
    width: 480px;
    height: 320px;
}

<script src="//rawgit.com/weizhenye/ASS/master/dist/ass.min.js"></script>
<script src="//code.jquery.com/jquery-1.12.4.min.js"></script>

<div id="videoContainer"></div>

<p>
    <a class="class" href="#">Iniciar</a>
</p>

In the Jsfiddle: https://jsfiddle.net/cp8d1t6y/2/