How to do one function inside another

Question

How to do one function inside another

Navigation

#1 by (1 votes)

0

Hello, I'm trying to make captions .ass run in a video, I managed to find this API , but I need to run inside the click a button, but when it arrives on the line x.onreadystatechange = function() it 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'));
            }
        };
    });
});

javascript legendas

asked by anonymous 08.04.2017 / 23:40

1 answer

MongoDB for multi user data How do I use the video tag in Firefox or Chrome

score 1 · Accepted Answer

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

An important detail , this does not exist :

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

The function .remove does not exist in DOM , you should have confused the jQuery lib with pure JS, this is what should have given the whole error, do everything with jQuery itself:

$(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>

No Jsfiddle : link