• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Video Player - Background dunkel

J

Johannes11

Neues Mitglied
Hi, ich habe eine Frage und ich hoffe es kann mir da jemand weiterhelfen. Ich habe auf einer Seite einen Video-Player eingebettet der auch gut funktioniert. Jetzt möchte ich, wenn man das Video startet, dass der Hintergrund abdunkelt und erst bei Klick neben den Player der Background wieder hell wird. Eigentlich so, wie man es auf vielen Seiten auch sieht. Ich war bei meiner bisherigen Suche nicht sehr erfolgreich. Weiss jemand wie ich das hinkriege?

Vielen Dank im voraus und schöne Grüße

Johannes
 
Hast Du ein Beispiel für so eine Seite wo man sieht was Du meinst? Ich ahne schon was Du meinst, will nur sichergehen das wir vom selben sprechen/schreiben.
 
Ich habe gerade keine konkrete Seite vor Augen ausser vielleicht bei spiegel.de, wenn man sich dort Videos anguckt. Wobei der Player sich nicht extern öffnet, sondern eingebettet ist. Aber vom Prinzip soll es auch so sein, dass beim Starten des Players, der Hintergrund dunkel wird (einfadet).

Schöne Grüße

Johannes

P.S. Ich habe es mit dem Background-Fading vom Thread vor einigen Tagen jetzt auch hinbekommen. Vielen Dank nochmal für die Hilfe dabei
 
du fadest dein Element, wie du es schon geschafft hast ein und gibst ihm am besten noch den z-index 0, dem Player dann einen höheren und setzt seine Position auf relative:

<div style="background:black; opacity:0.5; z-index:0;"></div>

und

<div class="player" style="position:relative; z-index:2;"></div>
 
Hallo. Da hab ich mich wohl etwas undeutlich usgedrückt. Das Background-Fading hat sich auf eine andere Frage bezogen, die ich hier vor einigen Tagen gestellt habe, hat also nichts mit der Playerfrage zu tun. Ich benutze den Html5 Video Player. Falls es nötig ist, kann ich auch gerne die Codes posten.

Viele Grüße
 
Ein Videoplayer kann aber nicht die Seite um sich herum gestalten. Auch bei SpiegelOnline ist der Player in der Mitte der Seite, ringsrum ist mit etwas HTML und CSS eine Fläche geschaffen die den Hintergrund abdunkelt.

Das Beispiel oben ist nicht ganz vollständig. So wäre es komplett:

HTML: 
<div id="player_bg" class="player_bg"></div>
<div id="player" class="player">Hier der Videoplayer rein.</div>

CSS
Code: 
.player_bg { 
 background: #000;
 opacity:0.5;
 z-index:10;
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
}

.player {
 position:relative;
 position: absolute;
 z-index:20;
 top: 0;
 left: 0;
 width: 200px;
 height: 200px;
}

JavaScript kommt nur dann zum Einsatz, wenn man das auf einer Seite einblenden möchte. Wenn die beiden Klassen aus dem Beispiel noch "display: none;" hätten, müsste man diesen Wert ja ändern um sie anzuzeigen.

Code: 
document.getElementById("player_bg").style.display = "block";
document.getElementById("player").style.display = "block";

Ausblenden dann analog.

Nochmal:
An deinem Player musst Du nichts machen oder konfigurieren. Du musst lediglich dafür sorgen, dass die Umgebung des Players dem entspricht was Du haben willst.
 
Alles klar danke. Aber wie würde Code lauten wenn sich der Hintergrund erst beim Starten des Players einfärben soll und nicht schon davor und erst beim Klick neben den Player es wieder weiss wird? Müsste ich der Player-id dann einen onclick-Befehl geben z.B.
HTML: 
<div id="player" onclick="set_bgcolor(document.bg);">
und dass die Farbe einfaded per Javascript machen? Tut mir leid, dass ich immer noch und so genau frage, aber ich wüsste sonst nicht wie ich es machen sollte. Vielleicht kannst Du mir da auch den Javascript Code nennen ..

Vielen vielen Dank

Johannes
 
Welchen Moment meinst Du genau?

Wenn es um den Moment geht, wo der Player über der Seite eingeblendet wird, dann habe ich dir den Code oben schon genannt.

Wenn es um den Moment geht, in dem im Player auf "Start" geklickt wird oder das darin eingebettete Video automatisch startet, dann müsste das über das Plugin mit dem der Player gestartet wird gesteuert werden. Wenn es ein Flash-Player ist, wäre die Lösung folglich in Flash zu suchen.
 
Hallo. Es geht um den Moment, in dem beim Player auf -Start- geklickt wird. Ich benutze den Html5-Player, also kein Flash. Bei dem Player waren auch einige Javascripts dabei, muss ich das dann darüber eingeben?

Schöne Grüße

Johannes
 
Welchen "Html5-Player"? Sagt mir unter dem Namens nichts. Daher kann ich nicht beurteilen wie und wo da etwas funktionieren könnte.

