Question

When someone clicks a button I would like it to play a specified video (on mobile devices). What happens is that when someone clicks the button, I do an AJAX call on the client side like this:

$(".play").click(function(){
    var camerahash = $(this).data('hash');
    var cameratype = $(this).data('type');
    function doAjax(){
        $.ajax({
            url: 'myfile.php',
            success: function(data) {
                if (data == 'Initializing...')
                {
                    setTimeout(doAjax, 2000);
                }
                else
                {
                    $('#quote p').html(data);

                }

            }
        });

    }
    doAjax();
});

This has this div to print messages to the user:

<div id="quote"><p> </p></div>

The server code (myfile.php):

        $r = new HttpRequest('http://localhost...', HttpRequest::METH_GET);
        $r->send();
        $code = $r->getResponseCode();

        switch($code) {
            case 200:
                echo "Starting Stream...    ";
                echo '<a href="http://blah.m3u8">Play Stream</a>';
                echo '<br>';
                break;
            case 450:
                echo "Oops! Camera not found...";
                echo '<br>';
                break;
            case 550:
                echo "Oops! An error occurred...";
                echo '<br>';
                break;
            case 250:
                echo "Initializing...";
                break;
            default:
                echo "Error 600";
                echo '<br>';
                break;  
        }

This works but after pressing the button you get: Starting stream... Play Stream where Play Stream is a link you have to click to play the video. What I want instead is to start the video as soon as the button is clicked (and the proper status code is verified on the server).

I tried according to this post which is very similar.

But I can’t get json to work so I can’t put the url with a redirection such as: window.location.href = data.redirect; where on the server side redirect would have the url. Any ideas what I can do instead?

I should note that this is Joomla so the server code is not myfile.php but actually a component url, but I believe that is irrelevant for this question. Any ideas?

Answer 1

Actually this ends up being quite simple. This old post did point to the right direction.

I have everything I need on the client side, so I just have to redirect using window.location:

window.location = 'http://myurl.com/playlist.m3u8';

Therefore this works perfectly:

$(".play").click(function(){
var camerahash = $(this).data('hash');
var cameratype = $(this).data('type');
function doAjax(){
    $.ajax({
        url: 'myfile.php',
        success: function(data) {
            if (data == 'Initializing...')
            {
                setTimeout(doAjax, 2000);
            }
            else
            {
                $('#quote p').html(data);
                window.location = 'http://myurl.com/playlist.m3u8';

            }

        }
    });

}
doAjax();
});