使用Jquery连接到restful api以流式传输视频

时间:2014-12-24 04:14:41

标签: javascript jquery html video

我创建Restfull Api以流式传输视频.mp4格式它按我的意愿运行。之后我添加下拉列表在dir中有视频列表。当用户选择视频时它会流式传输我用jquery做了但我有问题当我想制作精选视频时它给我发现了404

html

<!DOCTYPE html>
<html>
<head>
    <title> </title>
    <script src="Scripts/jquery-2.1.1.js"></script>
    <script src="Scripts/Script.js"></script>
</head>
<body>
    <select id="ddlcas"></select>
    <br />
    <video id="mainPlayer" width="1280" height="720"
           autoplay="autoplay" controls="controls" onloadeddata="onLoad()">
        <source src="" />
    </video>
</body>
</html>

的javascript

$(function () {

    //variables 
    var selectedFile = "";

    ////load data into table to view all car 
    $("#ddlcas").load(GetFiles());


    function GetFiles() {
        jQuery.support.cors = true;
        $.ajax({
            url: 'api/media/GetFiles',
            type: 'GET',
            dataType: 'json',
            success: function (data) {
                var appenddata;
                $.each(data, function (key, value) {
                    appenddata += "<option value = '" + value + " '>" + value + " </option>";
                });
                $('#ddlcas').html(appenddata);
            },
            error: function (x, y, z) {
                alert(x + '\n' + y + '\n' + z);
            }
        });
    }

    $("#ddlcas").change(function () {

        selectedFile = $('#ddlcas').val().replace(/^.*[\\\/]/, '');
        $("source").load(Paly(selectedFile));

    });


    function Paly(src)
    {
        jQuery.support.cors = true;
        $.ajax({
            url: 'api/media/play?f=' + selectedFile,
            type: 'GET',
            dataType: 'json',
            success: function (data) {
                $('source').attr('src', data);;
            },
            error: function (x, y, z) {
                alert(x + '\n' + y + '\n' + z);
            }
        });
    }
});

1 个答案:

答案 0 :(得分:0)

试试这个

$("#ddlcas").load(GetFiles());


function GetFiles() {
    jQuery.support.cors = true;
    $.ajax({
        url: 'api/media/GetFiles',
        type: 'GET',
        dataType: 'json',
        success: function (data) {
            var appenddata;
            $.each(data, function (key, value) {
                appenddata += "<option value = '" + value + " '>" + value + " </option>";
            });
            $('#ddlcas').html(appenddata);
        },
        error: function (x, y, z) {
            alert(x + '\n' + y + '\n' + z);
        }
    });
}

$("#ddlcas").change(function () {

    var selectedFile = $('#ddlcas').val().replace(/^.*[\\\/]/, '');
    $('#mainPlayer source').attr('src', 'api/media/play?f=' + selectedFile);;
    $('#mainPlayer')[0].load();
});