SlideShare a Scribd company logo
Responsive Videos,
mehr oder weniger
Frontend Usergroup RheinMain
Wiesbaden
17.06.2014
Walter Ebert
@wltrd
walterebert.de
slideshare.net/walterebert
<video src=movie.mp4>
Windows Phone
PS3
Android
iOS
Mac
http://caniuse.com/#feat=mpeg4
https://en.wikipedia.org/wiki/Vhshttps://en.wikipedia.org/wiki/Betamax
MP4-Support in Firefox
http://blog.chromium.org/2011/01/html-video-codec-support-in-chrome.html
MP4-Support in Chrome
„Though H.264 plays an important role in video, as
our goal is to enable open innovation, support for the
codec will be removed and our resources directed
towards completely open codec technologies.“
Video for Everybody
<video width="640" height="360" controls>
<source src="video.mp4" type="video/mp4" />
<source src="video.webm" type="video/webm" />
<source src="video.ogv" type="video/ogg" />
<object width="640" height="360" type="application/x-shockwave-flash"
data="player.swf">
<param name="movie" value="player.swf" />
<param name="flashvars"
value="controlbar=over&amp;image=video.jpg&amp;file=video.mp4" />
<img src="video.jpg" width="640" height="360" alt="Video Title"
title="No video playback capabilities, please download the video below" />
</object>
</video>
<p><strong>Download Video:</strong>
Closed Format: <a href="video.mp4">"MP4"</a>
Open Format: <a href="video.webm">"WebM"</a>
Open Format: <a href="video.ogv">"Ogg"</a>
</p>
http://camendesign.com/code/video_for_everybody
Formate
MP4
WebM
Ogg Theora
Formate
MP4
WebM
Ogg Theora
Codecs
H.264
VP8
Codecs
H.264
VP8
VP9
http://caniuse.com/#feat=webm
function hasMp4() {
try {
return !!document.createElement('video')
.canPlayType('video/mp4; codecs="avc1.42E01E"')
.replace(/^no$/, '');
} catch(e) {
return false;
}
}
function hasFlash() {
var hasFlash = false;
try {
var fo = new ActiveXObject('ShockwaveFlash.ShockwaveFlash');
if(fo) hasFlash = true;
}catch(e){
var fm = navigator.mimeTypes["application/x-shockwave-flash"];
if( fm && fm.enabledPlugin ) hasFlash = true;
}
return hasFlash;
}
MP4 moov atom
ffmpeg -i input.mp4 -c:v copy -c:a copy -movflags faststart output.mp4
http://ffmpeg.org/
http://www.adobe.com/devnet/video/articles/mp4_movie_atom.html
http://demos.flowplayer.org/videotest/canplay.html
Wann ist ein Video abspielbar?
Wann ist ein Video abspielbar?
1. Format (MP4, WebM, ...)
2. Codec (H.264, VP8, ...)
3. Auflösung (HD, FullHD,UHD, …)
4. Bitrate (kbps)
5. Framerate (FPS)
HTML5 Video Preload
http://www.stevesouders.com/blog/2013/04/12/html5-video-preload/
<video src="video.mp4" preload="metadata" />
<video src="video.mp4" preload="auto" />
<video src="video.mp4" preload="none" />
<video src="video.mp4" autoplay />
Responsive
Responsive Videos, mehr oder weniger
Responsive Videos, mehr oder weniger
Fluid
<!DOCTYPE html>
<meta name="viewport" content="width=device-width,initial-scale=1">
<style>
video,object {max-width:100%; height:auto;}
</style>
<video controls>
<source src="video.mp4">
<source src="video.webm">
<object type="application/x-shockwave-flash" data="player.swf">
<param name="movie" value="player.swf" />
<param name="flashvars" value="file=video.mp4"/>
</object>
</video>
Responsive
<video controls>
<source src="small.mp4" media="(max-width:480px)">
<source src="small.webm" media="(max-width:480px)">
<source src="big.mp4">
<source src="big.webm">
</video>
http://walterebert.com/playground/html5/media-queries/
Responsive
<video controls>
<source src="small.mp4" media="(max-width:480px)">
<source src="small.webm" media="(max-width:480px)">
<source src="big.mp4">
<source src="big.webm">
</video>
Entfernt aus Google Chrom
e
Hilfsmittel Javascript
window.matchMedia('(min-width:481px)')
oder
window.innerWidth > 480
oder
document.documentElement.clientWidth > 480
http://caniuse.com/#feat=matchmedia
Adaptive
Apple HTTP Live Streaming (HLS)
<video src=movie.m3u8>
https://developer.apple.com/streaming/
http://walterebert.com/playground/video/hls/
#EXTM3U
#EXT-X-STREAM-INF:PROGRAM-ID=1,BANDWIDTH=400000,RESOLUTION=480x270
ts/480x270.m3u8
#EXT-X-STREAM-INF:PROGRAM-ID=1,BANDWIDTH=600000,RESOLUTION=640x360
ts/640x360.m3u8
#EXT-X-STREAM-INF:PROGRAM-ID=1,BANDWIDTH=1500000,RESOLUTION=1280x720
ts/1280x720.m3u8
http://walterebert.com/playground/video/hls/
http://www.spacetelescope.org/images/heic1315a/
Die Zukunft
MPEG-DASH
http://dashif.org/
https://github.com/Dash-Industry-Forum/dash.js
Media Source Extensions (MSE)
Encrypted Media Extensions (EME)
Web Cryptography API
http://www.w3.org/TR/media-source/
http://www.w3.org/TR/encrypted-media/
http://www.w3.org/TR/WebCryptoAPI/
https://twitter.com/badass_js/status/473517249714610176
http://techblog.netflix.com/2014/06/html5-video-in-safari-on-os-x-yosemite.html
MPEG-DASH schreibt kein Codec vor
MPEG-DASH schreibt kein Codec vor
aber aktuell setzen die meisten auf H.264
http://hevc.hhi.fraunhofer.de/
https://strukturag.github.io/libde265.js/
High Efficiency Video Coding (HEVC)
a.k.a. H.265
<!DOCTYPE html>
<meta name="viewport" content="width=device-width,initial-scale=1">
<style>
.player {
height:0;overflow:hidden;padding-bottom:56.25%;position:relative;
}
.player iframe {
height:100%;left:0;position:absolute;top:0;width:100%;overflow:hidden;
}
</style>
<div class="player">
<iframe src="video.html" frameborder="0" allowfullscreen></iframe>
</div>
16:9
http://walterebert.com/playground/video/responsive/
Fluides iframe
<!DOCTYPE html>
<meta name="viewport" content="width=device-width,initial-scale=1">
<style>
video,object
{position:absolute;width:100%;height:100%;left:0;top:0;}
</style>
<video controls>
<source src="small.mp4" media="(max-width:480px)">
<source src="small.webm" media="(max-width:480px)">
<source src="big.mp4">
<source src="big.webm">
<object type="application/x-shockwave-flash" data="player.swf">
<param name="movie" value="player.swf" />
<param name="flashvars" value="file=big.mp4"/>
</object>
</video>
Responsive Seite
<!DOCTYPE html>
<meta name="viewport" content="width=device-width,initial-scale=1">
<style>
video,object
{position:absolute;width:100%;height:100%;left:0;top:0;}
</style>
<video controls>
<source src="small.mp4" media="(max-width:480px)">
<source src="small.webm" media="(max-width:480px)">
<source src="big.mp4">
<source src="big.webm">
<object type="application/x-shockwave-flash" data="player.swf">
<param name="movie" value="player.swf" />
<param name="flashvars" value="file=big.mp4"/>
</object>
</video>
Responsive Seite
Oder welcher Code auch immer aktuell passt
Fin
Walter Ebert
@wltrd
walterebert.de
slideshare.net/walterebert
walterebert.com/playground/video/

More Related Content

What's hot

Bilder usw...
Bilder usw...Bilder usw...
Bilder usw...
Walter Ebert
 
Mehr Performance für WordPress - WordCamp Köln
Mehr Performance für WordPress - WordCamp KölnMehr Performance für WordPress - WordCamp Köln
Mehr Performance für WordPress - WordCamp Köln
Walter Ebert
 
Bilder einbinden ist kein Thema, oder?
Bilder einbinden ist kein Thema, oder?Bilder einbinden ist kein Thema, oder?
Bilder einbinden ist kein Thema, oder?
Walter Ebert
 
[refreshaustin] Adaptive Images in Responsive Web Design
[refreshaustin] Adaptive Images in Responsive Web Design[refreshaustin] Adaptive Images in Responsive Web Design
[refreshaustin] Adaptive Images in Responsive Web Design
Christopher Schmitt
 
[parisweb] Adaptive Images in Responsive Web Design
[parisweb] Adaptive Images in Responsive Web Design[parisweb] Adaptive Images in Responsive Web Design
[parisweb] Adaptive Images in Responsive Web Design
Christopher Schmitt
 
[CSSDevConf] Adaptive Images in Responsive Web Design 2014
[CSSDevConf] Adaptive Images in Responsive Web Design 2014[CSSDevConf] Adaptive Images in Responsive Web Design 2014
[CSSDevConf] Adaptive Images in Responsive Web Design 2014
Christopher Schmitt
 
[rwdsummit] Adaptive Images in Responsive Web Design
[rwdsummit] Adaptive Images in Responsive Web Design[rwdsummit] Adaptive Images in Responsive Web Design
[rwdsummit] Adaptive Images in Responsive Web Design
Christopher Schmitt
 
How fast are we going now?
How fast are we going now?How fast are we going now?
How fast are we going now?
Steve Souders
 
Design+Performance Velocity 2015
Design+Performance Velocity 2015Design+Performance Velocity 2015
Design+Performance Velocity 2015
Steve Souders
 
[funka] Adaptive Images in Responsive Web Design
[funka] Adaptive Images in Responsive Web Design[funka] Adaptive Images in Responsive Web Design
[funka] Adaptive Images in Responsive Web Design
Christopher Schmitt
 
implement lighthouse-ci with your web development workflow
implement lighthouse-ci with your web development workflowimplement lighthouse-ci with your web development workflow
implement lighthouse-ci with your web development workflow
WordPress
 
[wcatx] Adaptive Images in Responsive Web Design
[wcatx] Adaptive Images in Responsive Web Design[wcatx] Adaptive Images in Responsive Web Design
[wcatx] Adaptive Images in Responsive Web Design
Christopher Schmitt
 
WordPress-Templates mit Twig erstellen - PHPUGFFM
WordPress-Templates mit Twig erstellen - PHPUGFFMWordPress-Templates mit Twig erstellen - PHPUGFFM
WordPress-Templates mit Twig erstellen - PHPUGFFM
Walter Ebert
 
Prebrowsing - Velocity NY 2013
Prebrowsing - Velocity NY 2013Prebrowsing - Velocity NY 2013
Prebrowsing - Velocity NY 2013
Steve Souders
 
[HEWEBAR 2012] Adaptive Images in Responsive Web Design
[HEWEBAR 2012] Adaptive Images in Responsive Web Design[HEWEBAR 2012] Adaptive Images in Responsive Web Design
[HEWEBAR 2012] Adaptive Images in Responsive Web Design
Christopher Schmitt
 
High Performance Mobile (SF/SV Web Perf)
High Performance Mobile (SF/SV Web Perf)High Performance Mobile (SF/SV Web Perf)
High Performance Mobile (SF/SV Web Perf)
Steve Souders
 
Doing More with LESS for CSS
Doing More with LESS for CSSDoing More with LESS for CSS
Doing More with LESS for CSS
Todd Anglin
 
HTML5 Video Player - HTML5 Dev Conf 2012
HTML5 Video Player - HTML5 Dev Conf 2012HTML5 Video Player - HTML5 Dev Conf 2012
HTML5 Video Player - HTML5 Dev Conf 2012
steveheffernan
 
[HEWEBFL] Adaptive Images in Responsive Web Design
[HEWEBFL] Adaptive Images in Responsive Web Design[HEWEBFL] Adaptive Images in Responsive Web Design
[HEWEBFL] Adaptive Images in Responsive Web Design
Christopher Schmitt
 
[wvbcn] Adaptive Images in Responsive Web Design
[wvbcn] Adaptive Images in Responsive Web Design[wvbcn] Adaptive Images in Responsive Web Design
[wvbcn] Adaptive Images in Responsive Web Design
Christopher Schmitt
 

What's hot (20)

Bilder usw...
Bilder usw...Bilder usw...
Bilder usw...
 
Mehr Performance für WordPress - WordCamp Köln
Mehr Performance für WordPress - WordCamp KölnMehr Performance für WordPress - WordCamp Köln
Mehr Performance für WordPress - WordCamp Köln
 
Bilder einbinden ist kein Thema, oder?
Bilder einbinden ist kein Thema, oder?Bilder einbinden ist kein Thema, oder?
Bilder einbinden ist kein Thema, oder?
 
[refreshaustin] Adaptive Images in Responsive Web Design
[refreshaustin] Adaptive Images in Responsive Web Design[refreshaustin] Adaptive Images in Responsive Web Design
[refreshaustin] Adaptive Images in Responsive Web Design
 
[parisweb] Adaptive Images in Responsive Web Design
[parisweb] Adaptive Images in Responsive Web Design[parisweb] Adaptive Images in Responsive Web Design
[parisweb] Adaptive Images in Responsive Web Design
 
[CSSDevConf] Adaptive Images in Responsive Web Design 2014
[CSSDevConf] Adaptive Images in Responsive Web Design 2014[CSSDevConf] Adaptive Images in Responsive Web Design 2014
[CSSDevConf] Adaptive Images in Responsive Web Design 2014
 
[rwdsummit] Adaptive Images in Responsive Web Design
[rwdsummit] Adaptive Images in Responsive Web Design[rwdsummit] Adaptive Images in Responsive Web Design
[rwdsummit] Adaptive Images in Responsive Web Design
 
How fast are we going now?
How fast are we going now?How fast are we going now?
How fast are we going now?
 
Design+Performance Velocity 2015
Design+Performance Velocity 2015Design+Performance Velocity 2015
Design+Performance Velocity 2015
 
[funka] Adaptive Images in Responsive Web Design
[funka] Adaptive Images in Responsive Web Design[funka] Adaptive Images in Responsive Web Design
[funka] Adaptive Images in Responsive Web Design
 
implement lighthouse-ci with your web development workflow
implement lighthouse-ci with your web development workflowimplement lighthouse-ci with your web development workflow
implement lighthouse-ci with your web development workflow
 
[wcatx] Adaptive Images in Responsive Web Design
[wcatx] Adaptive Images in Responsive Web Design[wcatx] Adaptive Images in Responsive Web Design
[wcatx] Adaptive Images in Responsive Web Design
 
WordPress-Templates mit Twig erstellen - PHPUGFFM
WordPress-Templates mit Twig erstellen - PHPUGFFMWordPress-Templates mit Twig erstellen - PHPUGFFM
WordPress-Templates mit Twig erstellen - PHPUGFFM
 
Prebrowsing - Velocity NY 2013
Prebrowsing - Velocity NY 2013Prebrowsing - Velocity NY 2013
Prebrowsing - Velocity NY 2013
 
[HEWEBAR 2012] Adaptive Images in Responsive Web Design
[HEWEBAR 2012] Adaptive Images in Responsive Web Design[HEWEBAR 2012] Adaptive Images in Responsive Web Design
[HEWEBAR 2012] Adaptive Images in Responsive Web Design
 
High Performance Mobile (SF/SV Web Perf)
High Performance Mobile (SF/SV Web Perf)High Performance Mobile (SF/SV Web Perf)
High Performance Mobile (SF/SV Web Perf)
 
Doing More with LESS for CSS
Doing More with LESS for CSSDoing More with LESS for CSS
Doing More with LESS for CSS
 
HTML5 Video Player - HTML5 Dev Conf 2012
HTML5 Video Player - HTML5 Dev Conf 2012HTML5 Video Player - HTML5 Dev Conf 2012
HTML5 Video Player - HTML5 Dev Conf 2012
 
[HEWEBFL] Adaptive Images in Responsive Web Design
[HEWEBFL] Adaptive Images in Responsive Web Design[HEWEBFL] Adaptive Images in Responsive Web Design
[HEWEBFL] Adaptive Images in Responsive Web Design
 
[wvbcn] Adaptive Images in Responsive Web Design
[wvbcn] Adaptive Images in Responsive Web Design[wvbcn] Adaptive Images in Responsive Web Design
[wvbcn] Adaptive Images in Responsive Web Design
 

Similar to Responsive Videos, mehr oder weniger

HTML5 multimedia - browser-native video and audio - DevUp HTML5 / Barcelona /...
HTML5 multimedia - browser-native video and audio - DevUp HTML5 / Barcelona /...HTML5 multimedia - browser-native video and audio - DevUp HTML5 / Barcelona /...
HTML5 multimedia - browser-native video and audio - DevUp HTML5 / Barcelona /...
Patrick Lauke
 
Mobile Web Video
Mobile Web VideoMobile Web Video
Mobile Web Video
Sarah Allen
 
HTML5 multimedia - browser-native video and audio - JSDay / Verona / 17 May 2012
HTML5 multimedia - browser-native video and audio - JSDay / Verona / 17 May 2012HTML5 multimedia - browser-native video and audio - JSDay / Verona / 17 May 2012
HTML5 multimedia - browser-native video and audio - JSDay / Verona / 17 May 2012
Patrick Lauke
 
audio, video and canvas in HTML5 - standards>next Manchester 29.09.2010
audio, video and canvas in HTML5 - standards>next Manchester 29.09.2010audio, video and canvas in HTML5 - standards>next Manchester 29.09.2010
audio, video and canvas in HTML5 - standards>next Manchester 29.09.2010
Patrick Lauke
 
Upgrade to HTML5 Video
Upgrade to HTML5 VideoUpgrade to HTML5 Video
Upgrade to HTML5 Video
steveheffernan
 
HTML5 multimedia - where we are, where we're going
HTML5 multimedia - where we are, where we're goingHTML5 multimedia - where we are, where we're going
HTML5 multimedia - where we are, where we're going
brucelawson
 
HTML5 Video for WordPress
HTML5 Video for WordPressHTML5 Video for WordPress
HTML5 Video for WordPress
steveheffernan
 
HTML5 Multimedia Support
HTML5 Multimedia SupportHTML5 Multimedia Support
HTML5 Multimedia Support
Henry Osborne
 
HTML5 Multimedia: where we are, where we're going
HTML5 Multimedia: where we are, where we're goingHTML5 Multimedia: where we are, where we're going
HTML5 Multimedia: where we are, where we're going
brucelawson
 
Web Apps
Web AppsWeb Apps
Web Apps
Tim Wray
 
The Rich Standard: Getting Familiar with HTML5
The Rich Standard: Getting Familiar with HTML5The Rich Standard: Getting Familiar with HTML5
The Rich Standard: Getting Familiar with HTML5
Todd Anglin
 
HTML5 multimedia - browser-native video, audio and canvas - meet.js Summit / ...
HTML5 multimedia - browser-native video, audio and canvas - meet.js Summit / ...HTML5 multimedia - browser-native video, audio and canvas - meet.js Summit / ...
HTML5 multimedia - browser-native video, audio and canvas - meet.js Summit / ...
Patrick Lauke
 
Video.js - How to build and HTML5 Video Player
Video.js - How to build and HTML5 Video PlayerVideo.js - How to build and HTML5 Video Player
Video.js - How to build and HTML5 Video Player
steveheffernan
 
HTML5 APIs - native multimedia support and beyond - University of Leeds 05.05...
HTML5 APIs - native multimedia support and beyond - University of Leeds 05.05...HTML5 APIs - native multimedia support and beyond - University of Leeds 05.05...
HTML5 APIs - native multimedia support and beyond - University of Leeds 05.05...
Patrick Lauke
 
HTML5 Video Right Now
HTML5 Video Right NowHTML5 Video Right Now
HTML5 Video Right Now
Carlos Araya
 
Multimedia on the web - HTML5 video and audio
Multimedia on the web - HTML5 video and audioMultimedia on the web - HTML5 video and audio
Multimedia on the web - HTML5 video and audio
Christian Heilmann
 
HTML5 Video Presentation
HTML5 Video PresentationHTML5 Video Presentation
HTML5 Video Presentation
sith33
 
Looking into HTML5 + CSS3
Looking into HTML5 + CSS3Looking into HTML5 + CSS3
Looking into HTML5 + CSS3
Christopher Schmitt
 
Speak The Web: The HTML5 Experiments
Speak The Web: The HTML5 ExperimentsSpeak The Web: The HTML5 Experiments
Speak The Web: The HTML5 Experiments
guestd427df
 
HTML5 and friends - JISC CETIS Conference 2010 Nottingham 15.11.2010
HTML5 and friends - JISC CETIS Conference 2010 Nottingham 15.11.2010HTML5 and friends - JISC CETIS Conference 2010 Nottingham 15.11.2010
HTML5 and friends - JISC CETIS Conference 2010 Nottingham 15.11.2010
Patrick Lauke
 

Similar to Responsive Videos, mehr oder weniger (20)

HTML5 multimedia - browser-native video and audio - DevUp HTML5 / Barcelona /...
HTML5 multimedia - browser-native video and audio - DevUp HTML5 / Barcelona /...HTML5 multimedia - browser-native video and audio - DevUp HTML5 / Barcelona /...
HTML5 multimedia - browser-native video and audio - DevUp HTML5 / Barcelona /...
 
Mobile Web Video
Mobile Web VideoMobile Web Video
Mobile Web Video
 
HTML5 multimedia - browser-native video and audio - JSDay / Verona / 17 May 2012
HTML5 multimedia - browser-native video and audio - JSDay / Verona / 17 May 2012HTML5 multimedia - browser-native video and audio - JSDay / Verona / 17 May 2012
HTML5 multimedia - browser-native video and audio - JSDay / Verona / 17 May 2012
 
audio, video and canvas in HTML5 - standards>next Manchester 29.09.2010
audio, video and canvas in HTML5 - standards>next Manchester 29.09.2010audio, video and canvas in HTML5 - standards>next Manchester 29.09.2010
audio, video and canvas in HTML5 - standards>next Manchester 29.09.2010
 
Upgrade to HTML5 Video
Upgrade to HTML5 VideoUpgrade to HTML5 Video
Upgrade to HTML5 Video
 
HTML5 multimedia - where we are, where we're going
HTML5 multimedia - where we are, where we're goingHTML5 multimedia - where we are, where we're going
HTML5 multimedia - where we are, where we're going
 
HTML5 Video for WordPress
HTML5 Video for WordPressHTML5 Video for WordPress
HTML5 Video for WordPress
 
HTML5 Multimedia Support
HTML5 Multimedia SupportHTML5 Multimedia Support
HTML5 Multimedia Support
 
HTML5 Multimedia: where we are, where we're going
HTML5 Multimedia: where we are, where we're goingHTML5 Multimedia: where we are, where we're going
HTML5 Multimedia: where we are, where we're going
 
Web Apps
Web AppsWeb Apps
Web Apps
 
The Rich Standard: Getting Familiar with HTML5
The Rich Standard: Getting Familiar with HTML5The Rich Standard: Getting Familiar with HTML5
The Rich Standard: Getting Familiar with HTML5
 
HTML5 multimedia - browser-native video, audio and canvas - meet.js Summit / ...
HTML5 multimedia - browser-native video, audio and canvas - meet.js Summit / ...HTML5 multimedia - browser-native video, audio and canvas - meet.js Summit / ...
HTML5 multimedia - browser-native video, audio and canvas - meet.js Summit / ...
 
Video.js - How to build and HTML5 Video Player
Video.js - How to build and HTML5 Video PlayerVideo.js - How to build and HTML5 Video Player
Video.js - How to build and HTML5 Video Player
 
HTML5 APIs - native multimedia support and beyond - University of Leeds 05.05...
HTML5 APIs - native multimedia support and beyond - University of Leeds 05.05...HTML5 APIs - native multimedia support and beyond - University of Leeds 05.05...
HTML5 APIs - native multimedia support and beyond - University of Leeds 05.05...
 
HTML5 Video Right Now
HTML5 Video Right NowHTML5 Video Right Now
HTML5 Video Right Now
 
Multimedia on the web - HTML5 video and audio
Multimedia on the web - HTML5 video and audioMultimedia on the web - HTML5 video and audio
Multimedia on the web - HTML5 video and audio
 
HTML5 Video Presentation
HTML5 Video PresentationHTML5 Video Presentation
HTML5 Video Presentation
 
Looking into HTML5 + CSS3
Looking into HTML5 + CSS3Looking into HTML5 + CSS3
Looking into HTML5 + CSS3
 
Speak The Web: The HTML5 Experiments
Speak The Web: The HTML5 ExperimentsSpeak The Web: The HTML5 Experiments
Speak The Web: The HTML5 Experiments
 
HTML5 and friends - JISC CETIS Conference 2010 Nottingham 15.11.2010
HTML5 and friends - JISC CETIS Conference 2010 Nottingham 15.11.2010HTML5 and friends - JISC CETIS Conference 2010 Nottingham 15.11.2010
HTML5 and friends - JISC CETIS Conference 2010 Nottingham 15.11.2010
 

More from Walter Ebert

FrOSCon 2023: WordPress als ActivityPub-Instanz
FrOSCon 2023: WordPress als ActivityPub-InstanzFrOSCon 2023: WordPress als ActivityPub-Instanz
FrOSCon 2023: WordPress als ActivityPub-Instanz
Walter Ebert
 
Hero Video Performance - DrupalCamp Ruhr
Hero Video Performance - DrupalCamp RuhrHero Video Performance - DrupalCamp Ruhr
Hero Video Performance - DrupalCamp Ruhr
Walter Ebert
 
Sicherheit für WordPress
Sicherheit für WordPressSicherheit für WordPress
Sicherheit für WordPress
Walter Ebert
 
WordPress aufräumen - WordCamp Stuttgart
WordPress aufräumen - WordCamp StuttgartWordPress aufräumen - WordCamp Stuttgart
WordPress aufräumen - WordCamp Stuttgart
Walter Ebert
 
WordPress aufräumen
WordPress aufräumenWordPress aufräumen
WordPress aufräumen
Walter Ebert
 
Hero Video Performance
Hero Video PerformanceHero Video Performance
Hero Video Performance
Walter Ebert
 
WordPress-Webseiten umziehen / online stellen
WordPress-Webseiten umziehen / online stellenWordPress-Webseiten umziehen / online stellen
WordPress-Webseiten umziehen / online stellen
Walter Ebert
 
Using browser settings for performance
Using browser settings for performanceUsing browser settings for performance
Using browser settings for performance
Walter Ebert
 
Das richtige WordPress-Theme finden
Das richtige WordPress-Theme findenDas richtige WordPress-Theme finden
Das richtige WordPress-Theme finden
Walter Ebert
 
WordPress Health Check - WordCamp Würzburg
WordPress Health Check - WordCamp WürzburgWordPress Health Check - WordCamp Würzburg
WordPress Health Check - WordCamp Würzburg
Walter Ebert
 
WordPress Health Check
WordPress Health CheckWordPress Health Check
WordPress Health Check
Walter Ebert
 
Making WordPress fast(er)
Making WordPress fast(er)Making WordPress fast(er)
Making WordPress fast(er)
Walter Ebert
 
Testumgebungen für WordPress
Testumgebungen für WordPressTestumgebungen für WordPress
Testumgebungen für WordPress
Walter Ebert
 
Modernism in Web Design
Modernism in Web DesignModernism in Web Design
Modernism in Web Design
Walter Ebert
 
WordPress Multisite
WordPress MultisiteWordPress Multisite
WordPress Multisite
Walter Ebert
 
Weniger aus Bilder holen
Weniger aus Bilder holenWeniger aus Bilder holen
Weniger aus Bilder holen
Walter Ebert
 
WordPress mit Composer und Git verwalten
WordPress mit Composer und Git verwaltenWordPress mit Composer und Git verwalten
WordPress mit Composer und Git verwalten
Walter Ebert
 
HTTPS + Let's Encrypt
HTTPS + Let's EncryptHTTPS + Let's Encrypt
HTTPS + Let's Encrypt
Walter Ebert
 
WordPress-Themes mit Twig entwickeln
WordPress-Themes mit Twig entwickelnWordPress-Themes mit Twig entwickeln
WordPress-Themes mit Twig entwickeln
Walter Ebert
 
Mehr Performance für WordPress - WPFra
Mehr Performance für WordPress - WPFraMehr Performance für WordPress - WPFra
Mehr Performance für WordPress - WPFra
Walter Ebert
 

More from Walter Ebert (20)

FrOSCon 2023: WordPress als ActivityPub-Instanz
FrOSCon 2023: WordPress als ActivityPub-InstanzFrOSCon 2023: WordPress als ActivityPub-Instanz
FrOSCon 2023: WordPress als ActivityPub-Instanz
 
Hero Video Performance - DrupalCamp Ruhr
Hero Video Performance - DrupalCamp RuhrHero Video Performance - DrupalCamp Ruhr
Hero Video Performance - DrupalCamp Ruhr
 
Sicherheit für WordPress
Sicherheit für WordPressSicherheit für WordPress
Sicherheit für WordPress
 
WordPress aufräumen - WordCamp Stuttgart
WordPress aufräumen - WordCamp StuttgartWordPress aufräumen - WordCamp Stuttgart
WordPress aufräumen - WordCamp Stuttgart
 
WordPress aufräumen
WordPress aufräumenWordPress aufräumen
WordPress aufräumen
 
Hero Video Performance
Hero Video PerformanceHero Video Performance
Hero Video Performance
 
WordPress-Webseiten umziehen / online stellen
WordPress-Webseiten umziehen / online stellenWordPress-Webseiten umziehen / online stellen
WordPress-Webseiten umziehen / online stellen
 
Using browser settings for performance
Using browser settings for performanceUsing browser settings for performance
Using browser settings for performance
 
Das richtige WordPress-Theme finden
Das richtige WordPress-Theme findenDas richtige WordPress-Theme finden
Das richtige WordPress-Theme finden
 
WordPress Health Check - WordCamp Würzburg
WordPress Health Check - WordCamp WürzburgWordPress Health Check - WordCamp Würzburg
WordPress Health Check - WordCamp Würzburg
 
WordPress Health Check
WordPress Health CheckWordPress Health Check
WordPress Health Check
 
Making WordPress fast(er)
Making WordPress fast(er)Making WordPress fast(er)
Making WordPress fast(er)
 
Testumgebungen für WordPress
Testumgebungen für WordPressTestumgebungen für WordPress
Testumgebungen für WordPress
 
Modernism in Web Design
Modernism in Web DesignModernism in Web Design
Modernism in Web Design
 
WordPress Multisite
WordPress MultisiteWordPress Multisite
WordPress Multisite
 
Weniger aus Bilder holen
Weniger aus Bilder holenWeniger aus Bilder holen
Weniger aus Bilder holen
 
WordPress mit Composer und Git verwalten
WordPress mit Composer und Git verwaltenWordPress mit Composer und Git verwalten
WordPress mit Composer und Git verwalten
 
HTTPS + Let's Encrypt
HTTPS + Let's EncryptHTTPS + Let's Encrypt
HTTPS + Let's Encrypt
 
WordPress-Themes mit Twig entwickeln
WordPress-Themes mit Twig entwickelnWordPress-Themes mit Twig entwickeln
WordPress-Themes mit Twig entwickeln
 
Mehr Performance für WordPress - WPFra
Mehr Performance für WordPress - WPFraMehr Performance für WordPress - WPFra
Mehr Performance für WordPress - WPFra
 

Recently uploaded

Open Source TCP or Netflow Log Server Using Graylog
Open Source TCP or Netflow Log Server Using GraylogOpen Source TCP or Netflow Log Server Using Graylog
Open Source TCP or Netflow Log Server Using Graylog
Bangladesh Network Operators Group
 
Team Cymru Community Services,Overview of all public services
Team Cymru Community Services,Overview of all public servicesTeam Cymru Community Services,Overview of all public services
Team Cymru Community Services,Overview of all public services
Bangladesh Network Operators Group
 
SisAi World - Software is AI - Providing AI as Software - Protecting the Inte...
SisAi World - Software is AI - Providing AI as Software - Protecting the Inte...SisAi World - Software is AI - Providing AI as Software - Protecting the Inte...
SisAi World - Software is AI - Providing AI as Software - Protecting the Inte...
QingjieDu1
 
How God led me to DTS? Through many different signs and connections that I c...
How God led me to DTS? Through many different signs and connections that  I c...How God led me to DTS? Through many different signs and connections that  I c...
How God led me to DTS? Through many different signs and connections that I c...
AshishMohan57
 
upgrade to zabbix-7 0 como atualiza lts1
upgrade to zabbix-7 0 como atualiza lts1upgrade to zabbix-7 0 como atualiza lts1
upgrade to zabbix-7 0 como atualiza lts1
diogolsew
 
Best CSS Animation Libraries for Web Developers
Best CSS Animation Libraries for Web DevelopersBest CSS Animation Libraries for Web Developers
Best CSS Animation Libraries for Web Developers
Shrestha Raaz
 
Network Security version1.0 - Module 3.pptx
Network Security version1.0 - Module 3.pptxNetwork Security version1.0 - Module 3.pptx
Network Security version1.0 - Module 3.pptx
Infotainmentforall
 
Understanding Threat Intelligence | What is Threat Intelligence
Understanding Threat Intelligence | What is Threat IntelligenceUnderstanding Threat Intelligence | What is Threat Intelligence
Understanding Threat Intelligence | What is Threat Intelligence
Lumiverse Solutions Pvt Ltd
 
University of California, Riverside diploma
University of California, Riverside diplomaUniversity of California, Riverside diploma
University of California, Riverside diploma
eufdev
 
Digital ethnography of the Polish darknet drug trade community
Digital ethnography of the Polish darknet drug trade communityDigital ethnography of the Polish darknet drug trade community
Digital ethnography of the Polish darknet drug trade community
Piotr Siuda
 
202254.com香蕉影视,沙丘2在线播放,沙丘2线上看,最新电影沙丘2在线,热门电影推荐,2024最新科幻片推荐。
202254.com香蕉影视,沙丘2在线播放,沙丘2线上看,最新电影沙丘2在线,热门电影推荐,2024最新科幻片推荐。202254.com香蕉影视,沙丘2在线播放,沙丘2线上看,最新电影沙丘2在线,热门电影推荐,2024最新科幻片推荐。
202254.com香蕉影视,沙丘2在线播放,沙丘2线上看,最新电影沙丘2在线,热门电影推荐,2024最新科幻片推荐。
yilin01100
 
Trump fist pump t shirts Trump fist pump t shirts
Trump fist pump t shirts Trump fist pump t shirtsTrump fist pump t shirts Trump fist pump t shirts
Trump fist pump t shirts Trump fist pump t shirts
exgf28
 
Week 1 - Pendidikan Pancasila - Gr 1.docx
Week 1 - Pendidikan Pancasila - Gr 1.docxWeek 1 - Pendidikan Pancasila - Gr 1.docx
Week 1 - Pendidikan Pancasila - Gr 1.docx
JunaManroe1
 
Portugal Dreamin 24 - How to easily use an API with Flows
Portugal Dreamin 24  - How to easily use an API with FlowsPortugal Dreamin 24  - How to easily use an API with Flows
Portugal Dreamin 24 - How to easily use an API with Flows
Thierry TROUIN ☁
 
Top 50 Telephone Conversation Sample Examples For IT Industries.pdf
Top 50 Telephone Conversation Sample Examples For IT Industries.pdfTop 50 Telephone Conversation Sample Examples For IT Industries.pdf
Top 50 Telephone Conversation Sample Examples For IT Industries.pdf
Krishna L
 
Enhancing seamless access using TIGERfed
Enhancing seamless access using TIGERfedEnhancing seamless access using TIGERfed
Enhancing seamless access using TIGERfed
Bangladesh Network Operators Group
 
Mobile SEO India | Mobile SEO Service | Mobile SEO Company
Mobile SEO India | Mobile SEO Service | Mobile SEO CompanyMobile SEO India | Mobile SEO Service | Mobile SEO Company
Mobile SEO India | Mobile SEO Service | Mobile SEO Company
SIB Infotech
 
Saint Louis University diploma
Saint Louis University diplomaSaint Louis University diploma
Saint Louis University diploma
eufdev
 
