How to embed the player in an iframeYou can embed the player on your site via iframe (the same way all video-sharing sites like YouTube distribute their players). An iframe is the site layout element in which the HTML page is loaded. This page also hosts the player. An example of such page: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title></title>
<script src='playerjs.js' type='text/javascript'></script>
</head>
<body>
<style>
html,body{
margin:0;padding:0;width:100%;height:100%;
}
</style>
<div id="playerjs" style="width:100%;height:100%;"></div>
<script type="text/javascript">
var ps = location.href.substr(location.href.indexOf("html?")+5).split("&");
var vs = {id:"playerjs"};
for(var i = 0; i<ps.length; i++){
var p = ps[i].substr(0,ps[i].indexOf("="));
var v = ps[i].substr(ps[i].indexOf("=")+1);
if(p!=v){
vs[p] = decodeURIComponent(v);
}
}
if(vs.file){
var playerjs = new Playerjs(vs);
}
</script>
</body>
</html>
For example, you place this code in the player.html file and put it in the player folder. In the same folder should be the player's file (playerjs.js). The iframe code that you embed into the web page will be as follows: <iframe src="//site.com/player/player.html?file=VIDEO_URL&poster=POSTER_URL&title=TEXT" type="text/html" width=100% height=100% frameborder="0" allowfullscreen allow="autoplay; fullscreen; picture-in-picture;"></iframe> Player variables (file, poster, etc.) can be passed in the iframe query string. Download the example (unpack the archive into a folder, copy the player (playerjs.js) into it and run the file test.html) Step-by-step manual to integrate the player using iframe. |