HTML & CSS für Einsteiger

HTML & CSS für Einsteiger (Teil 22): Multimedia für die Webseite (1)

Alle Videos des Tutorials HTML & CSS für Einsteiger

Damit wir alle kurz in Erinnerungen schwelgen können, hier ein Beispiel dafür, wie man Videos klassischerweise in eine Webseite einbindet:

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" 
width="425" height="344" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0">
<param name="allowFullScreen" value="true" />
<param name="allowscriptaccess" value="always" />
<param name="src" value="http://www.youtube.com/v/oHg5SJYRHA0&hl=en&fs=1&" />
<param name="allowfullscreen" value="true" />
<embed type="application/x-shockwave-flash" width="425" height="344" src="http://www.youtube.com/v/oHg5SJYRHA0&hl=en&fs=1&" allowscriptaccess="always" allowfullscreen="true">
</embed>
</object>

Eine solche Syntax ist natürlich alles andere als schön.

HTML &amp; CSS für Einsteiger (Teil 22): Multimedia für die Webseite (1)

<video src="video.ogv" width="300" height="200">
   Ihr Browser ist leider nicht HTML5-kompatibel
</video>

<video src="video.ogv" width="300" height="200" controls>
   Ihr Browser ist leider nicht HTML5-kompatibel
</video>

Hier das Ergebnis im Browser:

HTML &amp; CSS für Einsteiger (Teil 22): Multimedia für die Webseite (1)

Über die eingeblendete Leiste lässt sich das Video nicht nur anhalten und wieder starten, auch die Lautstärkereglung ist darin enthalten.

HTML &amp; CSS für Einsteiger (Teil 22): Multimedia für die Webseite (1)

<video src="video.ogv" width="300" height="200" poster="video.gif">
   Ihr Browser ist leider nicht HTML5-kompatibel
</video>



Achtet auch hier wieder auf die richtige Pfadangabe, damit das Bild dann tatsächlich zu sehen ist.

HTML &amp; CSS für Einsteiger (Teil 22): Multimedia für die Webseite (1)

<video src="video.ogv" width="300" height="200" autoplay>
   Ihr Browser ist leider nicht HTML5-kompatibel
</video>

Videos und die Codecs

<video width="400" height="300" controls="controls">
    <source src="video.mp4" type="video/mp4" />
    <source src="video.ogg" type="video/ogg" />
 </video>

Browser Ogg Theora (.ogg) h.264 (.mp4)
Internet Explorer Ab Version 9
Mozilla Firefox Ja
Google Chrome Ja Ja
Opera Ja
Safari Ja
iPhone Ja
Android Ja

<video width="400" height="300">
    <!-- Nur für mobiele Endgeräte -->
    <source src="video_mobil.ogg" media="handheld" />
    <!—Alle anderen Geräte -->
    <source src="video_normal.ogg" media="all" />
 </video>

Videos sicher einbinden

<video width="640" height="360" src="http://www.youtube.com/v/mR5h_EXYKA0?fs" autobuffer controls poster="br.gif">
 <object classid="clsid:02bf25d5-8c17-4b23-bc80-d3488abddc6b" width="640" height="360" codebase="http://www.apple.com/qtactivex/qtplugin.cab" />
 <param value="http://www.youtube.com/v/mR5h_EXYKA0?fs" />
 <param value="true" />
 <param value="false" />
 <embed src="http://www.youtube.com/v/mR5h_EXYKA0?fs" width="640"height="360" autoplay="true" controller="false" pluginspage="http://www.apple.com/quicktime/download/">
 </embed>
 </object>
 </video>

ICONS TEST

/sprites/ui.svg:

alert
apple-pay
apple
arrow-down
arrow-right
arrows
checkbox
checked
chevron-down-small
chevron-down
chevron-left
chevron-right-doble-primary
chevron-right
chevron-up-small
chevron-up
close-cross
close-small
close
cog
complete
copy
eye-lock
eye
facebook-logo
file
form-select-arrow-up
form-select-arrow
google-icon
icon-als-gast-fortfahren_b
icon-anmelden1_b
icon-anmelden2_b
icon-globe
icon-neues-konto-erstellen_b
icon-resize-out
information-icon-button
left-align
letters
like
link-arrow
link
list-icon
lock
mail
medal
moon
notification
open-small
picture
pinterest-2
play
plus-white
quizz
rate
refresh-211
refresh-282
reset
reward
search-thin
search
star
sun
user
warenkorb

/sprites/image-editor.svg:

align-center
align-left
align-right
alignment-center
alignment-left
alignment-right
alignment-vertical-bottom
alignment-vertical-center
alignment-vertical-top
background-test
background
bold
bring-forward
bring-to-front
capslock
change-size
check-point
constrain
copy
crop-image
delete
download
edit-file-name
editable
flip-horisontally
flip-vertically
group-layer
help
hide
italic
justified
layers
line-spacing
lock
not-editable
open-group
paste
redo
rotate
save
send-backward
send-to-back
shape-layer
shapes
show
strike
text-layer
text
translate
underline
undo
unlock
zoom-in
zoom-out

/sprites/paint.svg:

brush
clear
cursors
eraser
escape
full-screen
marker
navigate
pencil
print
refresh
save
spray
zoom-in
zoom-out

/sprites/theme.svg:

001-01
001-02
001-03
001-04
001-05a
001-05b
001-05c
002-05a
3d-square-software-icon-dark
architektur-software-icon-dark
arrows-down-active
arrows-up-active
assets-templates-download-icon-dark
butterfly-answer-icon-dark
category-icon-example
certificate_alternate
certificate_downloaded
certificate_grey
certificate_primary
edit-multiple
edit
facebook
folder
grey-pause
grey-play
grey-stop
icon-als-gast-fortfahren_c
icon-anmelden1_c
icon-anmelden2_c
icon-neues-konto-erstellen_c
icons-cookie
instagram
interests-1
lamp-idea-bulb-smart-icon-dark
linkedin
pinterest
plus
red-cross
reload
toggle-list-active
toggle-list
toggle-on-off-active
toggle-on-off
toggle-single-active
toggle-single
toggle-switch-active
toggle-switch
trash
trophy-inactive
urkunden-zertifikate-software-icon-dark
video-streaming-icon-dark
xing

/sprites/banners.svg:

bild
icons8-google
proven_expert_4eck-tutkit

/sprites/elements-of-design.svg:

annika-hillger
annika-hillger
annika-hillger
annika-hillger_100
annika-hillger_100
annika-hillger_100
blockquote-border-line
icons-svg-log-in
svg-log-in
svg-registration

/sprites/logotypes.svg:

logo-big-colored
logo-big-dark
logo-big-green
logo-big
logo-dark
logo-green
logo-light-grey
logo-light-white
logo-mini-dark
logo-mini-green
logo-mini
logo-payment
logo-small-dark
logo-small-green
logo-small
logo-tutkit
logo
tutkit_pirate-bay
tutkit_voucher_top

/sprites/payment-provider.svg:

apple-pay-2
apple-pay-white
apple-pay
card-bank
card-mastercard
card-paypal
creditcard
g-pay-2
g-pay
google-pay-2
invoice
mastercard
payment-google-pay
paypal-2
paypal
sepa
visa
[]