Tipp: Zeig einfach mal einen Link zur Seite, dann könnte man schneller Fragen beantworten.
 
Hi

Meine Seite ist noch nicht online, daher kann ich dazu leider keinen Link schicken. Hier ist aber der Link zu der Seite wo es den Player gibt (als Demo-Download).

HTML5 Video Player | Video.js

Ich finde ihn eigentlich ziemlich gut, weiss aber nicht in welches der dazugehörende Skripte ich was verändern/reinschreiben muss, damit beim Start die Backgroundfarbe dunkel faded (und beim neuen Klick daneben wieder hell wird).

Es wäre super von Dir, wenn Du mir da auch noch einmal helfen könntest.

Vielen Dank und Gruß

Johannes
 
Hallo Johannes,
sehr interessant, dieser Player. Ich finde, die Javascript-API ist auf der Seite schön und verständlich beschrieben (unter Docs). Du brauchst für dein Vorhaben wahrscheinlich das play-Event, ganz unten.
Code: 
myPlayer.addEvent("play", function () {
  document.getElementById('player_bg').style.opacity = 0.5;
  });
So ungefähr müsste es gehen. Schöner wahrscheinlich noch mit jQuery, dann könntest Du das Abdunkeln faden.
Code: 
myPlayer.addEvent("play", function () {
  $(.player_bg).animate({opacity: 0.5}, slow);
  });
 
Zuletzt bearbeitet von einem Moderator:
Hi. Danke für Deine Antwort. Wenn ich den oberen Code in die Javascript-Datei einfüge tut sich nichts, bei dem unteren Code zeigt er mir einen Syntaxfehler an .. Muss ich vielleicht den ganzen (Seiten-)Background ansprechen und nicht nur den player_bg?

Schöne Grüße
 
Um bei dem ersten Code eine Änderung erkennen zu können, musst Du in dem CSS-Code, den dir Threadi gegeben hat, die opacity auf 1.0 setzen, andernfalls ist der Hintergrund ja schon vorher halbdunkel.
Bei dem zweiten Code musst Du jQuery einbinden:
jQuery (und andere Frameworks) direkt via Google Code einbinden - Dr. Web Magazin
Es wäre hilfreich, wenn man sich deinen Code live ansehen könnte. Kannst Du die Seite nicht irgendwo hochladen?
Muss ich vielleicht den ganzen (Seiten-)Background ansprechen und nicht nur den player_bg?
Zum Vergrößern anklicken....
IMO ist player_bg ein div, der sich über die gesamte Seite erstreckt, denn Threadi hat width und height auf 100% gesetzt. Bei opacity=0.5 dunkelt er deshalb die ganze Seite ab.
 
Hi. Leider habe ich gerade noch nicht die Möglichkeit die Seite online zu stellen. Ich habe gerade alles ausprobiert aber es will nicht so recht klappen, vielleicht kommen sich aber auch die Codes mit den bestehenden in die Quere. Ich habe es gerade nochmal anders mit onclick versucht. Ich habe auf der Seite beim Hauptmenü, dass wenn mouseover ist, der Hintergrund mit verschiedenen Farben faded
HTML: 
<div id="mainmenu" onmouseover="set_bgcolor(document.body); color_timeout=window.setInterval('set_bgcolor(document.body)',1000)" onmouseout="window.clearInterval(color_timeout)" > ... </div>
Javascript
Code: 
var colors = new Array();
    colors[0]  = '#00ffff';
 ...
    colors[27] = '#e8f6fd';

var color_timeout;

function set_bgcolor(item,color)
{
  if(item!=undefined)
  {
    if(color!=undefined)
    {
      if(color.indexOf('#')<=-1)
        color = '#'+color;
        
      item.style.backgroundColor=color;
    }
    else
    {
      color = item.style.backgroundColor;
      newcolor = color;
      while(newcolor == color)
        newcolor = colors[Math.round(Math.random()*colors.length)];

      item.style.backgroundColor = newcolor;
    }
  }
}
  
var colorT = ~~(Math.random()*18);

function changeColor() {
  document.body.className = 'color' + colorT % 18;
  colorT++;
  setTimeout( changeColor, 5000 )
}

windows.onload = function() { changeColor(); }
Ich habe dem Player jetzt in eine Div-Id gepackt
HTML: 
<div id="player_back" onclick="set_bgcolor(document.body)" > ... </div>
. Es funktioniert jetzt, dass wenn ich den Player startet, der Hintergrund mit dem Farbfading anfängt (was ich ja nicht will, da es ja schwarz (75k mit transparenz) sein soll, aber vom Prinzip her funktioniert es so. Kann mir jemand sagen, was ich da beim Javascript verändern muss, damit es nicht mit den ganzen Farben anfängt zu faden sondern eine andere Farbe kommt (mit den Javascript-Vokabeln kenne ich mich einfach noch nicht so gut aus).

Vielen Dank für Eure Hilfe

Viele Grüße

Johannes
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben