Facebook Instant Games stuck at 0% loading - javascript

I have a super simple HTML5 game that I'm trying to test within facebook embedded player, but the game always stuck at 0% loading and it doesn't log the word "test" that I have at the beginning meaning that it's not even initialized. why is that?
https://www.facebook.com/embed/instantgames/YOUR_GAME_ID/player?game_url=https://localhost:8080
I have replaced the GAME_ID with mine
index.html
<script>
FBInstant.initializeAsync().then(function() {
console.log("test");
var progress = 0;
var interval = setInterval(function () {
progress+=3;
FBInstant.setLoadingProgress(progress);
} , 100);
FBInstant.startGameAsync()
.then(function() {
// Retrieving context and player information can only be done
// once startGameAsync() resolves
var playerName = FBInstant.player.getName();
var playerPic = FBInstant.player.getPhoto();
var playerId = FBInstant.player.getID();
// Once startGameAsync() resolves it also means the loading view has
// been removed and the user can see the game viewport
game.start();
});
});
</script>

Facebook Instant game will work on HTTPS, one of your chrome browser tab should open below the localhost URL
https://localhost:8080
Then in the next tab, you should run the below URL, now it will work fine.
https://www.facebook.com/embed/instantgames/YOUR_GAME_ID/player?game_url=https://localhost:8080

it seems to have problem with the variable "game." I do not find where it is initiated. When I temporally disable commands with "game" and it no longer stucks at 0%. Try debugging that variable, you may resolve the problem.

Related

Embed.ly API: player.js not working with youku.com

I have a problem with embedded video. I use "Embed.ly API" and "player.js":
https://docs.embed.ly/docs/oembed
https://docs.embed.ly/docs/playerjs
I'm trying to embed a video from "youku.com" on my site. The "youku.com" is a content provider, as stated here: https://embed.ly/providers
Video is added but player's methods (play, pause and others) does not work for video. But if I changing video service from "youku.com" to "youtube.com" and use video from "youtube.com", then methods works well.
I also tried to connect the "platform.js" instead of the player. The result is the same.
Maybe the "player.js" worked before, I guess that the "youku.com" has changed its API, but the "player.js" did not track changes.
Does the player.js really work with "youku.com" now? Perhaps something should be added to my code for solve the problem? I am not in China, can it have any effect due to the fact that "youku.com" is a Chinese service?
Thanks.
My code js: (And another question: are there any errors in the code?)
var obj_json = $.getJSON('https://api.embedly.com/1/oembed?' + $.param({
url: :url, // for example: https://v.youku.com/v_show/id_XMzg2MjgwNzA0OA==.html
key: :key // my_API_key
})).done(function () {
$('.embeded').html(obj_json.responseJSON.html).find('iframe.embedly-embed').each(function () {
// initialize the player.
var player = new playerjs.Player(this);
player.on('ready', function () {
player.setLoop(true); // it is not work
player.play(); // it is not work
//..................................
// There are also special buttons on the page, clicking on which the video should start or stop:
$('.button_play').click(function () {
player.play(); // pressing occurs, but player it is not work
});
$('.button_pause').click(function () {
player.pause(); // pressing occurs, but player it is not work
});
//.........................................
});
});
});

Javascript audio not playing

I get a headache trying to understand why my script is not playing the sounds like i want to.
I have a quite simple HTML/Javascript animation with several sounds into it, executed on user's interaction (swipe, click, validate...).
Here is the url if you want to test and see the complete source :
http://artcode.fr/apps/bioprojet/simulation/index.html
The issues are at step 4 & 5 :
Step 4, clicking on the red button makes it disappear, execute an "injection sound", plays "validate sound" and then goes to step 5 where there should be a clock sound executed each second during the countdown to 10.
This regular behavior is ok in desktop browser (Safari/Chrome), but when launched in Safari mobile ou Chrome mobile, the sounds on step 4 are not always played (sometimes even inverted), and the clock sound on step 5 is never played.
I tried a lot of things to make it work, with no success, as :
"currenTime" and "pause()"
"onended" event, but doesn't seem to work on mobile
different sounds, to see if the issue came from this (answer is no)
inverted places
Here is the part of the code where the mess is :
if(e==4){
$("#voir_etape_3").addClass("voir_etape_on");
$("#bouchon_rouge").click(function(){
clic.play();
$("#anim_clic").animate({ top: "110px" }, { duration:50, complete: function(){
var pauseclic = setInterval(function(){
clearInterval(pauseclic);
valide.play();
$(".etape").hide();
$("#etape_5").show();
actions(5);
},2000);
}});
});
}
if(e==5){
$("#voir_etape_4").addClass("voir_etape_on");
var t=0;
var decompte = setInterval(function(){
t++;
if (t<=10){
tic.play();
$("#decompte").text(t);
if (t==10){ $("#decompte").addClass("decompte_on"); }
} else{
$("#decompte").addClass("decompte_on");
if (t==11){
clearInterval(decompte);
tictactic.pause();
//tictactic.currentTime = 0;
valide.play();
$(".etape").hide();
$("#etape_6").show();
actions(6);
}
}
}, 1000);
}
Sounds are defined at the beginning of my javascript script :
var valide = new Audio('./graph/valide.mp3');
var tic = new Audio('./graph/tictac.mp3');
var tictactic = new Audio('./graph/tictactic.mp3');
var clic = new Audio('./graph/clic.mp3');

Throttling HTML5 Video currentTime

