HTML 5 - Video Datei einbinden

  • Video Datei mit Kontrollleiste und Fallback per Iframe


    HTML
    1. <video controls>
    2. <source src="files/test.mp4" />
    3. <source src="files/test.webm" />
    4. <iframe width="420" height="315" src="http://www.youtube.com/embed/test" frameborder="0" allowfullscreen></iframe></video>


    Video Datei mit Kontrollleiste und Standbild und Größenangabe


    HTML
    1. <video controls width="160" height="120" poster="files/standbild.jpg">
    2. <source src="files/test.mp4" type="video/mp4" />
    3. <source src="files/test.webm" type="video/webm" />
    4. </video>



    Wer noch etwas gestalten möchte kann dies im CSS Bereich machen




    und vielleicht noch etwas beim Mouseover


    CSS
    1. video:hover, video:focus
    2. {
    3. /* add glow */
    4. -webkit-box-shadow: 0 0 20px #f88;
    5. box-shadow: 0 0 20px #f88;
    6. }


    Wer jetzt noch das Video drehen möchte (komplett mit farblicher Gestaltung)