• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

Video playback + timer

WitchEdea

New member
Grüße,
leider habe ich mich noch nicht so richtig mit JS beschäftigt, habe mich irgendwie immer davor gedrückt bzw. kam ich mit JQuery gut zurecht.
Hatte ausreichend fertige Funktionen für mich. Kenne mich gut mit HTML / CSS + PHP / MySQL aus, aber eben nicht so wirklich mit JS.

Daher meine Frage:
- Gibt es ein fertiges Script welches ein Video nach X Sekunden abspielt (mit Sound, aber ohne Rahmen, Play/Pause oder Lautstärkeregler! Rein das Video ohne sonstiges)?!


In PHP würde ich es mir wie folgt vorstellen (natürlich nicht exakt da nicht möglich!):

PHP:
# Video files
$files[] = "video1.mov";
$files[] = "video2.mov";
$files[] = "video3.mov";

# playback timer
$times[] = 300;
$times[] = 600;
$times[] = 900;
// ---------------------------


# check count
$countfiles   = count($files);
$counttimes = count($times);
if($countfiles != $counttimes)
  die("Fehler! Anzahl der Files stimmt nicht mit der Anzahl der Zeitstempel überein!");

# time
$time = 0; // timer starts to count in seconds, 0 1 2 3 and so on!

for($i=0; $i<=$countfiles; $i++)
{
  if($time = $times[$i])
    play($files[$i]);  // this is the function which play the video file
  if($i == $countfiles)
   $i = 0;
}


Mir ist klar das das nun komplett falsch ist. Mir geht es nur um folgendes:
1. Eine File-Liste zu haben
2. Eine Zeitliste zu haben (bei Zeitpunkt X wird das 1. Video abgespielt, bei Zeitpunkt Y das 2. usw.)
3. Wenn alle Videos durch sind, wird der timer wieder auf 0 gesetzt!

Somit würde bei Minute 5 das erste Video abgespielt werden, bei Minute 10 das 2. und bei Minute 15 das 3. Video.
Dann würde der Timer wieder auf 0 springen, und nach 5 Minuten würde wieder das 1. Video abgespielt werden usw.! :)

Es handelt sich in meinem Verwendungszweck nur um ca. 5-10 sek lange Files.
Die nur ein kurzes "piep" oder "kling" als Sound haben :)
Diese sind Transparent und die Seite selbst hat kein Hintergrundbild.
Diese HTML Seite kann dann einfach in ein externes Programm geladen werden, welches diese kleinen Videos dann ohne Hintergrund als eine Art "overlay" anzeigt.
Das heißt daher ist es realtiv egal ob HTML5 / CSS3 oder was auch immer verwendet wird, weil es nicht wirklich in einem Browser verwendet wird :)


Hoffe mir kann jemand weiterhelfen, denn eigentlich ist das glaube ich kein wirklich großes Script :)


Grüße
Edea


EDIT:
Habe vergessen zu sagen das die Seite einfach leer (weiß) sein soll.
Wenn Zeitpunkt X (Sekunden) erreicht wurde, dann soll das Video erscheinen (abgespielt werden) und danach auch wieder verschwinden!
Dafür braucht es kein fade in / out Effekt! Einfach nur puff da sein, und wieder ne leere Seite (optisch) hinterlassen.
Denn im Grunde wird vom Programm nur 300x200 Pixel der Webseite "abgefilmt" und ohne Hintergrund (also das weiße wird entfernt) angezeigt.
Somit wäre 299 Sekunden im Programm rein gar nichts zu sehen, und bei Sekunde 300 wird dann das "Video" (~5-8 Sek kurz) mit transparentem Hintergrund abgespielt.
Im Grunde ist es nur ein kleines Overlay über der Webcam oder sonstigen Live Inhalten :)
 
Zuletzt bearbeitet:
- Gibt es ein fertiges Script welches ein Video nach X Sekunden abspielt (mit Sound, aber ohne Rahmen, Play/Pause oder Lautstärkeregler! Rein das Video ohne sonstiges)?!
HTML5 video - Wikipedia, the free encyclopedia
HTML5 Video Player | Video.js

1. Eine File-Liste zu haben
js array
2. Eine Zeitliste zu haben (bei Zeitpunkt X wird das 1. Video abgespielt, bei Zeitpunkt Y das 2. usw.)
setTimeout
3. Wenn alle Videos durch sind, wird der timer wieder auf 0 gesetzt!
eine endlosschleife

Es handelt sich in meinem Verwendungszweck nur um ca. 5-10 sek lange Files.
Die nur ein kurzes "piep" oder "kling" als Sound haben :)
also eher audio files? warum dann video

Diese sind Transparent und die Seite selbst hat kein Hintergrundbild.
Diese HTML Seite kann dann einfach in ein externes Programm geladen werden, welches diese kleinen Videos dann ohne Hintergrund als eine Art "overlay" anzeigt.
Das heißt daher ist es realtiv egal ob HTML5 / CSS3 oder was auch immer verwendet wird, weil es nicht wirklich in einem Browser verwendet wird :)
das verstehe ich nicht
gibt es transparente videos?
 
