Frame VideoPlayer - Website X5 Hilfe - Die Helpsite

Direkt zum Seiteninhalt

Hauptmenü:

Frame VideoPlayer

Scripte > Multimedia


Videoplayer als Frame.

jQuery

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.

Es werden hier nur einige Möglichkeiten gezeigt.
Weitere Anwendungsmöglichkeiten siehe Homepage:

Homepage PROJEKKTOR

jQuery fancybox


Der Player wird initialisiert und startet automatisch, wenn die fancybox sich geöffnet hat und wird gestoppt, wenn die Box geschlossen wird.


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>


iFrame Fenster


Der Player lädt in einem Fenster als iframe und bietet eine embed-Option und einige soziale Links.


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>

   

Feedbacks zu ""

es gibt insgesamt 1 Kommentar(e)


  1. Bernd schreibt am 14.08.2012, 17.08 Uhr

    Hallo, das mit dem video einbau klappt jedoch... wenn ich ein 2 Video einfüge startet autoplay nicht und das fenster lässt nicht mehr schließen. was könnte ich da falsch gemacht haben?
    Admin-Antwort: Das kann ich so nicht sagen. Ich vermute, dass die function autoplay() gleich bezeichnet wurde. Hat man 2 gleiche Funktionen auf der Seite, müssen diese unterschiedlich bezeichnet werden z.B. autoplay2(), sie beißen sich sozusagen.


Name*
Vorname
Kommentar*
Email *
Homepage
Telefon
Sicherheitscode *
 
Logo HTML5
Button Spenden

© 2009 - 2018




  Besucher Statistik
 » 10 Online
 » 172 Heute
 » 172 Woche
 » 3927 Monat
 » 29751 Jahr
 » 276329 Gesamt
Rekord: 1420 (10.04.2014)
Zurück zum Seiteninhalt | Zurück zum Hauptmenü