I have an app that tracks video views and integrates it with other marketing activities. In doing so, I needed to keep track of how long a person watches a html5 video and post it back to my app (via an API). I'm using videojs player, but really this is just a wrapper around the HTML5's api for this attribute. This is in an app with various videos can be loaded based on what page they are watching, so I needed a solution that tracked regardless of video length.
The problem I had, as a video plays the API reports back every ~300MS and I didn't want to hit my API that often. So I needed a solution to keep track of last time I posted. After digging around, I couldn't find an answer, so in case someone else with a similar need, my solution to this problem is below.
We've decided that I wanted to post my video viewing results every 5 seconds, but since we have no guarantee that the currentTime will report back at exactly 5 seconds, so we just need to round to closest whole integer value.
On my video wrapper div, I've added a data attribute called data-last-time-push. I post the rounded time every time I push and check to see if we have exceed the interval before we post again.
HTML
<div id="video-wrapper" data-time-last-push="0">
Javascript
Bind the videojs container to the timeupdate property.
var vid = videojs("video-container", {}, function() {
this.on('timeupdate', videoTracker);
});
function for posting ajax...
var videoTracker = function() {
var player = this;
var last_push, wrapper, current;
wrapper = $('#video-wrapper');
last_push = wrapper.attr("data-time-last-push");
current = Math.round(player.currentTime());
//you could make the 5 here to be a variable or your own interval...
if (current%5 === 0) {
if (current > last_push) {
//do your AJAX post here...
wrapper.attr("data-time-last-push", current);
console.log('currentTime = ' + player.currentTime());
console.log(' duration: ' + player.duration());
}
}
};
Note, I tried to do a jsfiddle to show it working, but ended up running into HTTPS videos because the sample videos don't work through secure connections.

Changing source in videos-js eating memory until leak

i'm using video-js media player with flash fallback to dynamically play and change mp4-videos (h.264 - only source available) on a site i'm working on.
My problem is, every time i'm changing the video/source, the browser eats more and more memory until it is out of memory and crashes.
the problem occurs on every browser, flash player hardware acceleration enabled and disabled.
Player is initialized like this:
_V_.options.flash.swf = "../Scripts/ThirdParty/video-js.swf";
_V_.options.flash.iFrameMode = true; //false didn't help
_V_.players = {};
_V_("main_video", { "techOrder": ["flash", "html5"] }).ready(function () {
$.b4dvideo.videoPlayer = this;
if (!$.b4dvideo.contentInitialised) {
$.b4dvideo.contentInitialised = true;
$.b4dvideo._loadContent();
}
this.on("pause", function () {
this.posterImage.show()
});
this.on("ended", function () {
$.b4dvideo.videoPlayer.pause();
$.b4dvideo.videoPlayer.currentTime(0);
$.b4dvideo.videoPlayer.pause();
this.posterImage.show()
});
});
And changing the source of the player
if (!$.b4dvideo.videoPlayer.paused()) {
$.b4dvideo.videoPlayer.pause();
}
$.b4dvideo.videoPlayer.currentTime(0);
$.b4dvideo.videoPlayer.pause();
$.b4dvideo.videoPlayer.src(videoPath);
$.b4dvideo.videoPlayer.play();
It looks like the flash player is keeping the whole video in memory and never releasing it.
Any ideas on that?
I have even tried using jwplayer - same problem :-(
Update 1:
I also created a js-fiddle demonstrating this issue... just press play several times and watch your memory
http://jsfiddle.net/fwcJh/2/

How to make sure Google Analytics loads even if user navigates away from page?

I'm not sure what happens when a page containing the asynchronous version of Google Analytics hasn't fully loaded but the user either closes the browser or navigates to another page.
If the analytics doesn't get recorded like I assume, then what methods are available to ensure that it does?
If it does, how does it work?
This is probably impossible. You can kind of reverse-engineer google analytics stuff by tracking the resources they add to the page, like this:
var googleAnalyticsDidTheThing = false;
// ga_src is the src to a script that Google dynamically adds to your page
// this is your asynchronous code
var ga_src = "something.google.com/ga.js";
var ga_script;
var id = setInterval(function () {
var scripts = document.getElementsByTagName("script");
for (var i=0, len=scripts.length; i<len; i++) {
var script = scripts[i];
if (script.src === ga_src) { ga_script = script; break; }
}
var cb = function () {
googleAnalyticsDidTheThing = true;
};
ga_script.onload = cb;
// This one's for IE
ga_script.onreadystatechange = function () {
if (this.readystate === "complete") cb();
}
}, 50);
But the problem is that only gets you halfway there. You can check to see if it's done by using window.onunload as #nidhin mentioned. However, since javascript is single-threaded, only one process can be taking place at a time. So, I see no way for you to block the user from exiting the page without also blocking ga_script's ability to run in the background. Hence, you can check to see if Google has finished doing their thing, but you can't actually make sure Google can finish.
You could, however, send some info to your own server (the page could leave, but the data would still get sent) and gather statistics on how many users actually do this, to get a feel for what your margin of error is. You could even attempt to do some of the tracking yourself, if you are really determined.
You can check Google analytics is loaded before window is closed like this
<script type="text/javascript">
window.onunload = checkIfAnalyticsLoaded;
function checkIfAnalyticsLoaded() {
if (window._gat && window._gat._getTrackerByName()) {
// Do tracking with new-style analytics
} else if (window.urchinTracker) {
// Do tracking with old-style analytics
} else {
// Probably want to cap the total number of times you call this.
setTimeout(500, checkIfAnalyticsLoaded();
}
}
</script>

Categories