Generating embed code with embed plugin JavaScript Plugins - Demo 3 / 11
Introduction
Player embedding is a very common feature in video-based websites. It means that you can supply embedding code on the pages that people can copy and paste directly to their own site and the player will work without additional setup. Our embedding plugin provides just that.
You can have any Flowplayer configuration and the embedding plugin does the hard work on making it pasteable on peoples websites. Commercial versions won't have the logo. However the plugin cannot embed any JavaScript events that you may have in your configuration - after all embedding is totally JavaScript free work.
Example
In this example we have a very simple player setup and It's embedding code is on the right. You can copy and paste it on your site or even on your hard disc and it should work on the fly. Try it! (You can select the code with CTRL-A).
Setup
Here is our player container. A simple one without a splash image in it.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- include flowplayer specific files -->
<script src="http://static.flowplayer.org/js/flowplayer.embed-3.0.2.min.js"></script>
<!-- setup player with standard HTML syntax -->
<a
href="http://flowplayer.org/video/flowplayer-700.flv"
style="display:block;width:400px;height:300px;float:left"
id="player">
</a>
<!-- here is a textarea element where the embed code is placed -->
<textarea id="textarea"
style="float:left;height:287px;margin:-1px 0 0 10px;overflow:hidden;width:320px;"></textarea>
<!-- stop floating (things are not side by side after this tag) -->
<br clear="all" />
<script>
// install Flowplayer inside the previous anchor tag
$f("player", "/swf/flowplayer-3.1.5.swf");
// get the embedding code
var code = $f().embed().getEmbedCode();
// place this code in our textarea
document.getElementById("textarea").innerHTML = code;
</script>