Na klar gibt es transparente videos. Z.b. Quicktime (PNG) mit RGB+Alpha.
Heißt du hast z.B. ein Logo das mit einem bestimmten effekt fade in, und fade out.
Mit sound und allem drum und dran. Kannst sogar flammen haben die kein Hintergrund (schwarz) haben usw. also ja, es gibt "transparente" videos :)

Habe das hier gesehen, und so etwas versuche ich nachzubasteln (automatisiert):
https://www.youtube.com/watch?v=rzH56qG0o9k

Es geht um das logo oben links, dass überm Video auftaucht.
Wie gesagt können die Programme Webseiten includieren, und somit kannst du "ganz einfach" alle Funktionen einer Webseite nutzen.
Heißt wenn ich ein Video abspiele im Browser, so erscheint es über dem Video "live" :)
Programm selbst setzt den background:none; (css) und schon hat man keinen weißen Hintergrund mehr, und nur noch rein das "transparente" Video alle X Sekunden.

Durch Javascript kann man dann so eine Einblendung alle X Sekunden über dem Video anzeigen lassen (Live Streams).
Ansonsten müsste man die Videoquelle immer wieder manuell aktivieren, und wenn das Video durchgelaufen ist, wieder deaktivieren...
Und das ist während dem Spielen usw. recht schwierig :)
Da man einfach Webseiten einbinden kann, dachte ich mir, wieso nicht über JavaScript lösen.

Leere Seite, Video nach X Sekunden abspielen, und wieder leere Seite.


Wie du in dem YouTube Video siehst was ich gefunden habe, ist es nur ein kurzes "Follow me".
Man könnte das aber erweitern mit z.B. integrierter Werbung von einem deiner Sponsoren.
Einmal in der Stunde kommt dann in ka 640x480 (oder kleiner) in ner Ecke n kleines Werbevideo. An einer Stelle die nicht stört.
Für mich jetzt nicht wichtig, aber manch einer würde das evtl. wollen KA :)

Für mich soll es gerade einfach ne kleine Einblendung sein.
Mal twitter, mal youtube oder sonstiges :)
Natürlich nicht alle 5min das würde ja nerven ^^
 
Zuletzt bearbeitet:
gibt es transparente videos?
Ja, aber nicht in HTML5. Man kann es aber anscheinend so aussehen lassen: HTML5 Video with alpha transparency
mp4 - Can I have a video with transparent background using HTML5 video tag? - Stack Overflow
No. This is a limitation of the video codecs supported by the browsers: mp4, ogv, and webm do not currently support alpha channels.
There are workarounds, but they involve re-rendering the video using Canvas and it is kind of a hack.
Zitat: mp4 - Can I have a video with transparent background using HTML5 video tag? - Stack Overflow
 
Ich habe es jetzt mit setInterval(playback, 1000); gelöst.
Dabei ist playback( ) meine Funktion.

Werde jetzt mal HTML5 Videos einbinden, und schauen das ich diese auch transparent hinbekomme :)


EDIT:
Habe jetzt alles versucht und komme nicht mehr weiter...
Ich habe versucht eine transparente .swf Datei zu erstellen, und diese mitels wmode transparend (embed...) einzubinden, vergeblich.
Denn man setzt dort nur eine Hintergrundfarbe, z.B. weiß. somit hat das Video selbst einen weißen Hintergrund und der Browser auch.
Entferne ich den weißen Hintergrund beim Browser so bleibt der Hintergrund beim Video aber bestehen. Oder ich habe da einfach etwas absolut falsch gemacht!

Nun versuche ich einfach wirklich die .mov einzubinden (in HTML).
https://dl.dropboxusercontent.com/u/23661277/Twitter.mov

Falls es jemand schafft diese Twitter.mov in HTML transparent hineinzubekommen, dann Hut ab...

Hier ein paar Quellen:
http://stackoverflow.com/questions/...-transparent-background-using-html5-video-tag
http://stackoverflow.com/questions/7099644/display-a-transparent-mov-file-on-a-webpage

Leider habe ich es irgendwie auch so nicht hinbekommen, denke ich habe irgendwas übersehen bzw. falsch gemacht.


Falls das jemand hinbekommt, wäre wirklich Prima!
Das Script funktioniert so weit, wenns fertig ist kann ich es auch gerne posten :)


EDIT 2:
Habe eine andere Quelle gefunden:
http://updates.html5rocks.com/2013/07/Alpha-transparency-in-Chrome-video

Werde ich mir morgen mal durchlesen. Jetzt einfach zu müde dafür...
Schon 6.41 Uhr.
 
Zuletzt bearbeitet:
Leider habe ich es irgendwie auch so nicht hinbekommen, denke ich habe irgendwas übersehen bzw. falsch gemacht.
<=>
Das Script funktioniert so weit, wenns fertig ist kann ich es auch gerne posten :)
?

PS: zeig doch bitte mal, wie du das mit dem transparenten Video probiert hast!
 
