flowplayer start / stop on loading external source - external

I have a video shown in flowplayer from an external provider and I only have this few lines to embed the vidoe to ma page:
<script src="http://domain.com/live/js/jquery.min.js"></script>
<script src="http://domain.com/live/js/flowplayer.min.js"></script>
<script src="http://domain.com/live/js/flowplayer.playlist.min.js"></script>
<script src="http://domain.com/live/js/mi/vod.de.php?id=10857"></script>
The player starts right when the page is loaded.
This is the div for the player:
<div id="panes">
<a id="player" style="display:block;width:624px;height:344px;"></a>
</div>
How can I stop, pause and play the video manually?
How can I find out how I can "talk" to the player in order to stop/play the video?
I tried:
$f('player', '??', {
But how do I know the path to the swf file?
Please help!
Thanks in advance!!!

You have to use last version of the Flowplayer.
Use this format to start Flowplayer
( Some discussion u can find here https://github.com/flowplayer/flowplayer/issues/19 )
$(document).ready(function () {
try {
flowplayer().load([{ mp4: "http://stream.flowplayer.org/bauhaus/624x260.mp4" }]);
} catch (e) {
alert(e.message);
}
});

Related

How to play facebook embed videos without going to fullscreen on iOS devices?

I am trying to insert a Facebook embed video on my HTML code. Following is the sample code provided in the Facebook player documentation.
<html>
<head>
<title>Your Website Title</title>
</head>
<body>
<!-- Load Facebook SDK for JavaScript -->
<script>
window.fbAsyncInit = function() {
FB.init({
appId: "{your-app-id}",
xfbml: true,
version: "v3.2"
});
// Get Embedded Video Player API Instance
var my_video_player;
FB.Event.subscribe("xfbml.ready", function(msg) {
if (msg.type === "video") {
my_video_player = msg.instance;
}
});
};
</script>
<div id="fb-root"></div>
<script async defer src="https://connect.facebook.net/en_US/sdk.js"></script>
<!-- Your embedded video player code -->
<div class="fb-video" data-href="https://www.facebook.com/facebook/videos/10153231379946729/" data-width="500" data-allowfullscreen="true"></div>
</body>
</html>
But on iOS devices, it is playing only in fullscreen mode. Is there a way I can play video without going to fullscreen?
Thanks!

HTML5 canvas game won't even preload on Newgrounds on pc, but it works on iPad.

I'm trying to make a game with flash cs6 and createjs. When I test it locally (meaning, I click on the .html file in the output) it works just fine and as intended.
Then I uploaded it on Newgrounds and previewed it with my pc (windows 8.1, google chrome) and the game got stuck on a white screen - meaning the preloading function isn't working properly?
Then I previewed it on my iPad (always from Newgrounds), and it worked on Safari - even though there was no audio.
Then I tried reuploading it on Newgrounds - but this time I removed all the sound from the game - and it works even when previewed on my computer.
From all this, I've deduced that there must be some conflicting code that involves audio preloading when I try to start the game with my pc on Newgrounds. My questions are:
1) When I preview my game on Newgrounds, why won't it even load if there's audio in it and I use my pc? (Remember, it works if I preview it on newgrounds with my iPad, and it works even on my pc if I completely remove the sound files)
2) Why is it that the audio won't work on the Ipad? I added a onclick function at the very first frame of the game to start the sound, as suggested elsewhere; the function works but the sound won't start.
Thanks in advance for your help, please note that I have NO experience with Javascript (all I ever coded with is Actionscript) but I'm willing to learn and trying my best.
Here's the code I have in my index.html file:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CreateJS export from testgame</title>
<script src="http://code.createjs.com/easeljs-0.6.0.min.js"></script>
<script src="http://code.createjs.com/tweenjs-0.4.0.min.js"></script>
<script src="http://code.createjs.com/movieclip-0.6.0.min.js"></script>
<script src="http://code.createjs.com/preloadjs-0.3.0.min.js"></script>
<script src="http://code.createjs.com/soundjs-0.4.0.min.js"></script>
<script src="testgame.js"></script>
<script>
var canvas, stage, exportRoot;
function init() {
canvas = document.getElementById("canvas");
images = images||{};
var manifest = [
{src:"images/Bitmap10.png", id:"Bitmap10"},
{src:"images/Bitmap12.png", id:"Bitmap12"},
{src:"images/Bitmap13.png", id:"Bitmap13"},
{src:"images/Bitmap14.png", id:"Bitmap14"},
{src:"images/Bitmap15.png", id:"Bitmap15"},
{src:"images/Bitmap16.png", id:"Bitmap16"},
{src:"images/Bitmap17.png", id:"Bitmap17"},
{src:"images/Bitmap18.png", id:"Bitmap18"},
{src:"images/Bitmap19.png", id:"Bitmap19"},
{src:"images/Bitmap20.png", id:"Bitmap20"},
{src:"images/Bitmap21.png", id:"Bitmap21"},
{src:"images/Bitmap22.png", id:"Bitmap22"},
{src:"images/Bitmap23.png", id:"Bitmap23"},
{src:"images/Bitmap24.png", id:"Bitmap24"},
{src:"images/Bitmap30.png", id:"Bitmap30"},
{src:"images/Bitmap31.png", id:"Bitmap31"},
{src:"images/Bitmap32.png", id:"Bitmap32"},
{src:"images/Bitmap33.png", id:"Bitmap33"},
{src:"images/Bitmap34.png", id:"Bitmap34"},
{src:"images/Bitmap35.png", id:"Bitmap35"},
{src:"images/Bitmap36.png", id:"Bitmap36"},
{src:"images/Bitmap37.png", id:"Bitmap37"},
{src:"images/Bitmap38.png", id:"Bitmap38"},
{src:"images/Bitmap39.png", id:"Bitmap39"},
{src:"images/Bitmap4.png", id:"Bitmap4"},
{src:"images/Bitmap5.png", id:"Bitmap5"},
{src:"images/Bitmap6.png", id:"Bitmap6"},
{src:"images/Bitmap7.png", id:"Bitmap7"},
{src:"images/Bitmap8.png", id:"Bitmap8"},
{src:"images/Bitmap9.png", id:"Bitmap9"},
{src:"sounds/siglaintro.mp3", id:"siglaintro"},
{src:"sounds/siglaloop.mp3", id:"siglaloop"}
];
var loader = new createjs.LoadQueue(false);
loader.installPlugin(createjs.Sound);
loader.addEventListener("fileload", handleFileLoad);
loader.addEventListener("complete", handleComplete);
loader.loadManifest(manifest);
}
function handleFileLoad(evt) {
if (evt.item.type == "image") { images[evt.item.id] = evt.result; }
}
function handleComplete() {
exportRoot = new lib.testgame();
stage = new createjs.Stage(canvas);
stage.addChild(exportRoot);
stage.update();
createjs.Ticker.setFPS(24);
createjs.Ticker.addEventListener("tick", stage);
}
function playSound(id, loop) {
createjs.Sound.play(id, createjs.Sound.INTERRUPT_EARLY, 0, 0, loop);
}
</script>
</head>
<body onload="init();" style="background-color:#D4D4D4">
<canvas id="canvas" width="820" height="480" style="background-color:#ffff66"></canvas>
</body>
</html>
Issue solved. All I had to do was to use the most recent versions of the createjs tool in the html code, like this:
<script src="http://code.createjs.com/easeljs-0.7.1.min.js"></script>
<script src="http://code.createjs.com/tweenjs-0.5.1.min.js"></script>
<script src="http://code.createjs.com/movieclip-0.7.1.min.js"></script>
<script src="http://code.createjs.com/preloadjs-0.4.1.min.js"></script>
<script src="http://code.createjs.com/soundjs-0.5.2.min.js"></script>
So, problem solved, please ignore me, just coding around

MediaElement.js stops other players if another starts

I am using MediaElement.js and need other players to stop playing if another is starts.
This question has been asked before but I am a little confused as to how to apply this code.
I have seen others had solved this and had it working by using the following in jQuery:
$('video,audio').each(function() {
$(this)[0].pause();
});
Where should I put this code? Or where exactly in the jquery.js file should I put it? I can't get it to work.
I need my other players to stop playing if another starts.
/*new MediaElementPlayer('.player_1', {success: function(media, node, player) {
// this will be undefined since it's the player with buttons
alert(player.paused);
// this will be a real value since it's the underlying mediaelement
alert(media.paused);
}
});*/
$(document).ready(function() {
$('audio').mediaelementplayer({
alwaysShowControls: true,
features: ['playpause','volume','progress'],
audioVolume: 'horizontal'
//audioWidth: 400,
//audioHeight: 120
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://mediaelementjs.com/js/mejs-2.8.2/mediaelement-and-player.min.js"></script>
<link href="http://mediaelementjs.com/js/mejs-2.8.2/mediaelementplayer.min.css" rel="stylesheet"/>
<audio src="http://mediaelementjs.com/media/AirReview-Landmarks-02-ChasingCorporate.mp3" class="player_1"></audio>
<audio src="http://www.jplayer.org/audio/mp3/TSP-01-Cro_magnon_man.mp3" class="player_2"></audio>

Load a thumbnail image if iframe doesn't load from URL

I have an iframe that loads a map from CartoDB.
<iframe src='https://recology.cartodb.com/tables/condma_1_cleaned/embed_map' width='900' height='600'></iframe>
This iframe is embedded in an html presentation. When I am doing the presentation it's possible there won't be internet. In that case, it would be nice if a screenshot of the map would load instead.
How can I get a screenshot of the map to load when loading the live version fails due to lack of internet access?
Borrowing from this answer on SO you could do something like the following:
<script type="text/javascript" src="/javascripts/jquery.js"></script>
<script id="iframe_loader">
function loadIframe() {
var iframe_element = document.getElementById('iframe_id');
if (navigator.onLine) {
iframe_element.src = 'www.CartDB_url.com';
} else {
iframe_element.src = '/local_version_CartDB.htm';
}
}
</script>
And then just before you close the BODY-tag at the end of your website put in
<script>
loadIframe();
</script>

Problem with html5 audio and javascript manipulation

I'm trying to manipulate an audio file (mp3), using <audio> and javascript but nothing happens when I click the link. The alert() is working but nothing happens with the audio i.e. no pause, no play, nothing..., whether in Safari or Firefox. Is the coding dodgy or what?
Check this out:
jQuery/javascript:
$(document).ready( function(){
var audioElement = document.getElementById('audio_player');
$('div.audioControls .play').live('click', function(){
//alert('play');
audioElement.play();
});
$('div.audioControls .pause').live('click', function(){
//alert('pause');
audioElement.pause();
});
$('div.audioControls .playatTime').live('click', function(){
alert('play at time: 30 sec');
audioElement.currentTime = 30;
audioElement.play();
return false;
});
});
HTML:
<audio id="audio_player" controls="controls" src="aaliyah.mp3">
Your browser does not support the audio element.
</audio>
<div class="audioControls">
play
pause
play at 35 secondes
</div>
Thanks!
I now know why, it didn't work. To make use of the javascript API, the controls attributes needs to be removed from the html tag itself and it should work.
Thanks