Load video source into videojs or mediaelementjs dynamically from ajax? - javascript

I need to load video source, multiple types, from another website, which on get returns text link into video.
For example i open:
http://www.getthisvideoexample.com?whichvideo=id0
it shows in web browser text link:
http://someotherserver.com/somesubdomainrandomuniquenumber/thisisyourvideovalidforsometime.mp4
or
http://www.getthisvideoexample.com?whichvideo=id0&webm=true
and it shows in web browser text link:
http://someotherserver.com/somesubdomainrandomuniquenumber/thisisyourvideovalidforsometime.webm
But this server sometimes, when load is high,returns 500 error.
So i need to handle it all.
Lets take for example:
<video id="myVideo"></video>
var player = new MediaElementPlayer('#myVideo', {
type: ['video/mp4', 'video/webm'],
success: function (mediaElement, domObject) {
var sources = [
{ src: "HOW_TO_PUT_HERE_DYNAMICALLY_LOADED_MP4_LINK?", type: 'video/mp4' },
{ src: "HOW_TO_PUT_HERE_DYNAMICALLY_LOADED_WEBM_LINK?", type: 'video/webm' }
];
mediaElement.setSrc(sources);
mediaElement.load();
mediaElement.play();
}
});
Also how to make it so, that if 500 or other error is returned instead of link to video, code will just wait few seconds and try again, or display message with text "trying again, wait...."?
Thanks.

I would try a different approach.
I would place an ajax request (using jQuery.ajax()) within a setInterval loop (every 2 seconds perhaps). If the AJAX request, either
http://www.getthisvideoexample.com?whichvideo=id0 // returns a MP4 file
... or
http://www.getthisvideoexample.com?whichvideo=id0&webm=true // returns a webm file
... is successful, then clear the interval (clearInterval()), otherwise keep trying until the server responds successfully (you may need to set a method to clear the interval after some time in case the server is not available, otherwise you will end up in an infinity loop)
How-to?
If the ajax request is successful, then I would build the <video> tag structure with the response and append the tag to a video container (a <div> perhaps)
Then I would bind MEJS to the selector of the newly appended tag like :
var URL = "http://www.getthisvideoexample.com?whichvideo=id0 "; // request video URL
jQuery(document).ready(function ($) {
var getVideo = setInterval(function () {
$.ajax({
url: URL,
cache: false,
dataType: "json", // or else
success: function (response) {
clearInterval(getVideo); // ends loop
// build video tag
// select proper type, based on response
var video = '<video id="video_player" width="320" height="240" controls>' +
'<source src="' + response + '" type="video/' + (response.indexOf("webm") == -1 ? 'mp4' : 'webm') + '" />' +
'</video>';
// target container's selector
$("#videoContainer")
.html(video) // insert video tag
.find("#video_player") // find video selector after insertion
// bind MEJS
.mediaelementplayer({
// MEJS options
});
},
error: function () {
// error in ajax, will try again in 2 seconds
}
});
}, 2000);
}); // ready

Related

Html video shows white screen when added dynamically using ajax

Using jQuery, I'm sending an AJAX request that will send back JSON data with HTML code. The html code will then be appended to the document's body. Here is what I'm doing:
$.get('get.php', { req: 'video_html' }, function (data) {
if (data.responsetype === "SUCCESS") {
$(document.body).append(data.video_html);
}
});
The video_html code is as following:
<video id="newVideo" src="http://.... .mp4" preload="yes">
Your browser does not support video playing.
</video>
The video is added to the document body successfully, the URL (src attribute) is also linked properly to the video but it shows a white screen instead. Anyone knows why?
I added a timeout and it worked:
$.get('get.php', { req: 'video_html' }, function (data) {
setTimeout(function(){
if (data.responsetype === "SUCCESS") {
$(document.body).append(data.video_html);
}
}, 1000);
});

jquery play sound on body replacement