Flash:
https://dl.dropboxusercontent.com/u/23661277/js_tests/swf/flash.html

.Mov (Quicktime, RGB-Alpha, PNG):
https://dl.dropboxusercontent.com/u/23661277/js_tests/mov/mov.html

Ich schätze das ich es mit der .mov versuchen sollte, und zwar mit canvas:
Chapter 6: HTML5 Media and Canvas - Examples

Weil das hier:
Alpha transparency in Chrome video - HTML5Rocks Updates

Mit dem Streamprogramm nicht Funktioniert.
Das nutzt wohl eine andere Art Browser. Kann nur nicht genau sagen welcher im Programm implementiert ist.
Daher heißt es testen. Wenn das canvas aber funktioniert, so wird das auch im Programm gehen.

Evtl. kontaktiere ich auch mal den Ersteller des Browser-Plugins und frage ihn ob es die Möglichkeit gibt einen ChromaKey ins Plugin einzubauen!
Denn dann könnte man einfach einen grünen Hintergrund setzen und dem im Programm entfernen lassen.


Das TimerScript funktioniert super.
Erzeugt mir nach X Sekunden einen Videoplayer, lässt den für X Sekunden bestehen (so lange das Video braucht), und entfernt ihn dann wieder.
So geht er dann durch das ganze Array durch, bis er beim letzten angekommen ist. Ist das letzte Video abgespielt worden, so wird der timer wieder auf 0 gesetzt.
Und die ganze Geschichte beginnt von vorne. Wäre das nicht das Problem mit den transparenten Videos...

Ich muss mir nur ne Liste mit Videos anlegen, so in der Art:
HTML:
      var videos = [
        {fileName:"twitch.swf",time:2,duration:6},
        {fileName:"twitter.swf",time:15,duration:6}
      ];

Der Rest läuft dann von alleine.
Werde das denke ich dann noch in eine externe Datei setzen, so das es dann ins Array Importiert wird.
Und die .txt z.B. dann auch von einem Leien mit eigener Schreibweise gepflegt werden kann, ohne das er in den Code schreiben muss.
Evtl. finde ich auch eine Funktion die die länge des Videos überprüft, dann muss ich keine "duration" angeben.
Mal schaun.
 
Zuletzt bearbeitet von einem Moderator:
Evtl. finde ich auch eine Funktion die die länge des Videos überprüft, dann muss ich keine "duration" angeben.
So etwas kenne ich zwar nicht, aber die API von HTML5-Video stellt ein Event onended bereit, wo Du deine Aktion(en) einhängen kannst.
 
Egal, so wie das script jetzt ist, könnte ich auch Bilder für eine gewisse "duration" Anhängen.
Also nicht so schlimm. Ich muss nur eine Lösung für die Transparenz finden :-(
Evtl. muss ich es umgehen, indem ich einen grünen Hintergrund im Video setze, und diesen dann mittels ChromaKey im Programm selbst, dass die Webseite abgreift entferne.
Nur leider bietet es keine ChromaKey Funktion an, also muss ich das auch noch basteln. Bzw. beim plugin Hersteller nachfragen..
 
WitchEdea schrieb:
Egal, so wie das script jetzt ist, könnte ich auch Bilder für eine gewisse "duration" Anhängen.
Ist praktisch das was dbarthel gemeint hat.

Bei Canvas gibt es sowas wie eine Alpha Transparenz.
Tryit Editor v2.1

Wenn du das im TryIt Editor eingibst ist das schwarz weg und der Rest in voller Stärke da.
Code:
<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>

<script>

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.globalAlpha=0.001;
ctx.fillStyle="black";
ctx.fillRect(20,20,75,50);

//Turn transparency on
ctx.globalAlpha=1;
ctx.fillStyle="blue"; 
ctx.fillRect(50,50,75,50); 
ctx.fillStyle="green"; 
ctx.fillRect(80,80,75,50);
</script>

</body>
</html>

Wenn du das Canvas renderst und in der linke oberen Ecke des Video Payers positionierst und zusätzlich via css visibility hidden versteckst, dann brauchst du es nur in richtigen Momente für eine gewisse Laufzeit einblenden .
Für ein pling und plong ist dann die web audio api verantwortlich.

Ps: Ich kenne mich in der Materie Alpha Transparenz überhebt nicht aus, hoffe doch das, dass ein wenig Hilft.
MfG xorg1990
 
Verstehe das mit der Transparenz alles nicht. Ich habe mal versucht einem video-Tag eine opacity zu geben und das funktioniert einwandfrei. Allerdings wirkt das auf das gesamte Video einschl. Controls. Oder ist es etwas anderes, was der TO möchte?
Edit: Die Controls bleiben deckend, wenn ich den Mediaelement-Player verwende.
 
Zuletzt bearbeitet:
Der TS möchte wie bei einem PNG-Bild Teile des Videos transparent darstellen, da dies anscheinend in einigen Formaten funktioniert; jedoch nicht im Browser: #4
 
Zurück
Oben