My President is bulletproof t shirts hoodie
My President is bulletproof t shirts hoodieMy President is bulletproof t shirts hoodie
My President is bulletproof t shirts hoodie
exgf28
 
Geolocation and Geofeed Implementation bdNOG18
Geolocation and Geofeed Implementation bdNOG18Geolocation and Geofeed Implementation bdNOG18
Geolocation and Geofeed Implementation bdNOG18
Bangladesh Network Operators Group
 

Recently uploaded (20)

Open Source TCP or Netflow Log Server Using Graylog
Open Source TCP or Netflow Log Server Using GraylogOpen Source TCP or Netflow Log Server Using Graylog
Open Source TCP or Netflow Log Server Using Graylog
 
Team Cymru Community Services,Overview of all public services
Team Cymru Community Services,Overview of all public servicesTeam Cymru Community Services,Overview of all public services
Team Cymru Community Services,Overview of all public services
 
SisAi World - Software is AI - Providing AI as Software - Protecting the Inte...
SisAi World - Software is AI - Providing AI as Software - Protecting the Inte...SisAi World - Software is AI - Providing AI as Software - Protecting the Inte...
SisAi World - Software is AI - Providing AI as Software - Protecting the Inte...
 
How God led me to DTS? Through many different signs and connections that I c...
How God led me to DTS? Through many different signs and connections that  I c...How God led me to DTS? Through many different signs and connections that  I c...
How God led me to DTS? Through many different signs and connections that I c...
 
upgrade to zabbix-7 0 como atualiza lts1
upgrade to zabbix-7 0 como atualiza lts1upgrade to zabbix-7 0 como atualiza lts1
upgrade to zabbix-7 0 como atualiza lts1
 
Best CSS Animation Libraries for Web Developers
Best CSS Animation Libraries for Web DevelopersBest CSS Animation Libraries for Web Developers
Best CSS Animation Libraries for Web Developers
 
Network Security version1.0 - Module 3.pptx
Network Security version1.0 - Module 3.pptxNetwork Security version1.0 - Module 3.pptx
Network Security version1.0 - Module 3.pptx
 
Understanding Threat Intelligence | What is Threat Intelligence
Understanding Threat Intelligence | What is Threat IntelligenceUnderstanding Threat Intelligence | What is Threat Intelligence
Understanding Threat Intelligence | What is Threat Intelligence
 
University of California, Riverside diploma
University of California, Riverside diplomaUniversity of California, Riverside diploma
University of California, Riverside diploma
 
Digital ethnography of the Polish darknet drug trade community
Digital ethnography of the Polish darknet drug trade communityDigital ethnography of the Polish darknet drug trade community
Digital ethnography of the Polish darknet drug trade community
 
202254.com香蕉影视,沙丘2在线播放,沙丘2线上看,最新电影沙丘2在线,热门电影推荐,2024最新科幻片推荐。
202254.com香蕉影视,沙丘2在线播放,沙丘2线上看,最新电影沙丘2在线,热门电影推荐,2024最新科幻片推荐。202254.com香蕉影视,沙丘2在线播放,沙丘2线上看,最新电影沙丘2在线,热门电影推荐,2024最新科幻片推荐。
202254.com香蕉影视,沙丘2在线播放,沙丘2线上看,最新电影沙丘2在线,热门电影推荐,2024最新科幻片推荐。
 
Trump fist pump t shirts Trump fist pump t shirts
Trump fist pump t shirts Trump fist pump t shirtsTrump fist pump t shirts Trump fist pump t shirts
Trump fist pump t shirts Trump fist pump t shirts
 
Week 1 - Pendidikan Pancasila - Gr 1.docx
Week 1 - Pendidikan Pancasila - Gr 1.docxWeek 1 - Pendidikan Pancasila - Gr 1.docx
Week 1 - Pendidikan Pancasila - Gr 1.docx
 
Portugal Dreamin 24 - How to easily use an API with Flows
Portugal Dreamin 24  - How to easily use an API with FlowsPortugal Dreamin 24  - How to easily use an API with Flows
Portugal Dreamin 24 - How to easily use an API with Flows
 
Top 50 Telephone Conversation Sample Examples For IT Industries.pdf
Top 50 Telephone Conversation Sample Examples For IT Industries.pdfTop 50 Telephone Conversation Sample Examples For IT Industries.pdf
Top 50 Telephone Conversation Sample Examples For IT Industries.pdf
 
Enhancing seamless access using TIGERfed
Enhancing seamless access using TIGERfedEnhancing seamless access using TIGERfed
Enhancing seamless access using TIGERfed
 
Mobile SEO India | Mobile SEO Service | Mobile SEO Company
Mobile SEO India | Mobile SEO Service | Mobile SEO CompanyMobile SEO India | Mobile SEO Service | Mobile SEO Company
Mobile SEO India | Mobile SEO Service | Mobile SEO Company
 
Saint Louis University diploma
Saint Louis University diplomaSaint Louis University diploma
Saint Louis University diploma
 
My President is bulletproof t shirts hoodie
My President is bulletproof t shirts hoodieMy President is bulletproof t shirts hoodie
My President is bulletproof t shirts hoodie
 
Geolocation and Geofeed Implementation bdNOG18
Geolocation and Geofeed Implementation bdNOG18Geolocation and Geofeed Implementation bdNOG18
Geolocation and Geofeed Implementation bdNOG18
 

Responsive Videos, mehr oder weniger