Sie sind nicht angemeldet.

    • [Hilfe: (x)HTML/CSS] Umsetzung für HP

    1

    Samstag, 27. August 2011, 16:24

    Umsetzung für HP

    Hallo,

    ich weiß jetzt nicht ob das hier rein passt ... wenn nicht kann der mod das ruhig verschieben !!!

    Also, ich bin dabei, meine neue Seite zu zaubern ... nur das Problem von mir ist, dass ich net weiß, wie ich das Video da rein bekomme ... lässt sich gerade schwer erklären, alsoBild anschauen, vll sieht man dann besser was gemeint ist ... !!!

    Bin froh das ich so gerade Html ein wenig versteh ... mich jetzt aber noch mit flash und Co rum zu schlagen, verdirbt mir den Abend ... dennoch, da ich alles immer selber machen möchte ... wie löse ich diese Aufgabe ... muss ja dann auch noch Größe und Auflösung alles passen ... das Video ist das kleinste Problem, wie aber kann ich da rein zaubern ???

    Astinos

    2

    Sonntag, 28. August 2011, 17:23

    Hallo,
    versuch es doch mal mit dem embed-Tag. Das ruft dann das jeweilige Plugin des Browsers zum Abspielen ab. Ich habe es selbst noch nie ausprobiert kann mir aber vorstellen, dass es nicht immer funktioniert. Aber du kannst ja mal ein wenig damit rumspielen.

    HTML

    		 
    1

    <embed src="videodatei.mpg" width="192" height="189"></embed>

    3

    Sonntag, 28. August 2011, 23:46

    Danke erst mal für deine Antwort,

    werde es bei Gelegenheit mal ausprobieren !!! Sag dir dann Bescheid ob es funktioniert hat !!!
    • wit

      You got served!

    • Beiträge: 251

      Aktivitätspunkte: 1 470

      Registrierungsdatum: 21. Juni 2011

      Wohnort: London

      Beruf: IT Consultant

      Danksagungen: 108 / 2

      • Nachricht senden

    4

    Montag, 29. August 2011, 04:37

    oder du arbeitest mit HTML5 und benutzt <video> musst enur schauen wegen den ganzen video formaten, damit dass dann auch bei allen browsern unterstuezt wird.
    Alles Gute,
    WIT :angel:


    PHP Nachschlagewerk: http://www.php.net
    Warum W3Schools *doof* ist : http://w3fools.com/
    Alles andere: http://www.google.com
    Wie man Fragen stellt: http://www.catb.org/~esr/faqs/smart-questions.html
    SMART GOALS: http://www.topachievement.com/smart.html

    5

    Montag, 29. August 2011, 15:29

    HTML5 Videos (MP4 + OGG ) zb mit Videojs mit Flashfallback und du hast alles abgedeckt!

    6

    Montag, 29. August 2011, 23:16

    @wit ... dann bleibt mir aber nur die Rechteckige Form über ... also nix rundes oder dreieckiges ... usw ... ?!?!?
    • wit

      You got served!

    • Beiträge: 251

      Aktivitätspunkte: 1 470

      Registrierungsdatum: 21. Juni 2011

      Wohnort: London

      Beruf: IT Consultant

      Danksagungen: 108 / 2

      • Nachricht senden

    7

    Dienstag, 30. August 2011, 08:01

    MIt der Benutztung von CSS3 und SVG kannst du sehr nette Sachen zaubern.
    Alles Gute,
    WIT :angel:


    PHP Nachschlagewerk: http://www.php.net
    Warum W3Schools *doof* ist : http://w3fools.com/
    Alles andere: http://www.google.com
    Wie man Fragen stellt: http://www.catb.org/~esr/faqs/smart-questions.html
    SMART GOALS: http://www.topachievement.com/smart.html

    8

    Dienstag, 30. August 2011, 13:22

    ... was jedoch nicht einwandfrei überall geht. Ein Javascript ähnlich wie Paperjs etc also für SVG etc hilft vllt auch

    9

    Dienstag, 30. August 2011, 14:14

    Also,

    wenn ich das richtig verstanden habe ... so wäre SVG eine Möglichkeit ... da man da sämtliche Formen machen kann lautwiki ... ???

    Nur das ich das nicht so recht verstehe, was da alles steht ... ???

    10

    Dienstag, 30. August 2011, 14:40

    SVG wird nicht von jedem Browser unterstützt und solche Experimente funktionieren oft nicht in jedem aktuellen Browser siehe auch bitte http://findmebyip.com/litmus/

    Mach dich doch erstmal an die HTML5 Umsetzung der Videos, also Konvertieren nach MP4 und OGG zb mit Super

    Du brauchst hier jedoch kein SVG, du musst einfach per z-index Attribut ein Div in Trapez-Form über das Video setzen, mehr nicht. Klappt bei uns hier bei allen Projekten sehr gut mit VideoJS und Divs, Grafiken ...

    Es wird jedoch ein Teil des Videos zwangsweise abgeschnitten, was nicht so schlimm sein sollte.

    11

    Dienstag, 30. August 2011, 15:34

    Ja das dass Probleme macht hab ich schon verstanden ... wenn es dir möglich wäre, kannst du mal einen kleinen test-code posten ... nur damit ich mir auch bilde bin ... wie du das meinst ... ???

    12

    Dienstag, 30. August 2011, 16:30

    Etwa noch nie mit dem Z-Index Attribut in CSS gearbeitet, womit man Elemente übereinander legen kann und dann mit Position entsprechend positionieren kann? Kann das heute Abend mal machen falls gewünscht.

    13

    Dienstag, 30. August 2011, 22:40

    He,

    leider noch nicht ... und ja ... wäre gewünscht !!!

    14

    Mittwoch, 31. August 2011, 20:59

    Hab als Beispiel den Code von Videojs.org genommen

    HTML

    		 
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

      <!-- Begin VideoJS -->
  <div class="video-js-box">
    <!-- Using the Video for Everybody Embed Code http://camendesign.com/code/video_for_everybody -->
    <video class="video-js" width="640" height="264" controls preload poster="http://video-js.zencoder.com/oceans-clip.png">
      <source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
      <source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm; codecs="vp8, vorbis"' />
      <source src="http://video-js.zencoder.com/oceans-clip.ogv" type='video/ogg; codecs="theora, vorbis"' />
      <!-- Flash Fallback. Use any flash video player here. Make sure to keep the vjs-flash-fallback class. -->
      <object id="flash_fallback_1" class="vjs-flash-fallback" width="640" height="264" type="application/x-shockwave-flash" 
        data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf">
        <param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" />
        <param name="allowfullscreen" value="true" />
        <param name="flashvars" 
          value='config={"playlist":["http://video-js.zencoder.com/oceans-clip.png", {"url": "http://video-js.zencoder.com/oceans-clip.mp4","autoPlay":false,"autoBuffering":true}]}' />
        <!-- Image Fallback. Typically the same as the poster image. -->
        <img src="http://video-js.zencoder.com/oceans-clip.png" width="640" height="264" alt="Poster Image" 
          title="No video playback capabilities." />
      </object>
    </video>
    <!-- Download links provided for devices that can't play video in the browser. -->
    <p class="vjs-no-video"><strong>Download Video:</strong>
      <a href="http://video-js.zencoder.com/oceans-clip.mp4">MP4</a>,
      <a href="http://video-js.zencoder.com/oceans-clip.webm">WebM</a>,
      <a href="http://video-js.zencoder.com/oceans-clip.ogv">Ogg</a><br>
      <!-- Support VideoJS by keeping this link. -->
      <a href="http://videojs.com">HTML5 Video Player</a> by VideoJS
    </p>
  </div>
  <!-- End VideoJS -->


<div class="layer-top">HIER INHALT DA DRÜBER REIN</div>


    Cascading Style Sheet

    		 
    1
2
3
4
5

    .video-js-box {z-index:1;}
.layer-top {z-index:2;
position: relative; (oder auch absolute benutzen)
top: Xpx; (gewünschte Wert angeben also zb 20px;)
left: Xpx; (hier ebenso)}


    Sollte eigentlich klar sein. Z-Index bietet dir die Möglichkeit Divs übereinander wie Ebenen in Photoshop / Folien zu legen.

    Ähnliche Themen

    • Grufix-Board.de - GFX Webdesign Foto & Coding Community

    Grafik-Tutorials | Coding-Tutorials | Ressourcen | SEO | Webdesign | HTML5
    W3C Validator

    Forensoftware: Burning Board® 3.1.6, entwickelt von WoltLab® GmbH