mardi 23 décembre 2014

connect to restful api using Jquery to stream video


I create Restfull Api to stream video .mp4 format it ran as I want.after that I add drop down list had videos list in dir.when the user select video it will stream it i did that using jquery but I have problem when I want to make selected video to play. it give me 404 found


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);
}
});
}
});




Aucun commentaire:

Enregistrer un commentaire