I have a simple site which gets refreshed once every 30 seconds via a jquery full body refresh.
Now once a page refresh occurs I want a short sound to play and I tried to do this with various methods.
the methods work on my pc (IE, chrome and firefox) but the target is a samsung smart tv.
this is my site refresh with the sound added:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
function update_site() {
$.ajax({
url: "test.html",
dataType: "html",
cache: false,
success: function(data) {
// Replace body with loaded site. You can do more checks here to check
// if the fetched content is all there.
var body_html = data.replace(/^[\S\s]*<body[^>]*?>/i, "")
.replace(/<\/body[\S\s]*$/i, "");
$('body').html(body_html);
$('.last_connect').css('background-color', 'blue');
$("#goldengun").get(0).play();
},
error: function(data) {
$('.last_connect').css('background-color', 'red');
}
});
}
// Run every 20 secs.
window.setInterval(function() {
update_site();
}, 20000);
</script>
<style>
.last_connect {
background-color: green;
position: fixed;
top: 0px;
right: 0px;
height: 4%;
width: 2%
}
</style>
</head>
<body>
<div class="last_connect">
</div>
<audio id='goldengun'>
<source src="test.mp3" type="audio/mpeg">
</audio>
<button type="button" onclick="update_site();">update site!</button>
</body>
</html>
like I said this works in my browsers but not on the smart tv, the window refreshes successfully but the sound does not get played. However if I make a single function which ONLY plays the audio and call that on my setinterval it works. If call that function from my update_site() function it doesn`t work. it seems to me this some kind of syncing issue where the browser has not yet loaded everything and it already request to play the sound.
Does anyone have an idea on how to fix this?
help would be greatly appreciated.
use Buzz ( http://buzz.jaysalvat.com/ ). I love it. It uses html5 audio and can play ogg, mp3, and wav as long as the browser supports in in js without creating an audio element.
Example:
function playSound(){
var mySound = new buzz.sound( "/sounds/sound", {
formats: [ "ogg", "mp3", "aac" ]
});
mySound.play();
}
or even simpler:
var sound = new buzz.sound('assets/audio/sound.mp3');
and then where you call the function, call sound.play();
Unless and maybe even if you are dynamically creating sound files, you should know the names. So load the body with jQuery's .load() like so:
$('body').load('newPage.html body');
now you can know when the load is complete instead of a refresh which one can't listen for.
So do:
var sound = new buzz.sound("/sounds/sound.mp3");
$('body').load('newPage.html body', function(){
sound.play();
});
So what this does is it defines the sound, then loads newPage.html's body into the current page's body and when that is done, it plays the sound.
I recommend having the new sound associated with the new page's name or store in a variable.
Suppose I need to load new page and play sound ' abc.mp3 ' on click of an element, I can do:
var sound = new buzz.sound('/sounds/sound.mp3');
$('.element').click(function(){
var pageToLoad = 'abc';
$('body').load(pageToLoad+'.html body', function(){
sound = new buzz.sound('sounds/'+pageToLoad+'.mp3');
sound.play();
});
});
What this does it defines the sound. Then on an event, in this case on click of anything with the class="element", it loads the body of page abc.html and then plays abc.mp3 once that loading is finished.
Unable to test, but perhaps something like this would work?
The following script in the test.html page:
<script type="text/javascript">
var aud = $('<audio>').attr('id', 'goldengun');
var src = $('<source>').attr('src', 'test.mp3').attr('type', 'audio/mpeg');
aud.append(src);
</script>
The following function in caller page:
function update_site() {
$.ajax({
url: "test.html",
dataType: "html",
cache: false,
success: function(data) {
// Replace body with loaded site. You can do more checks here to check
// if the fetched content is all there.
var body_html = data.replace(/^[\S\s]*<body[^>]*?>/i, "")
.replace(/<\/body[\S\s]*$/i, "");
$('body').html(body_html);
$('.last_connect').css('background-color', 'blue');
$('body').append(aud);
aud.get(0).play();
},
error: function(data) {
$('.last_connect').css('background-color', 'red');
}
});
}
window.setInterval(function() {
update_site();
}, 1000);
Or just try:
function update_site() {
$.ajax({
url: "test.html",
dataType: "html",
cache: false,
success: function(data) {
// Replace body with loaded site. You can do more checks here to check
// if the fetched content is all there.
var body_html = data.replace(/^[\S\s]*<body[^>]*?>/i, "")
.replace(/<\/body[\S\s]*$/i, "");
$('body').html(body_html);
$('#goldengun', body_html).get(0).play();
$('.last_connect').css('background-color', 'blue');
},
error: function(data) {
$('.last_connect').css('background-color', 'red');
}
});
}
It's quite likely that the browser itself under Android is disallowing .play() calls in a timed loop.

Loading Spinner Image too fast at start of Function

I have a function that displays contents of a posts when clicked on. I want the loading spinner to display and delay for few sections before the post content appears. The issue here is when I click on each post, the spinner appears for maybe 1ms and in some cases it disappears long before the content appears.
function showPost(id) {
setTimeout(function() {$('#loader').show();},1);
$('#pcontent').empty();
$.getJSON('http://howtodeployit.com/category/daily-devotion/?json=get_post&post_id=' + id + '&callback=?', function(data) {
var $postcon = $('<div/>').append([$("<h3>", {html: data.post.title}),$("<p>", {html: data.post.content})]);
$postcon.appendTo('#pcontent');
});
}
Spinner HTML:
<div id='loader'><img src="css/images/loader.gif"/></div>
Try this:
function showPost(id) {
$('#loader').show();
$('#pcontent').empty();
$.ajax({
url: 'http://howtodeployit.com/category/daily-devotion/?json=get_post&post_id=' + id + '&callback=?',
dataType: 'json',
success: function (data) {
var $postcon = $('<div/>').append([$("<h3>", {
html: data.post.title
}), $("<p>", {
html: data.post.content
})]);
$postcon.appendTo('#pcontent');
$('#loader').hide();
}
});
}
gif image always behave differently on every device..basically it depends upon device's processing speed. so better option is to use image sprites and animate it with javascript..
In your case at page load there is nothing processing..but as page starts to load device's processor cant handle the load and as a result your gif image gets slower
It seems from your last commented line that you are using a timeout to hide the loader. Instead You should handle the hiding inside the callback function of your ajax request, so that loader hides after request is completed, not after a fixed amount of time:
function showPost(id) {
$('#loader').show();
$('#pcontent').empty();
$.getJSON('http://howtodeployit.com/category/daily-devotion/?json=get_post&post_id=' + id + '&callback=?', function(data) {
$('#loader').hide();
var $postcon = $('<div/>').append([$("<h3>", {html: data.post.title}),$("<p>", {html: data.post.content})]);
$postcon.appendTo('#pcontent');
});
}

How To Call Function on page Loading

I'm Using Web service using AJAX Call In My HTML Page . Web Service Returning Data Nearly 30 to 40 second's .
During This Loading Time I Need to Use Some Loading Gif Images After Data Completely Received Form Web Service The Loading Image Must Be Hide.
I'm Using Only HTML,JAVASCRIPT,CSS,J Query.
Any Idea Or Samples Needed.
I'm Using Following Code
$(document).ready(function () {
document.write('<img src="http://www.esta.org.uk/spinner.gif">');
});
$( window ).load(function() {
//This following Function Related To My Design
jQuery(".chosen").data("placeholder", "Select Frameworks...").chosen();
var config = {
'.chosen-select': {},
'.chosen-select-deselect': { allow_single_deselect: true },
'.chosen-select-no-single': { disable_search_threshold: 10 },
'.chosen-select-no-results': { no_results_text: 'Oops, nothing found!' },
'.chosen-select-width': { width: "95%" }
}
for (var selector in config) {
$(selector).chosen(config[selector]);
}
});
In The Above Code My Problem Is On Page Load Gif Image Show But It's Not Hide Only Gif Image Only Showing.
Put a hidden image on your page and as soon as your ajax call is made, make that image visible
$('#image').show();
$.ajax({
complete: function(){
$('#image').hide();
}
});
and hide that image again on Complete of Ajax call.
Use your ajax request callback (on success/failure) instead of page load.
When sending the request just show a gif animation by setting the Display to block
then when you have the data set the display to none
or use jquery
function showHourGlass()
{
$("#gifimage").show();
}
function hideHourGlass()
{
$("#gifimage").hide();
}
You ask for ideas, I have one sample -
http://www.myntra.com/shoes
load scroll down fastly this is the ajax jquery request which is exact output which you have mentioned in your question
Check source code
Jquery Ajax loading image while getting the data
This what the html looks like:
<button id="save">Load User</button>
<div id="loading"></div>
and the javascript:
$('#save').click(function () {
// add loading image to div
$('#loading').html('<img src="http://preloaders.net/preloaders/287/Filling%20broken%20ring.gif"> loading...');
// run ajax request
$.ajax({
type: "GET",
dataType: "json",
url: "https://api.github.com/users/jveldboom",
success: function (d) {
// replace div's content with returned data
// $('#loading').html('<img src="'+d.avatar_url+'"><br>'+d.login);
// setTimeout added to show loading
setTimeout(function () {
$('#loading').html('<img src="' + d.avatar_url + '"><br>' + d.login);
}, 2000);
}
});
});
I hope this will help you.

Load image after json respond

How can I load an image after successful json respond?
jQuery
$.post('#Url.Action("Upload", "Camera")', {
type: 'data',
image: canvas.toDataURL("image/png")
}, function (result) {
if(result.success) {
alert('The image was successfully sent to the server for processing');
var $image = $("<img src='~/temp/" + #ViewData["CaputredImage"] + "'/>");
$image.live("load", function () {
$("#imageContainer").append(this);
});
}
});
Image container
<div id="imageContainer"></div>
I'd probably include the path to the newly-submitted image in the JSON sent back from the server, and then:
$.post('#Url.Action("Upload", "Camera")', {
type: 'data',
image: canvas.toDataURL("image/png")
}, function (result) {
if(result.success) {
alert('The image was successfully sent to the server for processing');
// *** Change is on next line ***
var $image = $("<img src='" + result.imagePath + "'/>");
// *** Another change on the next line ***
$image.on("load", function () {
$("#imageContainer").append(this);
});
}
});
Also note I changed the live call to on. That wasn't the correctly way to use live in the first place, and secondly it's been deprecated for a while and has now actually been removed.
Separately, you have a race condition there (although in this case, one that's very unlikely to actually cause you a problem): You aren't hooking the load event of the image until after you've specified its src. Although JavaScript on browsers is single-threaded (unless you use web workers), the browser is not. If it already has the image in cache (again, unlikely in this case), it can fire the load event before you hook it — and seeing no handlers attached to the event, it doesn't queue them to run when the JavaScript is next idle.
Also (at the other extreme), you're waiting to add the image to the document until after it's loaded; I'm not 100% certain all browsers will load the image if it's not in any document.
So for what it's worth:
$.post('#Url.Action("Upload", "Camera")', {
type: 'data',
image: canvas.toDataURL("image/png")
}, function (result) {
if(result.success) {
alert('The image was successfully sent to the server for processing');
// *** Changes start here ***
var $image = $("<img>");
$image.css({
position: "absolute",
left: -10000,
top: 0
});
$image.attr("src", image.imagePath);
$image.appendTo(document.body);
$image.on("load", function () {
$image.remove();
$("#imageContainer").append("<img src='" + result.imagePath + "'>");
});
// *** End of changes ***
}
});
That creates an img element off-page but in the document, hooks image load, sets the src, and on load drops that img element in favor of a newly-created one that doesn't have the CSS applied to it. (You can chain those calls together, kept them separated for clarity.)
var img = new Image();
img.onload = function () {
$("#imageContainer").append(img);
});
img.src ='~/temp/' + #ViewData["CaputredImage"] ;

Categories

Resources