Frame VideoPlayer - Website X5 Hilfe - Die Helpsite

Zwei Beispiele, einen Videoplayer im Inline Frame anzeigen zu lassen. Im ersten Beispiel wird dazu die jQuery fancybox genutzt, die man hier downloaden kann, aber auch dem Zip-Paket beiliegt.
Im zweitem Beispiel wird das Fenster als iframe geöffnet. Hier wird allerdings dann eine zweite HTML-Datei, hier "projekktor.demo.html".  zur Darstellung des Players benötigt. Auch diese ist im Zip-Paket enthalten.
Insgesamt stehen 6 verschieden Skins für die Controlbar zur Verfügung. Änderungen an den Größen sollten nur erfahrende Nutzer durchführen.
Zip-Datei entpacken und Verzeichnis "media" auf den Server laden. Dem Zip-Paket liegen keine Videofiles bei.

Code für den HEAD-Bereich:

<link rel="stylesheet" type="text/css" href="media/fancybox/jquery.fancybox-1.3.4.css" media="screen" />
<link rel="stylesheet" href="media/skins/hall/style.css" type="text/css" media="screen" />
<script src="media/jquery.min.js" type="text/javascript"></script>
<script src="media/projekktor.test.min.js" type="text/javascript"></script>
<script type="text/javascript" src="media/fancybox/jquery.fancybox-1.3.4.pack.js"></script>

Code für das HTML-Objekt:

<a id="inlinefb" href="#inline" title="Big Buck Bunny">
<img src="media/files/big_buck_bunny.jpg" width="240" height="180" />
</a>
<div style="display: none;">
<video id="inline" class="projekktor" poster="media/files/big_buck_bunny.jpg" title="Big Buck Bunny" width="480" height="360" controls>
<source src="media/files/big_buck_bunny.mp4" type="video/mp4" />
<source src="media/files/big_buck_bunny.webm" type="video/webm" />
<source src="media/files/big_buck_bunny.ogv" type="video/ogg" />
</video>
</div>

<script type="text/javascript">
$(document).ready(function() {
 var myPlayer = projekktor('video', {
 controls: true,
 debug: false,
 loop: false,
 autoplay: false,
 plugins: ['Display', 'Controlbar'],
 plugin_display: {
     logoImage: "media/img/yourlogo.png",
     onclick_playing: {
callback: 'openUrl', value: {url:'http://www.x5forum.home-wiekau.de', target: '_self', pause: true}
     }
 }
   }, function(player) {
      // get-rid-of-the-fancybox-close-button-on-fullscreen-workaround
 player.addListener('fullscreen', function(value) {
     if (value==true)
  $('#fancybox-close').hide();
     else
  $('#fancybox-close').show();
 })
   });
   $("#inlinefb").fancybox({
 'titlePosition'   : 'none',
 'transitionIn'   : 'none',
 'transitionOut'   : 'none',
 'onComplete'   : function() {
     myPlayer.setPlay();
 },
 'onCleanup'   : function() {
     myPlayer.setStop();
 }
   });
   
   $("#iframefb").fancybox({
 'width'    : '50%',
 'height'   : '80%',
 'autoScale'   : false,
 'transitionIn'   : 'none',
 'transitionOut'   : 'none',
 'type'    : 'iframe'
   });    
});
</script>

Code für den HEAD-Bereich:

<link rel="stylesheet" type="text/css" href="media/fancybox/jquery.fancybox-1.3.4.css" media="screen" />
<link rel="stylesheet" href="media/skins/hall/style.css" type="text/css" media="screen" />
<script src="media/jquery.min.js" type="text/javascript"></script>
<script src="media/projekktor.test.min.js" type="text/javascript"></script>
<script type="text/javascript" src="media/fancybox/jquery.fancybox-1.3.4.pack.js"></script>

Code für das HTML-Objekt:

<a id="iframefb" href="media/projekktor.demo.html" title="Big Buck Bunny">
<img src="media/files/big_buck_bunny.jpg" width="240" height="180" />
</a>

<script type="text/javascript">
$(document).ready(function() {
 var myPlayer = projekktor('video', {
 controls: true,
 debug: false,
 loop: false,
 autoplay: false,
 plugins: ['Display', 'Controlbar'],
 plugin_display: {
     logoImage: "media/img/yourlogo.png",
     onclick_playing: {
callback: 'openUrl', value: {url:'http://www.x5forum.home-wiekau.de', target: '_self', pause: true}
     }
 }
   }, function(player) {
      // get-rid-of-the-fancybox-close-button-on-fullscreen-workaround
 player.addListener('fullscreen', function(value) {
     if (value==true)
  $('#fancybox-close').hide();
     else
  $('#fancybox-close').show();
 })
   });
   $("#inlinefb").fancybox({
 'titlePosition'   : 'none',
 'transitionIn'   : 'none',
 'transitionOut'   : 'none',
 'onComplete'   : function() {
     myPlayer.setPlay();
 },
 'onCleanup'   : function() {
     myPlayer.setStop();
 }
   });
   
   $("#iframefb").fancybox({
 'width'    : '50%',
 'height'   : '80%',
 'autoScale'   : false,
 'transitionIn'   : 'none',
 'transitionOut'   : 'none',
 'type'    : 'iframe'
   });    
});
</script>

Code für der HTML-Datei (projekktor.demo.html):

<!DOCTYPE HTML>
<html>
<head>
<title>Demo Projekktor iFrame</title>
<meta http-equiv="CACHE-CONTROL" content="NO-CACHE">

<style type="text/css">
body { background-color: #000; margin: 0px; padding: 0px;}
</style>
   
<link rel="stylesheet" title="maccaco" href="skins/maccaco/style.css" rel="stylesheet" type="text/css" media="screen" />
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="projekktor.min.js"></script>
<script type="text/javascript" src="projekktor.share.js"></script>
   
<script type="text/javascript">
$(document).ready(function() {
projekktor('.projekktor', {
     iframe: true,
     controls: true,
     volume: 0.5,      
     addplugins: ['Share'],
     plugin_share: {
embed: {
      callback:    'embedClick',   
      code:   '<iframe id="%{embedid}" src="%{playerurl}#%{ID}" width="480%" height="360" frameborder="0"></iframe>',
      enable:   true,
      buttonText:   'embed-Code',
      headlineText:  'Kopiere diesen Code:',
      closeText:   'Fenster schliessen',
      descText:   'Das ist der embed-Code f&uuml;r das aktuelle Video. Er unterst&uuml;tzt iPad, iPhone, Flash- und nat&uuml;rliche Player.'
  },
 
links: {
  'twitter': {
  buttonText:  'Twitter',
  text:   'Ich habe einen coolen HTML5 Video-Player gefunden. Schau hier.',
  code:    'http://twitter.com/share?url=%{pageurl}&text=%{text}&via=projekktor'      
  },
      
  'facebook':{
  buttonText:  'Facebook',
  text:   'Ich habe einen coolen HTML5 Video-Player gefunden. Schau hier.',      
  code:    'http://www.facebook.com/sharer.php?u=%{pageurl}&t=%{text}'      
      }
  }   
     },
  playlist:  [{
  0: {src:"files/big_buck_bunny.webm", type:"video/webm"},
  1: {src:"files/big_buck_bunny.ogv", type:"video/ogg"},
  2: {src:"files/big_buck_bunny.mp4", type:"video/mp4"},
  config: {
      poster: "files/big_buck_bunny.jpg",
      title: 'Share me!',
      plugin_display: {
  logoImage: 'img/yourlogo.png',
  logoDelay: 1
  }
}
  }]
 });
});
</script>  

</head>
<body>
<div class="projekktor"></div>
</body>
</html>