SlideShare a Scribd company logo
Tutorial: HTML5 video

How to process and publish
video in an open format

Silvia Pfeiffer, Jan Gerber, Michael Dale
Outline
Part 1: Basics
• Setup
• State of Standardisation
• Mediawiki/mwEmbed demo
• Editing
• Publish a HTML5 video
• <video> Javascript API
• Skinning
• Tinyvid.tv demo
Outline
Part 2: Experts
• Transcoding
• Cross-Platform publishing
• Pad.ma demo
• Setting up a Site
• Accessibility
• In-browser video editing
• Other HTML5 video demos
PART 1: BASICS
Setup
• Ogg tools: oggz-tools, oggvideotools
  https://launchpad.net/~theora/+archive/ppa
• Web Server: Apache
• Web Browser: Firefox 3.6+, Opera 10.10
  https://launchpad.net/~ubuntu-mozilla-daily/+archive/ppa
• Firefogg: http://firefogg.org/
• Firebug: http://getfirebug.com
• Video Player: vlc, mplayer, totem, or xine
• Video Editor: pitivi or kino
Get content:
http://mirror.conf.lca2010.org.nz/lca-html5-tut-videos.tar.gz
State of Standardisation
• HTML5 video and audio elements:
 http://www.whatwg.org/specs/web-apps/current-work/multipage/video.html


• Media Fragments URI:
 http://www.w3.org/2008/WebVideo/Fragments/WD-media-fragments-spec/


• Media Annotations API:
 http://dev.w3.org/2008/video/mediaann/mediaont-api-1.0/mediaont-api-1.0.html


• Timed Text: DFXP
  http://www.w3.org/TR/ttaf1-dfxp/
Codecs in HTML5 Browsers
• Ogg Theora/Vorbis:
 ▫ Firefox 3.5+ (liboggplay)
 ▫ Chrome (ffmpeg)
 ▫ Opera (gstreamer)
• MPEG-4 H.264/AAC:
 ▫ Safari (QuickTime)
 ▫ Chrome (ffmpeg)
 ▫ Opera (gstreamer on Linux)
Statistics of Browser support
• Ogg support through HTML5: 26.66% =
  21.4% (FireFox3.5+) + 5.26 (Chrome3.0+)
• Ogg support through Cortado – Java plugin:
  90%
• Adobe Flash Browser plugin: 99%
• Microsoft Silverlight Browser plugin: 48%
• QuickTime Browser plugin: 15%
State of Standardisation
• HTML5 video and audio elements:
 http://www.whatwg.org/specs/web-apps/current-work/multipage/video.html


• Media Fragments URI:
 http://www.w3.org/2008/WebVideo/Fragments/WD-media-fragments-spec/


• Media Annotations API:
 http://dev.w3.org/2008/video/mediaann/mediaont-api-1.0/mediaont-api-1.0.html


• Timed Text: DFXP
  http://www.w3.org/TR/ttaf1-dfxp/
Media Fragments URI
Temporal:
• http://www.example.com/video.ogv#t=10,20
Live streaming:
• http://www.example.com/video.ogv#t=clock:
  2009-07-26T11:19:01Z,2009-07-26T11:20:01Z
Rectangular region:
• http://www.example.com/video.ogv#xywh=
  160,120,320,240
Track selection:
• http://www.example.com/video.ogv #track=„video‟
State of Standardisation
• HTML5 video and audio elements:
 http://www.whatwg.org/specs/web-apps/current-work/multipage/video.html


• Media Fragments URI:
 http://www.w3.org/2008/WebVideo/Fragments/WD-media-fragments-spec/


• Media Annotations API:
 http://dev.w3.org/2008/video/mediaann/mediaont-api-1.0/mediaont-api-1.0.html


• Timed Text: DFXP
  http://www.w3.org/TR/ttaf1-dfxp/
MediaAnn: API for metadata
object[] getProperty(
  in DOMString propertyName,
  in optional DOMString sourceFormat,
  in optional DOMString subtype,
  in optional DOMString language,
  in optional DOMstring fragment );
MediaAnn: Properties
title:      [“Video Stream”]
language: [“de-AT”] (BCP47)
locator:    ["http://example.com/video.ogv"]
contributor, creator, createDate, location,
   copyright, license, publisher, etc.
frameSize: [3.072, 2.304]
compression: [“Theora/Vorbis"]
duration: [3600]
format:     [“video/ogg"]
State of Standardisation
• HTML5 video and audio elements:
 http://www.whatwg.org/specs/web-apps/current-work/multipage/video.html


• Media Fragments URI:
 http://www.w3.org/2008/WebVideo/Fragments/WD-media-fragments-spec/


• Media Annotations API:
 http://dev.w3.org/2008/video/mediaann/mediaont-api-1.0/mediaont-api-1.0.html


• Timed Text: DFXP
  http://www.w3.org/TR/ttaf1-dfxp/
W3C Timed Text
DFXP: Distribution Format Exchange Profile

<tt xml:lang="" xmlns="http://www.w3.org/2006/10/ttaf1">
 <head>
  <metadata/>
  <styling/>
  <layout/>
 </head>
 <body region="subtitleArea">
  <div>
    <p xml:id="subtitle1" begin="0.76s" end="3.45s">It seems a
   paradox, does it not,</p>
    <p xml:id="subtitle2" begin="5.0s" end="10.0s">that the image
   formed on<br/>the Retina should be inverted?</p>
</tt>
Reminder: Setup
• Ogg tools: oggz-tools, oggvideotools
  https://launchpad.net/~theora/+archive/ppa
• Web Server: Apache
• Web Browser: Firefox 3.6+, Opera 10.10
  https://launchpad.net/~ubuntu-mozilla-daily/+archive/ppa
• Firefogg: http://firefogg.org/
• Firebug: http://getfirebug.com
• Video Player: vlc, mplayer, totem, or xine
• Video Editor: pitivi or kino
Get content:
http://mirror.conf.lca2010.org.nz/lca-html5-tut-videos.tar.gz
Michael Dale
Editing
• Kino or pitivi – take DV input, write Ogg
 ▫   Run kino on DVD_VR2.vob.dv
 ▫   Cut a small segment
 ▫   Export to Ogg
 ▫   Test in vlc, mplayer, or xine
Prepare an Ogg Video
• dvdrip, vobcopy – for DVDs to extract to DV (for
  editing) or mpeg
• Thoggen – for DVDs to extract to Ogg Theora
• dvgrab – for grabbing DV from a camera
• oggSlideshow was used for foms2009.ogv

• FFMpeg, ffmpeg2theora – transcode to Ogg
 ▫ Go to http://firefogg.org/make/ and transcode
   DougSchepers-W3C.mp4 or ninja_gameplay.mp4
• oggThumb, totem – get poster image
Prepare a Web page: page1.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>W3C News</title>
  </head>
  <body>
    <h2>Doug Schepers: W3C and Twitter</h2>
    <video src="DougSchepers-W3C.ogv"
poster="DougSchepers-W3C.png" controls>
      <p>Your browser does not support HTML5
Ogg video.</p>
    </video>
  </body>
</html>
Publish Page
• Upload page1.html to apache
  ▫ Copy page1.html to /var/www/
  ▫ Make sure, Web server serves .ogv as video/ogg
    mime type out of /etc/mime.types
• Test in Firefox
  ▫ http://localhost/page1.html
Server improvements
• Improve speed:
  • create .htaccess file with:
  <Files "DougSchepers-W3C.ogv">
  Header set X-Content-Duration “55.48"
  </Files>
  • Use oggz-info to find out duration
• Improve seeking:
  • Install oggz-chop and set it up as cgi script
  ScriptAlias /oggz-chop /usr/bin/oggz-chop
  Action video/ogg /oggz-chop
Publish in Ogg and MP4: page2.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>W3C News</title>
  </head>
  <body>
    <h2>Doug Schepers: W3C and Twitter</h2>
    <video   poster="DougSchepers-W3C.png" controls>
   <source src="DougSchepers-W3C.ogv" type="video/ogg" />
   <source src="DougSchepers-W3C.mp4" type="video/mp4" />
      <p>Your browser does not support HTML5 Ogg video.</p>
    </video>
  </body>
</html>

Test in Safari/Webkit on Mac to play the MP4
Javascript API of <video>
• API functions:
  ▫   v = new Video([url]);
  ▫   void load();
  ▫   void play();
  ▫   void pause();
• Attributes e.g.:
  ▫   DOMString src / currentSrc
  ▫   float currenttime
  ▫   float volume
  ▫   boolean muted
• skinning
Skinned video player examples




http://www.annodex.net/~   http://openvideo.daily-
silvia/itext/elephant_wi   motion.com/video/xbqpad_w
th_skin.html               allys-happy-place_fun
Created by Chris Double
Part 2: Experts
Transcoding: what bitrates?
• SD 240p (320x240 pixels, 4:3, CIF) – bitrate of
  350Kbps to 500 Kbps
• SD 480p (640x480 pixels, 4:3) – bitrate of 500Kbps
  to 1.5Mbps
• HD 720p (1280x720 pixels, 16:9) – bitrate of 1 Mbps
  to 5Mbps
• HD 1080p (1920x1080 pixels, 16:9) – bitrate of
  2Mbps to 10Mbps

14Mbps Telstra “Next G” HSPA wireless network
24Mbps for ADSL+
Transcoding: high quality choice
• SD (4:3): 640x480 pixels, keep framerate, 1-
  2Mbps
• HD (16:9): 960x480 pixels, keep framerate, 1-
  2Mbps
• Audio: 44.1kHz+, stereo, 100-200Kbps

Possibly publish a high and a low quality video, so
 users can choose
ffmpeg2theora
• Simple: ffmpeg2theora <file.dv>
  -> file.ogv
• Live encoding from dv camcorder:
  dvgrab - | ffmpeg2theora -f dv -x 960 -y 480 -o
  output.ogv –
• Interesting options:
  ▫   --two-pass
  ▫   --sync / --nosync
  ▫   --preset: ffmpeg2theora -p info
  ▫   Subtitles (see later)
• recent builds at http://firefogg.org/nightly/
Transcode script: transcode.sh
tstart=$1
tend=$2
inputfile=$3
strdate=`date`;
strorga="LCA";
strcopy="LCA 2010";
strlicense="Creative Commons BY SA 2.5";
strcommand="ffmpeg2theora -s $tstart -e $tstop
--date '$strdate' --organization '$strorga'
--copyright '$strcopy' --license '$strlicense'
--sync $inputfile"
Cross-Platform Video Publishing
• Ogg works out of the box on
  ▫ Firefox 3.5+
  ▫ Opera (latest beta 10.50)
  ▫ Chrome 3.0+
• Safari: install XiphQT or use cortado
• IE: use cortado or vlc plugin (ActiveX control in
  development)
Cortado Fallback: page3.html
<video src="big_buck_bunny_480p_stereo.ogv"
controls width="854" height="480">
<applet
code="com.fluendo.player.Cortado.class"
archive="http://theora.org/cortado.jar"
width="854" height="480">
<param name="url"
value="big_buck_bunny_480p_stereo.ogv"/>
<param name="duration" value="596.458"/>
</applet>
</video>
Run in IE on Windoze.
Quicktime/Flash fallback
• Video for Everybody
 ▫   Ogg
 ▫   Mp4
 ▫   QuickTime plugin
 ▫   Flash plugin
 ▫   Error message
• No Javascript necessary
Video For Everybody: page4.html
<video poster="videos/ninja_gameplay.jpg" controls>
  <source src="videos/ninja_gameplay.ogv" type="video/ogg" />
  <source src="videos/ninja_gameplay.mp4" type="video/mp4" />
  <!--[if gt IE 6]>
    <object width="640" height="375"><![endif]-->
  <!--[if !IE]><!-->
    <object width="640" height="375" type="video/quicktime"
data="videos/ninja_gameplay.mp4">
  <!--<![endif]-->
  <param name="src" value="videos/ninja_gameplay.mp4" />
  <object width="640" height="380" type="application/x-shockwave-
flash"
data="http://www.vimeo.com/moogaloop_local.swf?clip_id=6716251">
    <param name="movie"
value="http://www.vimeo.com/moogaloop_local.swf?clip_id=6716251" />
    <p>No video playback capabilities</p>
  </object><!--[if gt IE 6]><!--></object><!--<![endif]-->
</video>
Javascript Video Tag Rewrite
Use ogv & mp4 video
• Video4All: JS library
 • Flash fallback
• mwEmbed: JS library
 ▫   Cortado, vlc
 ▫   Flash Fallback with Kaltura player
 ▫   ROE use
 ▫   Skinning with jQuery-ui
 ▫   Subtitle support
mwEmbed example: page5.html
<html>
<head>
<script type="text/javascript"
src="http://firefogg.org/make/mwEmbed/mv_embed.js"></sc
ript>
</head>
<body>
<video durationHint="5“ poster=“thumb.jpg“
src=“video.ogv"></video>
</body>
</html>

http://www.firefogg.org/make/mwEmbed/example_u
sage/Player_Simple_Themable.html
Jan Gerber

http://www.pad.ma/
Setting up a Video Hosting Site
• Cost of hosting video - consider:
  ▫ Storage cost
  ▫ Application sw: e.g. videobin.org, mediawiki
  ▫ Application integration with CMSes
     ▫ http://drupal.org/project/video
     ▫ videopress
     ▫ implement modules!
  ▫ Bandwidth needs
  ▫ Transcoding CPU needs
External Theora hosting
•   archive.org
•   commons.wikimedia.org
•   tinyvid.tv
•   videobin.org (GPL v3)
•   oggify.com

“External Embedding” enabled by default
Firefogg: page6.html
• Encoding and uploading at the same time, or
• Sending a multipart POST request once
  encoding is done

Nicer interface with progressbar: page7.html
<script type="text/javascript">
var ogg = new Firefogg();
function transcode () {
  if(ogg.selectVideo()) {
    var options = JSON.stringify({'maxSize': 320, 'videoBitrate':
500});
    ogg.encode(options);
    document.getElementById('message').innerHTML="please wait";
    var transcodeStatus = function() {
       if(ogg.state == 'encoding') {
         setTimeout(transcodeStatus, 500);
       } else if (ogg.state == 'encoding done') {
         document.getElementById('message').innerHTML=“finished";
       }
    }
    transcodeStatus();
  }
  return false;
}
</script>

<p id="message"></p>
<a href="#" onclick="javascript:transcode()" >transcode file</a>
Accessibility
• Player keyboard access
 ▫   Tabbing
 ▫   Space
 ▫   Left/Right arrow (5 sec)
 ▫   Ctl-Left/Ctl-Right arrow (60sec)
 ▫   Home-Left/Home-Right (beginning/end)
 ▫   Volume up / down arrows
Captions/Subtitles:
srt example
1
00:00:15,000 --> 00:00:17,951
At the left we can see...

2
00:00:18,166 --> 00:00:20,083
At the right we can see the...

3
00:00:20,119 --> 00:00:21,962
...the head-snarlers

http://www.annodex.net/~silvia/itext/elephants_dream/elephant.engl
ish-utf8.srt
Sites that offer subtitles
• OpenSubtitles.org:
 ▫ http://www.opensubtitles.org/en
• DivX Subtitles:
 ▫ http://www.divxsubtitles.net/
• AllSubs.org:
 ▫ http://www.allsubs.org/
Subtitle example with HTML5
<video src="elephants_dream.ogv"
poster="elephants_dream.png" >
    <itextlist category="SUB">
      <itext lang="af" charset="ISO-8859-1“
          src="elephants_dream.afrikaans.srt“/>
      <itext lang="ar" charset="Windows-1256"
          src="elephants_dream.arabic.srt“/>
      <itext lang="bn" charset="UTF-8”
          src="elephants_dream.bangla.srt“/>
  </itextlist>
</video>

Demo:
http://www.annodex.net/~silvia/itext/elephant_no_skin_v2.html
Note: in process of standardisation
Javascript subtitle approach
<script type="text/javascript"
src="jquery.js"></script>
<script type="text/javascript"
src="jquery.srt.js"></script>

<video src="http://example.com/video.ogv" id="video"
controls>
</video>
<div class="srt“ data-video="video"
     data-srt="http://example.com/video.srt" />


Demo: http://v2v.cc/~j/jquery.srt/
Audio Descriptions
Demo:
http://au.youtube.com/watch?v=i2VXp0s0BLw

Textual audio descriptions:
• Run screenreader
• http://www.annodex.net/~silvia/itext/elephant
  _no_skin_v2.html
• http://www.annodex.net/~silvia/itext/elephant
  s_dream/audiodescription.srt
Ogg Kate
• Encapsulated text in Ogg
• ffmpeg2theora or kateence/oggz-merge:
 ▫ Run “kateenc -t elephants_dream_1024.srt -l en -
   c SUB -o elephants_dream_1024.ogx”
 ▫ Run “oggz-merge elephants_dream_1024.ogx
   elephants_dream_1024.ogv -o
   elephants_dream_1024_merged.ogv”

Demo: Firefox with Kate support (hack)
Ogg Theora with Kate in Cortado
<applet
code="com.fluendo.player.Cortado.class"
archive="cortado.jar"
        width="512" height="288">
    <param name="url" value="video.ogv"/>
    <param name="kateLanguage" value="en">
</applet>


page8.html – test in IE on Win
http://people.xiph.org/~oggk/elephants_dream/elephantsdream.html
In-Browser HTML5 video editing




http://sandbox.kaltura.com/testwiki/js2/mwEmb
ed/example_usage/Sequence_Editor.html
Other HTML5 Demos
• Video and SVG:
  ▫ http://www.double.co.nz/video_test/video.svg
  ▫ http://people.mozilla.com/~prouget/demos/DynamicContentInj
    ection/play.xhtml

• Video and CSS Transforms:
  ▫ http://www.zachstronaut.com/lab/isocube.html
  ▫ http://people.mozilla.com/~prouget/demos/round/index.xhtml
  ▫ http://hacks.mozilla.org/2009/07/video-more-than-just-a-tag/

• Replace background with image
  ▫ http://people.mozilla.com/~prouget/demos/green/green.xhtml
References
• http://en.flossmanuals.net/TheoraCookbook/
• http://commons.wikimedia.org/wiki/Help:Conv
  erting_video
• http://free-
  electrons.com/community/videos/mini-howto/
• http://planet.xiph.org/
• http://gov2.net.au/projects/project-18/

More Related Content

What's hot

JS Days HTML5 Flash and the Battle for Faster Cat Videos
JS Days HTML5 Flash and the Battle for Faster Cat VideosJS Days HTML5 Flash and the Battle for Faster Cat Videos
JS Days HTML5 Flash and the Battle for Faster Cat Videos
Greg Schechter
 
HTML5, Flash, and the Battle For Faster Cat Videos
HTML5, Flash, and the Battle For Faster Cat VideosHTML5, Flash, and the Battle For Faster Cat Videos
HTML5, Flash, and the Battle For Faster Cat Videos
Greg Schechter
 
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
 
Developer Training for 23 Video
Developer Training for 23 VideoDeveloper Training for 23 Video
Developer Training for 23 Video
Steffen
 
Zend con 2016 bdd with behat for beginners
Zend con 2016   bdd with behat for beginnersZend con 2016   bdd with behat for beginners
Zend con 2016 bdd with behat for beginners
Adam Englander
 
Composer - The missing package manager for PHP
Composer - The missing package manager for PHPComposer - The missing package manager for PHP
Composer - The missing package manager for PHP
Tareq Hasan
 
OSDC 2008 talk: An open source "YouTube"
OSDC 2008 talk:  An open source "YouTube"OSDC 2008 talk:  An open source "YouTube"
OSDC 2008 talk: An open source "YouTube"
Silvia Pfeiffer
 
'THE AGE OF DATA STREAMING' by DENIS BURYACHKOVSKY at OdessaJS'2020
'THE AGE OF DATA STREAMING' by DENIS BURYACHKOVSKY at OdessaJS'2020'THE AGE OF DATA STREAMING' by DENIS BURYACHKOVSKY at OdessaJS'2020
'THE AGE OF DATA STREAMING' by DENIS BURYACHKOVSKY at OdessaJS'2020
OdessaJS Conf
 
HTML5 Real-Time and Connectivity
HTML5 Real-Time and ConnectivityHTML5 Real-Time and Connectivity
HTML5 Real-Time and Connectivity
Peter Lubbers
 
Upgrade to HTML5 Video
Upgrade to HTML5 VideoUpgrade to HTML5 Video
Upgrade to HTML5 Video
steveheffernan
 
Os Paesdosreistutorial
Os PaesdosreistutorialOs Paesdosreistutorial
Os Paesdosreistutorial
oscon2007
 
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
 
Compile time dependency injection in Play 2.4 with macwire
Compile time dependency injection in Play 2.4 with macwireCompile time dependency injection in Play 2.4 with macwire
Compile time dependency injection in Play 2.4 with macwire
yann_s
 
Visual Regression Testing: In search of an Ember solution
Visual Regression Testing: In search of an Ember solutionVisual Regression Testing: In search of an Ember solution
Visual Regression Testing: In search of an Ember solution
Lisa Backer
 
Take home your very own free Vagrant CFML Dev Environment - Presented at dev....
Take home your very own free Vagrant CFML Dev Environment - Presented at dev....Take home your very own free Vagrant CFML Dev Environment - Presented at dev....
Take home your very own free Vagrant CFML Dev Environment - Presented at dev....
Gavin Pickin
 
Structure your Play application with the cake pattern (and test it)
Structure your Play application with the cake pattern (and test it)Structure your Play application with the cake pattern (and test it)
Structure your Play application with the cake pattern (and test it)
yann_s
 
HTML5 Design
HTML5 DesignHTML5 Design
HTML5 Design
Christopher Schmitt
 
Modern Web Application Development Workflow - web2day 2014
Modern Web Application Development Workflow - web2day 2014Modern Web Application Development Workflow - web2day 2014
Modern Web Application Development Workflow - web2day 2014
Stéphane Bégaudeau
 
CollabSphere 2018 - Java in Domino After XPages
CollabSphere 2018 - Java in Domino After XPagesCollabSphere 2018 - Java in Domino After XPages
CollabSphere 2018 - Java in Domino After XPages
Jesse Gallagher
 
Things I wished I knew before building my first WebRTC app - RTE2020
Things I wished I knew before building my first WebRTC app - RTE2020Things I wished I knew before building my first WebRTC app - RTE2020
Things I wished I knew before building my first WebRTC app - RTE2020
Alberto González Trastoy
 

What's hot (20)

JS Days HTML5 Flash and the Battle for Faster Cat Videos
JS Days HTML5 Flash and the Battle for Faster Cat VideosJS Days HTML5 Flash and the Battle for Faster Cat Videos
JS Days HTML5 Flash and the Battle for Faster Cat Videos
 
HTML5, Flash, and the Battle For Faster Cat Videos
HTML5, Flash, and the Battle For Faster Cat VideosHTML5, Flash, and the Battle For Faster Cat Videos
HTML5, Flash, and the Battle For Faster Cat Videos
 
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
 
Developer Training for 23 Video
Developer Training for 23 VideoDeveloper Training for 23 Video
Developer Training for 23 Video
 
Zend con 2016 bdd with behat for beginners
Zend con 2016   bdd with behat for beginnersZend con 2016   bdd with behat for beginners
Zend con 2016 bdd with behat for beginners
 
Composer - The missing package manager for PHP
Composer - The missing package manager for PHPComposer - The missing package manager for PHP
Composer - The missing package manager for PHP
 
OSDC 2008 talk: An open source "YouTube"
OSDC 2008 talk:  An open source "YouTube"OSDC 2008 talk:  An open source "YouTube"
OSDC 2008 talk: An open source "YouTube"
 
'THE AGE OF DATA STREAMING' by DENIS BURYACHKOVSKY at OdessaJS'2020
'THE AGE OF DATA STREAMING' by DENIS BURYACHKOVSKY at OdessaJS'2020'THE AGE OF DATA STREAMING' by DENIS BURYACHKOVSKY at OdessaJS'2020
'THE AGE OF DATA STREAMING' by DENIS BURYACHKOVSKY at OdessaJS'2020
 
HTML5 Real-Time and Connectivity
HTML5 Real-Time and ConnectivityHTML5 Real-Time and Connectivity
HTML5 Real-Time and Connectivity
 
Upgrade to HTML5 Video
Upgrade to HTML5 VideoUpgrade to HTML5 Video
Upgrade to HTML5 Video
 
Os Paesdosreistutorial
Os PaesdosreistutorialOs Paesdosreistutorial
Os Paesdosreistutorial
 
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 /...
 
Compile time dependency injection in Play 2.4 with macwire
Compile time dependency injection in Play 2.4 with macwireCompile time dependency injection in Play 2.4 with macwire
Compile time dependency injection in Play 2.4 with macwire
 
Visual Regression Testing: In search of an Ember solution
Visual Regression Testing: In search of an Ember solutionVisual Regression Testing: In search of an Ember solution
Visual Regression Testing: In search of an Ember solution
 
Take home your very own free Vagrant CFML Dev Environment - Presented at dev....
Take home your very own free Vagrant CFML Dev Environment - Presented at dev....Take home your very own free Vagrant CFML Dev Environment - Presented at dev....
Take home your very own free Vagrant CFML Dev Environment - Presented at dev....
 
Structure your Play application with the cake pattern (and test it)
Structure your Play application with the cake pattern (and test it)Structure your Play application with the cake pattern (and test it)
Structure your Play application with the cake pattern (and test it)
 
HTML5 Design
HTML5 DesignHTML5 Design
HTML5 Design
 
Modern Web Application Development Workflow - web2day 2014
Modern Web Application Development Workflow - web2day 2014Modern Web Application Development Workflow - web2day 2014
Modern Web Application Development Workflow - web2day 2014
 
CollabSphere 2018 - Java in Domino After XPages
CollabSphere 2018 - Java in Domino After XPagesCollabSphere 2018 - Java in Domino After XPages
CollabSphere 2018 - Java in Domino After XPages
 
Things I wished I knew before building my first WebRTC app - RTE2020
Things I wished I knew before building my first WebRTC app - RTE2020Things I wished I knew before building my first WebRTC app - RTE2020
Things I wished I knew before building my first WebRTC app - RTE2020
 

Viewers also liked

Native vs. Mobile Web vs. Hybrid Apps for Mobile Development
Native vs. Mobile Web vs. Hybrid Apps for Mobile DevelopmentNative vs. Mobile Web vs. Hybrid Apps for Mobile Development
Native vs. Mobile Web vs. Hybrid Apps for Mobile Development
Jason Grigsby
 
FXML for Structure, CSS for Styling and JavaFX as Standard GUI Library
FXML for Structure, CSS for Styling and JavaFX as Standard GUI LibraryFXML for Structure, CSS for Styling and JavaFX as Standard GUI Library
FXML for Structure, CSS for Styling and JavaFX as Standard GUI Library
Yuichi Sakuraba
 
Google html5 Tutorial
Google html5 TutorialGoogle html5 Tutorial
Google html5 Tutorial
jobfan
 
Introducción a los Frameworks CSS
Introducción a los Frameworks CSSIntroducción a los Frameworks CSS
Introducción a los Frameworks CSS
Luis Miguel Martín
 
0 entorno php
0 entorno php0 entorno php
0 entorno php
Carlos A. Iglesias
 
Entorno PHP
Entorno PHPEntorno PHP
Entorno PHP
Carlos A. Iglesias
 
Internet Ice091117
Internet Ice091117Internet Ice091117
Internet Ice091117
Juan Quemada
 
Vishub description Global Excursion
Vishub description Global ExcursionVishub description Global Excursion
Vishub description Global Excursion
Juan Quemada
 
Herramientas para el desarrollo en plataformas móviles web
Herramientas para el desarrollo en plataformas móviles   webHerramientas para el desarrollo en plataformas móviles   web
Herramientas para el desarrollo en plataformas móviles web
joycesita
 
Arquitectura del Web 2
Arquitectura del Web 2Arquitectura del Web 2
Arquitectura del Web 2
Juan Quemada
 
Presentación TEWC
Presentación TEWCPresentación TEWC
Presentación TEWC
Carlos A. Iglesias
 
Introducción CSS
Introducción CSSIntroducción CSS
Introducción CSS
Carlos A. Iglesias
 
CSS
CSSCSS
Isabel: Reuniones, Clases y Congresos a través de Internet
Isabel: Reuniones, Clases y Congresos a través de InternetIsabel: Reuniones, Clases y Congresos a través de Internet
Isabel: Reuniones, Clases y Congresos a través de Internet
Juan Quemada
 
Fundamentos de CSS
Fundamentos de CSSFundamentos de CSS
Fundamentos de CSS
Nicolas Navarro Rincón
 
Empresa 2.0
Empresa 2.0Empresa 2.0
Empresa 2.0
Juan Quemada
 
Nuevos retos de Internet: Movilidad y Cloud Computing
Nuevos retos de Internet: Movilidad y Cloud ComputingNuevos retos de Internet: Movilidad y Cloud Computing
Nuevos retos de Internet: Movilidad y Cloud Computing
Juan Quemada
 
Human Interaction, Social Protocols and Collaborative Applications
Human Interaction, Social Protocols and Collaborative ApplicationsHuman Interaction, Social Protocols and Collaborative Applications
Human Interaction, Social Protocols and Collaborative Applications
Juan Quemada
 
Java Swing Custom GUI MVC Component Tutorial
Java Swing Custom GUI MVC Component TutorialJava Swing Custom GUI MVC Component Tutorial
Java Swing Custom GUI MVC Component Tutorial
Sagun Dhakhwa
 
Ahmad sameer types of computer
Ahmad sameer types of computerAhmad sameer types of computer
Ahmad sameer types of computer
Sameer Nawab
 

Viewers also liked (20)

Native vs. Mobile Web vs. Hybrid Apps for Mobile Development
Native vs. Mobile Web vs. Hybrid Apps for Mobile DevelopmentNative vs. Mobile Web vs. Hybrid Apps for Mobile Development
Native vs. Mobile Web vs. Hybrid Apps for Mobile Development
 
FXML for Structure, CSS for Styling and JavaFX as Standard GUI Library
FXML for Structure, CSS for Styling and JavaFX as Standard GUI LibraryFXML for Structure, CSS for Styling and JavaFX as Standard GUI Library
FXML for Structure, CSS for Styling and JavaFX as Standard GUI Library
 
Google html5 Tutorial
Google html5 TutorialGoogle html5 Tutorial
Google html5 Tutorial
 
Introducción a los Frameworks CSS
Introducción a los Frameworks CSSIntroducción a los Frameworks CSS
Introducción a los Frameworks CSS
 
0 entorno php
0 entorno php0 entorno php
0 entorno php
 
Entorno PHP
Entorno PHPEntorno PHP
Entorno PHP
 
Internet Ice091117
Internet Ice091117Internet Ice091117
Internet Ice091117
 
Vishub description Global Excursion
Vishub description Global ExcursionVishub description Global Excursion
Vishub description Global Excursion
 
Herramientas para el desarrollo en plataformas móviles web
Herramientas para el desarrollo en plataformas móviles   webHerramientas para el desarrollo en plataformas móviles   web
Herramientas para el desarrollo en plataformas móviles web
 
Arquitectura del Web 2
Arquitectura del Web 2Arquitectura del Web 2
Arquitectura del Web 2
 
Presentación TEWC
Presentación TEWCPresentación TEWC
Presentación TEWC
 
Introducción CSS
Introducción CSSIntroducción CSS
Introducción CSS
 
CSS
CSSCSS
CSS
 
Isabel: Reuniones, Clases y Congresos a través de Internet
Isabel: Reuniones, Clases y Congresos a través de InternetIsabel: Reuniones, Clases y Congresos a través de Internet
Isabel: Reuniones, Clases y Congresos a través de Internet
 
Fundamentos de CSS
Fundamentos de CSSFundamentos de CSS
Fundamentos de CSS
 
Empresa 2.0
Empresa 2.0Empresa 2.0
Empresa 2.0
 
Nuevos retos de Internet: Movilidad y Cloud Computing
Nuevos retos de Internet: Movilidad y Cloud ComputingNuevos retos de Internet: Movilidad y Cloud Computing
Nuevos retos de Internet: Movilidad y Cloud Computing
 
Human Interaction, Social Protocols and Collaborative Applications
Human Interaction, Social Protocols and Collaborative ApplicationsHuman Interaction, Social Protocols and Collaborative Applications
Human Interaction, Social Protocols and Collaborative Applications
 
Java Swing Custom GUI MVC Component Tutorial
Java Swing Custom GUI MVC Component TutorialJava Swing Custom GUI MVC Component Tutorial
Java Swing Custom GUI MVC Component Tutorial
 
Ahmad sameer types of computer
Ahmad sameer types of computerAhmad sameer types of computer
Ahmad sameer types of computer
 

Similar to Html5 Open Video Tutorial

HTML5 Video Presentation
HTML5 Video PresentationHTML5 Video Presentation
HTML5 Video Presentation
sith33
 
GDD HTML5, Flash, and the Battle for Faster Cat Videos
GDD HTML5, Flash, and the Battle for Faster Cat VideosGDD HTML5, Flash, and the Battle for Faster Cat Videos
GDD HTML5, Flash, and the Battle for Faster Cat Videos
Greg Schechter
 
Internet Archive Video Presentation
Internet Archive Video Presentation Internet Archive Video Presentation
Internet Archive Video Presentation
tracey jaquith
 
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
 
(WS11) Dobrica Pavlinušić: HTML5TV - kako obraditi i objaviti predavanja na w...
(WS11) Dobrica Pavlinušić: HTML5TV - kako obraditi i objaviti predavanja na w...(WS11) Dobrica Pavlinušić: HTML5TV - kako obraditi i objaviti predavanja na w...
(WS11) Dobrica Pavlinušić: HTML5TV - kako obraditi i objaviti predavanja na w...
Web::Strategija
 
Building a Video Encoding Pipeline at The New York Times
Building a Video Encoding Pipeline at The New York TimesBuilding a Video Encoding Pipeline at The New York Times
Building a Video Encoding Pipeline at The New York Times
Maxwell Dayvson Da Silva
 
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
 
Building a Video Encoding Pipeline at The New York Times
Building a Video Encoding Pipeline at The New York TimesBuilding a Video Encoding Pipeline at The New York Times
Building a Video Encoding Pipeline at The New York Times
Flávio Ribeiro
 
Html5video
Html5videoHtml5video
Html5video
benwilkins
 
Html 5
Html 5Html 5
Html 5
Nguyen Quang
 
Looking into HTML5 + CSS3
Looking into HTML5 + CSS3Looking into HTML5 + CSS3
Looking into HTML5 + CSS3
Christopher Schmitt
 
Lunch and Learn - FFmpeg
Lunch and Learn - FFmpegLunch and Learn - FFmpeg
Lunch and Learn - FFmpeg
Nuruddin Ashr
 
HTML5 Multimedia Streaming
HTML5 Multimedia StreamingHTML5 Multimedia Streaming
HTML5 Multimedia Streaming
EDINA, University of Edinburgh
 
Html5 intro
Html5 introHtml5 intro
Html5 intro
Kevin DeRudder
 
Internet Archive at Open Video Conference 2009
Internet Archive at Open Video Conference 2009Internet Archive at Open Video Conference 2009
Internet Archive at Open Video Conference 2009
tracey jaquith
 
HTML5 video & Amazon elastic transcoder - FCIP August 2014
HTML5 video & Amazon elastic transcoder - FCIP August 2014HTML5 video & Amazon elastic transcoder - FCIP August 2014
HTML5 video & Amazon elastic transcoder - FCIP August 2014
RZasadzinski
 
Intro to Compression: Audio and Video Optimization for Learning
Intro to Compression: Audio and Video Optimization for LearningIntro to Compression: Audio and Video Optimization for Learning
Intro to Compression: Audio and Video Optimization for Learning
Nick Floro
 
Screencasting
ScreencastingScreencasting
Screencasting
Rex Tsai
 
Adobe HTTP Streaming
Adobe HTTP StreamingAdobe HTTP Streaming
Adobe HTTP Streaming
Yoss Cohen
 
Craft 2019 - “The Upside Down” Of The Web - Video technologies
Craft 2019 - “The Upside Down” Of The Web - Video technologiesCraft 2019 - “The Upside Down” Of The Web - Video technologies
Craft 2019 - “The Upside Down” Of The Web - Video technologies
Máté Nádasdi
 

Similar to Html5 Open Video Tutorial (20)

HTML5 Video Presentation
HTML5 Video PresentationHTML5 Video Presentation
HTML5 Video Presentation
 
GDD HTML5, Flash, and the Battle for Faster Cat Videos
GDD HTML5, Flash, and the Battle for Faster Cat VideosGDD HTML5, Flash, and the Battle for Faster Cat Videos
GDD HTML5, Flash, and the Battle for Faster Cat Videos
 
Internet Archive Video Presentation
Internet Archive Video Presentation Internet Archive Video Presentation
Internet Archive Video Presentation
 
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
 
(WS11) Dobrica Pavlinušić: HTML5TV - kako obraditi i objaviti predavanja na w...
(WS11) Dobrica Pavlinušić: HTML5TV - kako obraditi i objaviti predavanja na w...(WS11) Dobrica Pavlinušić: HTML5TV - kako obraditi i objaviti predavanja na w...
(WS11) Dobrica Pavlinušić: HTML5TV - kako obraditi i objaviti predavanja na w...
 
Building a Video Encoding Pipeline at The New York Times
Building a Video Encoding Pipeline at The New York TimesBuilding a Video Encoding Pipeline at The New York Times
Building a Video Encoding Pipeline at The New York Times
 
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
 
Building a Video Encoding Pipeline at The New York Times
Building a Video Encoding Pipeline at The New York TimesBuilding a Video Encoding Pipeline at The New York Times
Building a Video Encoding Pipeline at The New York Times
 
Html5video
Html5videoHtml5video
Html5video
 
Html 5
Html 5Html 5
Html 5
 
Looking into HTML5 + CSS3
Looking into HTML5 + CSS3Looking into HTML5 + CSS3
Looking into HTML5 + CSS3
 
Lunch and Learn - FFmpeg
Lunch and Learn - FFmpegLunch and Learn - FFmpeg
Lunch and Learn - FFmpeg
 
HTML5 Multimedia Streaming
HTML5 Multimedia StreamingHTML5 Multimedia Streaming
HTML5 Multimedia Streaming
 
Html5 intro
Html5 introHtml5 intro
Html5 intro
 
Internet Archive at Open Video Conference 2009
Internet Archive at Open Video Conference 2009Internet Archive at Open Video Conference 2009
Internet Archive at Open Video Conference 2009
 
HTML5 video & Amazon elastic transcoder - FCIP August 2014
HTML5 video & Amazon elastic transcoder - FCIP August 2014HTML5 video & Amazon elastic transcoder - FCIP August 2014
HTML5 video & Amazon elastic transcoder - FCIP August 2014
 
Intro to Compression: Audio and Video Optimization for Learning
Intro to Compression: Audio and Video Optimization for LearningIntro to Compression: Audio and Video Optimization for Learning
Intro to Compression: Audio and Video Optimization for Learning
 
Screencasting
ScreencastingScreencasting
Screencasting
 
Adobe HTTP Streaming
Adobe HTTP StreamingAdobe HTTP Streaming
Adobe HTTP Streaming
 
Craft 2019 - “The Upside Down” Of The Web - Video technologies
Craft 2019 - “The Upside Down” Of The Web - Video technologiesCraft 2019 - “The Upside Down” Of The Web - Video technologies
Craft 2019 - “The Upside Down” Of The Web - Video technologies
 

More from Silvia Pfeiffer

Asymmetrical Interfaces in Telehealth
Asymmetrical Interfaces in TelehealthAsymmetrical Interfaces in Telehealth
Asymmetrical Interfaces in Telehealth
Silvia Pfeiffer
 
WebRTC beyond Audio and Video
WebRTC beyond Audio and Video  WebRTC beyond Audio and Video
WebRTC beyond Audio and Video
Silvia Pfeiffer
 
Video Accessibility HTML5
Video Accessibility HTML5Video Accessibility HTML5
Video Accessibility HTML5
Silvia Pfeiffer
 
Scaling a Social Media Campaign
Scaling a Social Media CampaignScaling a Social Media Campaign
Scaling a Social Media Campaign
Silvia Pfeiffer
 
Nsw Public Sphere1: Video for Politicians and Government
Nsw Public Sphere1: Video for Politicians and GovernmentNsw Public Sphere1: Video for Politicians and Government
Nsw Public Sphere1: Video for Politicians and Government
Silvia Pfeiffer
 
Public Sphere3: ICT innovation is easy - commercialisation is hard
Public Sphere3: ICT innovation is easy - commercialisation is hardPublic Sphere3: ICT innovation is easy - commercialisation is hard
Public Sphere3: ICT innovation is easy - commercialisation is hard
Silvia Pfeiffer
 
Open Video Conference: HTML and the video tag
Open Video Conference: HTML and the video tagOpen Video Conference: HTML and the video tag
Open Video Conference: HTML and the video tag
Silvia Pfeiffer
 
Launch VQmetrics
Launch VQmetricsLaunch VQmetrics
Launch VQmetrics
Silvia Pfeiffer
 
OSDC 2009, Metavidwiki: when you need a web video solution
OSDC 2009, Metavidwiki: when you need a web video solutionOSDC 2009, Metavidwiki: when you need a web video solution
OSDC 2009, Metavidwiki: when you need a web video solution
Silvia Pfeiffer
 

More from Silvia Pfeiffer (9)

Asymmetrical Interfaces in Telehealth
Asymmetrical Interfaces in TelehealthAsymmetrical Interfaces in Telehealth
Asymmetrical Interfaces in Telehealth
 
WebRTC beyond Audio and Video
WebRTC beyond Audio and Video  WebRTC beyond Audio and Video
WebRTC beyond Audio and Video
 
Video Accessibility HTML5
Video Accessibility HTML5Video Accessibility HTML5
Video Accessibility HTML5
 
Scaling a Social Media Campaign
Scaling a Social Media CampaignScaling a Social Media Campaign
Scaling a Social Media Campaign
 
Nsw Public Sphere1: Video for Politicians and Government
Nsw Public Sphere1: Video for Politicians and GovernmentNsw Public Sphere1: Video for Politicians and Government
Nsw Public Sphere1: Video for Politicians and Government
 
Public Sphere3: ICT innovation is easy - commercialisation is hard
Public Sphere3: ICT innovation is easy - commercialisation is hardPublic Sphere3: ICT innovation is easy - commercialisation is hard
Public Sphere3: ICT innovation is easy - commercialisation is hard
 
Open Video Conference: HTML and the video tag
Open Video Conference: HTML and the video tagOpen Video Conference: HTML and the video tag
Open Video Conference: HTML and the video tag
 
Launch VQmetrics
Launch VQmetricsLaunch VQmetrics
Launch VQmetrics
 
OSDC 2009, Metavidwiki: when you need a web video solution
OSDC 2009, Metavidwiki: when you need a web video solutionOSDC 2009, Metavidwiki: when you need a web video solution
OSDC 2009, Metavidwiki: when you need a web video solution
 

Recently uploaded

“Building and Scaling AI Applications with the Nx AI Manager,” a Presentation...
“Building and Scaling AI Applications with the Nx AI Manager,” a Presentation...“Building and Scaling AI Applications with the Nx AI Manager,” a Presentation...
“Building and Scaling AI Applications with the Nx AI Manager,” a Presentation...
Edge AI and Vision Alliance
 
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
名前 です男
 
Infrastructure Challenges in Scaling RAG with Custom AI models
Infrastructure Challenges in Scaling RAG with Custom AI modelsInfrastructure Challenges in Scaling RAG with Custom AI models
Infrastructure Challenges in Scaling RAG with Custom AI models
Zilliz
 
Presentation of the OECD Artificial Intelligence Review of Germany
Presentation of the OECD Artificial Intelligence Review of GermanyPresentation of the OECD Artificial Intelligence Review of Germany
Presentation of the OECD Artificial Intelligence Review of Germany
innovationoecd
 
National Security Agency - NSA mobile device best practices
National Security Agency - NSA mobile device best practicesNational Security Agency - NSA mobile device best practices
National Security Agency - NSA mobile device best practices
Quotidiano Piemontese
 
How to Get CNIC Information System with Paksim Ga.pptx
How to Get CNIC Information System with Paksim Ga.pptxHow to Get CNIC Information System with Paksim Ga.pptx
How to Get CNIC Information System with Paksim Ga.pptx
danishmna97
 
Programming Foundation Models with DSPy - Meetup Slides
Programming Foundation Models with DSPy - Meetup SlidesProgramming Foundation Models with DSPy - Meetup Slides
Programming Foundation Models with DSPy - Meetup Slides
Zilliz
 
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAUHCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
panagenda
 
Uni Systems Copilot event_05062024_C.Vlachos.pdf
Uni Systems Copilot event_05062024_C.Vlachos.pdfUni Systems Copilot event_05062024_C.Vlachos.pdf
Uni Systems Copilot event_05062024_C.Vlachos.pdf
Uni Systems S.M.S.A.
 
Driving Business Innovation: Latest Generative AI Advancements & Success Story
Driving Business Innovation: Latest Generative AI Advancements & Success StoryDriving Business Innovation: Latest Generative AI Advancements & Success Story
Driving Business Innovation: Latest Generative AI Advancements & Success Story
Safe Software
 
Let's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with Slack
Let's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with SlackLet's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with Slack
Let's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with Slack
shyamraj55
 
20240605 QFM017 Machine Intelligence Reading List May 2024
20240605 QFM017 Machine Intelligence Reading List May 202420240605 QFM017 Machine Intelligence Reading List May 2024
20240605 QFM017 Machine Intelligence Reading List May 2024
Matthew Sinclair
 
Climate Impact of Software Testing at Nordic Testing Days
Climate Impact of Software Testing at Nordic Testing DaysClimate Impact of Software Testing at Nordic Testing Days
Climate Impact of Software Testing at Nordic Testing Days
Kari Kakkonen
 
AI 101: An Introduction to the Basics and Impact of Artificial Intelligence
AI 101: An Introduction to the Basics and Impact of Artificial IntelligenceAI 101: An Introduction to the Basics and Impact of Artificial Intelligence
AI 101: An Introduction to the Basics and Impact of Artificial Intelligence
IndexBug
 
Artificial Intelligence for XMLDevelopment
Artificial Intelligence for XMLDevelopmentArtificial Intelligence for XMLDevelopment
Artificial Intelligence for XMLDevelopment
Octavian Nadolu
 
CAKE: Sharing Slices of Confidential Data on Blockchain
CAKE: Sharing Slices of Confidential Data on BlockchainCAKE: Sharing Slices of Confidential Data on Blockchain
CAKE: Sharing Slices of Confidential Data on Blockchain
Claudio Di Ciccio
 
Essentials of Automations: The Art of Triggers and Actions in FME
Essentials of Automations: The Art of Triggers and Actions in FMEEssentials of Automations: The Art of Triggers and Actions in FME
Essentials of Automations: The Art of Triggers and Actions in FME
Safe Software
 
“I’m still / I’m still / Chaining from the Block”
“I’m still / I’m still / Chaining from the Block”“I’m still / I’m still / Chaining from the Block”
“I’m still / I’m still / Chaining from the Block”
Claudio Di Ciccio
 
HCL Notes and Domino License Cost Reduction in the World of DLAU
HCL Notes and Domino License Cost Reduction in the World of DLAUHCL Notes and Domino License Cost Reduction in the World of DLAU
HCL Notes and Domino License Cost Reduction in the World of DLAU
panagenda
 
Serial Arm Control in Real Time Presentation
Serial Arm Control in Real Time PresentationSerial Arm Control in Real Time Presentation
Serial Arm Control in Real Time Presentation
tolgahangng
 

Recently uploaded (20)

“Building and Scaling AI Applications with the Nx AI Manager,” a Presentation...
“Building and Scaling AI Applications with the Nx AI Manager,” a Presentation...“Building and Scaling AI Applications with the Nx AI Manager,” a Presentation...
“Building and Scaling AI Applications with the Nx AI Manager,” a Presentation...
 
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
 
Infrastructure Challenges in Scaling RAG with Custom AI models
Infrastructure Challenges in Scaling RAG with Custom AI modelsInfrastructure Challenges in Scaling RAG with Custom AI models
Infrastructure Challenges in Scaling RAG with Custom AI models
 
Presentation of the OECD Artificial Intelligence Review of Germany
Presentation of the OECD Artificial Intelligence Review of GermanyPresentation of the OECD Artificial Intelligence Review of Germany
Presentation of the OECD Artificial Intelligence Review of Germany
 
National Security Agency - NSA mobile device best practices
National Security Agency - NSA mobile device best practicesNational Security Agency - NSA mobile device best practices
National Security Agency - NSA mobile device best practices
 
How to Get CNIC Information System with Paksim Ga.pptx
How to Get CNIC Information System with Paksim Ga.pptxHow to Get CNIC Information System with Paksim Ga.pptx
How to Get CNIC Information System with Paksim Ga.pptx
 
Programming Foundation Models with DSPy - Meetup Slides
Programming Foundation Models with DSPy - Meetup SlidesProgramming Foundation Models with DSPy - Meetup Slides
Programming Foundation Models with DSPy - Meetup Slides
 
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAUHCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
 
Uni Systems Copilot event_05062024_C.Vlachos.pdf
Uni Systems Copilot event_05062024_C.Vlachos.pdfUni Systems Copilot event_05062024_C.Vlachos.pdf
Uni Systems Copilot event_05062024_C.Vlachos.pdf
 
Driving Business Innovation: Latest Generative AI Advancements & Success Story
Driving Business Innovation: Latest Generative AI Advancements & Success StoryDriving Business Innovation: Latest Generative AI Advancements & Success Story
Driving Business Innovation: Latest Generative AI Advancements & Success Story
 
Let's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with Slack
Let's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with SlackLet's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with Slack
Let's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with Slack
 
20240605 QFM017 Machine Intelligence Reading List May 2024
20240605 QFM017 Machine Intelligence Reading List May 202420240605 QFM017 Machine Intelligence Reading List May 2024
20240605 QFM017 Machine Intelligence Reading List May 2024
 
Climate Impact of Software Testing at Nordic Testing Days
Climate Impact of Software Testing at Nordic Testing DaysClimate Impact of Software Testing at Nordic Testing Days
Climate Impact of Software Testing at Nordic Testing Days
 
AI 101: An Introduction to the Basics and Impact of Artificial Intelligence
AI 101: An Introduction to the Basics and Impact of Artificial IntelligenceAI 101: An Introduction to the Basics and Impact of Artificial Intelligence
AI 101: An Introduction to the Basics and Impact of Artificial Intelligence
 
Artificial Intelligence for XMLDevelopment
Artificial Intelligence for XMLDevelopmentArtificial Intelligence for XMLDevelopment
Artificial Intelligence for XMLDevelopment
 
CAKE: Sharing Slices of Confidential Data on Blockchain
CAKE: Sharing Slices of Confidential Data on BlockchainCAKE: Sharing Slices of Confidential Data on Blockchain
CAKE: Sharing Slices of Confidential Data on Blockchain
 
Essentials of Automations: The Art of Triggers and Actions in FME
Essentials of Automations: The Art of Triggers and Actions in FMEEssentials of Automations: The Art of Triggers and Actions in FME
Essentials of Automations: The Art of Triggers and Actions in FME
 
“I’m still / I’m still / Chaining from the Block”
“I’m still / I’m still / Chaining from the Block”“I’m still / I’m still / Chaining from the Block”
“I’m still / I’m still / Chaining from the Block”
 
HCL Notes and Domino License Cost Reduction in the World of DLAU
HCL Notes and Domino License Cost Reduction in the World of DLAUHCL Notes and Domino License Cost Reduction in the World of DLAU
HCL Notes and Domino License Cost Reduction in the World of DLAU
 
Serial Arm Control in Real Time Presentation
Serial Arm Control in Real Time PresentationSerial Arm Control in Real Time Presentation
Serial Arm Control in Real Time Presentation
 

Html5 Open Video Tutorial

  • 1. Tutorial: HTML5 video How to process and publish video in an open format Silvia Pfeiffer, Jan Gerber, Michael Dale
  • 2. Outline Part 1: Basics • Setup • State of Standardisation • Mediawiki/mwEmbed demo • Editing • Publish a HTML5 video • <video> Javascript API • Skinning • Tinyvid.tv demo
  • 3. Outline Part 2: Experts • Transcoding • Cross-Platform publishing • Pad.ma demo • Setting up a Site • Accessibility • In-browser video editing • Other HTML5 video demos
  • 5. Setup • Ogg tools: oggz-tools, oggvideotools https://launchpad.net/~theora/+archive/ppa • Web Server: Apache • Web Browser: Firefox 3.6+, Opera 10.10 https://launchpad.net/~ubuntu-mozilla-daily/+archive/ppa • Firefogg: http://firefogg.org/ • Firebug: http://getfirebug.com • Video Player: vlc, mplayer, totem, or xine • Video Editor: pitivi or kino Get content: http://mirror.conf.lca2010.org.nz/lca-html5-tut-videos.tar.gz
  • 6. State of Standardisation • HTML5 video and audio elements: http://www.whatwg.org/specs/web-apps/current-work/multipage/video.html • Media Fragments URI: http://www.w3.org/2008/WebVideo/Fragments/WD-media-fragments-spec/ • Media Annotations API: http://dev.w3.org/2008/video/mediaann/mediaont-api-1.0/mediaont-api-1.0.html • Timed Text: DFXP http://www.w3.org/TR/ttaf1-dfxp/
  • 7. Codecs in HTML5 Browsers • Ogg Theora/Vorbis: ▫ Firefox 3.5+ (liboggplay) ▫ Chrome (ffmpeg) ▫ Opera (gstreamer) • MPEG-4 H.264/AAC: ▫ Safari (QuickTime) ▫ Chrome (ffmpeg) ▫ Opera (gstreamer on Linux)
  • 8. Statistics of Browser support • Ogg support through HTML5: 26.66% = 21.4% (FireFox3.5+) + 5.26 (Chrome3.0+) • Ogg support through Cortado – Java plugin: 90% • Adobe Flash Browser plugin: 99% • Microsoft Silverlight Browser plugin: 48% • QuickTime Browser plugin: 15%
  • 9. State of Standardisation • HTML5 video and audio elements: http://www.whatwg.org/specs/web-apps/current-work/multipage/video.html • Media Fragments URI: http://www.w3.org/2008/WebVideo/Fragments/WD-media-fragments-spec/ • Media Annotations API: http://dev.w3.org/2008/video/mediaann/mediaont-api-1.0/mediaont-api-1.0.html • Timed Text: DFXP http://www.w3.org/TR/ttaf1-dfxp/
  • 10. Media Fragments URI Temporal: • http://www.example.com/video.ogv#t=10,20 Live streaming: • http://www.example.com/video.ogv#t=clock: 2009-07-26T11:19:01Z,2009-07-26T11:20:01Z Rectangular region: • http://www.example.com/video.ogv#xywh= 160,120,320,240 Track selection: • http://www.example.com/video.ogv #track=„video‟
  • 11. State of Standardisation • HTML5 video and audio elements: http://www.whatwg.org/specs/web-apps/current-work/multipage/video.html • Media Fragments URI: http://www.w3.org/2008/WebVideo/Fragments/WD-media-fragments-spec/ • Media Annotations API: http://dev.w3.org/2008/video/mediaann/mediaont-api-1.0/mediaont-api-1.0.html • Timed Text: DFXP http://www.w3.org/TR/ttaf1-dfxp/
  • 12. MediaAnn: API for metadata object[] getProperty( in DOMString propertyName, in optional DOMString sourceFormat, in optional DOMString subtype, in optional DOMString language, in optional DOMstring fragment );
  • 13. MediaAnn: Properties title: [“Video Stream”] language: [“de-AT”] (BCP47) locator: ["http://example.com/video.ogv"] contributor, creator, createDate, location, copyright, license, publisher, etc. frameSize: [3.072, 2.304] compression: [“Theora/Vorbis"] duration: [3600] format: [“video/ogg"]
  • 14. State of Standardisation • HTML5 video and audio elements: http://www.whatwg.org/specs/web-apps/current-work/multipage/video.html • Media Fragments URI: http://www.w3.org/2008/WebVideo/Fragments/WD-media-fragments-spec/ • Media Annotations API: http://dev.w3.org/2008/video/mediaann/mediaont-api-1.0/mediaont-api-1.0.html • Timed Text: DFXP http://www.w3.org/TR/ttaf1-dfxp/
  • 15. W3C Timed Text DFXP: Distribution Format Exchange Profile <tt xml:lang="" xmlns="http://www.w3.org/2006/10/ttaf1"> <head> <metadata/> <styling/> <layout/> </head> <body region="subtitleArea"> <div> <p xml:id="subtitle1" begin="0.76s" end="3.45s">It seems a paradox, does it not,</p> <p xml:id="subtitle2" begin="5.0s" end="10.0s">that the image formed on<br/>the Retina should be inverted?</p> </tt>
  • 16. Reminder: Setup • Ogg tools: oggz-tools, oggvideotools https://launchpad.net/~theora/+archive/ppa • Web Server: Apache • Web Browser: Firefox 3.6+, Opera 10.10 https://launchpad.net/~ubuntu-mozilla-daily/+archive/ppa • Firefogg: http://firefogg.org/ • Firebug: http://getfirebug.com • Video Player: vlc, mplayer, totem, or xine • Video Editor: pitivi or kino Get content: http://mirror.conf.lca2010.org.nz/lca-html5-tut-videos.tar.gz
  • 18. Editing • Kino or pitivi – take DV input, write Ogg ▫ Run kino on DVD_VR2.vob.dv ▫ Cut a small segment ▫ Export to Ogg ▫ Test in vlc, mplayer, or xine
  • 19. Prepare an Ogg Video • dvdrip, vobcopy – for DVDs to extract to DV (for editing) or mpeg • Thoggen – for DVDs to extract to Ogg Theora • dvgrab – for grabbing DV from a camera • oggSlideshow was used for foms2009.ogv • FFMpeg, ffmpeg2theora – transcode to Ogg ▫ Go to http://firefogg.org/make/ and transcode DougSchepers-W3C.mp4 or ninja_gameplay.mp4 • oggThumb, totem – get poster image
  • 20. Prepare a Web page: page1.html <!DOCTYPE html> <html lang="en"> <head> <title>W3C News</title> </head> <body> <h2>Doug Schepers: W3C and Twitter</h2> <video src="DougSchepers-W3C.ogv" poster="DougSchepers-W3C.png" controls> <p>Your browser does not support HTML5 Ogg video.</p> </video> </body> </html>
  • 21. Publish Page • Upload page1.html to apache ▫ Copy page1.html to /var/www/ ▫ Make sure, Web server serves .ogv as video/ogg mime type out of /etc/mime.types • Test in Firefox ▫ http://localhost/page1.html
  • 22. Server improvements • Improve speed: • create .htaccess file with: <Files "DougSchepers-W3C.ogv"> Header set X-Content-Duration “55.48" </Files> • Use oggz-info to find out duration • Improve seeking: • Install oggz-chop and set it up as cgi script ScriptAlias /oggz-chop /usr/bin/oggz-chop Action video/ogg /oggz-chop
  • 23. Publish in Ogg and MP4: page2.html <!DOCTYPE html> <html lang="en"> <head> <title>W3C News</title> </head> <body> <h2>Doug Schepers: W3C and Twitter</h2> <video poster="DougSchepers-W3C.png" controls> <source src="DougSchepers-W3C.ogv" type="video/ogg" /> <source src="DougSchepers-W3C.mp4" type="video/mp4" /> <p>Your browser does not support HTML5 Ogg video.</p> </video> </body> </html> Test in Safari/Webkit on Mac to play the MP4
  • 24. Javascript API of <video> • API functions: ▫ v = new Video([url]); ▫ void load(); ▫ void play(); ▫ void pause(); • Attributes e.g.: ▫ DOMString src / currentSrc ▫ float currenttime ▫ float volume ▫ boolean muted • skinning
  • 25. Skinned video player examples http://www.annodex.net/~ http://openvideo.daily- silvia/itext/elephant_wi motion.com/video/xbqpad_w th_skin.html allys-happy-place_fun
  • 28. Transcoding: what bitrates? • SD 240p (320x240 pixels, 4:3, CIF) – bitrate of 350Kbps to 500 Kbps • SD 480p (640x480 pixels, 4:3) – bitrate of 500Kbps to 1.5Mbps • HD 720p (1280x720 pixels, 16:9) – bitrate of 1 Mbps to 5Mbps • HD 1080p (1920x1080 pixels, 16:9) – bitrate of 2Mbps to 10Mbps 14Mbps Telstra “Next G” HSPA wireless network 24Mbps for ADSL+
  • 29. Transcoding: high quality choice • SD (4:3): 640x480 pixels, keep framerate, 1- 2Mbps • HD (16:9): 960x480 pixels, keep framerate, 1- 2Mbps • Audio: 44.1kHz+, stereo, 100-200Kbps Possibly publish a high and a low quality video, so users can choose
  • 30. ffmpeg2theora • Simple: ffmpeg2theora <file.dv> -> file.ogv • Live encoding from dv camcorder: dvgrab - | ffmpeg2theora -f dv -x 960 -y 480 -o output.ogv – • Interesting options: ▫ --two-pass ▫ --sync / --nosync ▫ --preset: ffmpeg2theora -p info ▫ Subtitles (see later) • recent builds at http://firefogg.org/nightly/
  • 31. Transcode script: transcode.sh tstart=$1 tend=$2 inputfile=$3 strdate=`date`; strorga="LCA"; strcopy="LCA 2010"; strlicense="Creative Commons BY SA 2.5"; strcommand="ffmpeg2theora -s $tstart -e $tstop --date '$strdate' --organization '$strorga' --copyright '$strcopy' --license '$strlicense' --sync $inputfile"
  • 32. Cross-Platform Video Publishing • Ogg works out of the box on ▫ Firefox 3.5+ ▫ Opera (latest beta 10.50) ▫ Chrome 3.0+ • Safari: install XiphQT or use cortado • IE: use cortado or vlc plugin (ActiveX control in development)
  • 33. Cortado Fallback: page3.html <video src="big_buck_bunny_480p_stereo.ogv" controls width="854" height="480"> <applet code="com.fluendo.player.Cortado.class" archive="http://theora.org/cortado.jar" width="854" height="480"> <param name="url" value="big_buck_bunny_480p_stereo.ogv"/> <param name="duration" value="596.458"/> </applet> </video> Run in IE on Windoze.
  • 34. Quicktime/Flash fallback • Video for Everybody ▫ Ogg ▫ Mp4 ▫ QuickTime plugin ▫ Flash plugin ▫ Error message • No Javascript necessary
  • 35. Video For Everybody: page4.html <video poster="videos/ninja_gameplay.jpg" controls> <source src="videos/ninja_gameplay.ogv" type="video/ogg" /> <source src="videos/ninja_gameplay.mp4" type="video/mp4" /> <!--[if gt IE 6]> <object width="640" height="375"><![endif]--> <!--[if !IE]><!--> <object width="640" height="375" type="video/quicktime" data="videos/ninja_gameplay.mp4"> <!--<![endif]--> <param name="src" value="videos/ninja_gameplay.mp4" /> <object width="640" height="380" type="application/x-shockwave- flash" data="http://www.vimeo.com/moogaloop_local.swf?clip_id=6716251"> <param name="movie" value="http://www.vimeo.com/moogaloop_local.swf?clip_id=6716251" /> <p>No video playback capabilities</p> </object><!--[if gt IE 6]><!--></object><!--<![endif]--> </video>
  • 36. Javascript Video Tag Rewrite Use ogv & mp4 video • Video4All: JS library • Flash fallback • mwEmbed: JS library ▫ Cortado, vlc ▫ Flash Fallback with Kaltura player ▫ ROE use ▫ Skinning with jQuery-ui ▫ Subtitle support
  • 37. mwEmbed example: page5.html <html> <head> <script type="text/javascript" src="http://firefogg.org/make/mwEmbed/mv_embed.js"></sc ript> </head> <body> <video durationHint="5“ poster=“thumb.jpg“ src=“video.ogv"></video> </body> </html> http://www.firefogg.org/make/mwEmbed/example_u sage/Player_Simple_Themable.html
  • 39. Setting up a Video Hosting Site • Cost of hosting video - consider: ▫ Storage cost ▫ Application sw: e.g. videobin.org, mediawiki ▫ Application integration with CMSes ▫ http://drupal.org/project/video ▫ videopress ▫ implement modules! ▫ Bandwidth needs ▫ Transcoding CPU needs
  • 40. External Theora hosting • archive.org • commons.wikimedia.org • tinyvid.tv • videobin.org (GPL v3) • oggify.com “External Embedding” enabled by default
  • 41. Firefogg: page6.html • Encoding and uploading at the same time, or • Sending a multipart POST request once encoding is done Nicer interface with progressbar: page7.html
  • 42. <script type="text/javascript"> var ogg = new Firefogg(); function transcode () { if(ogg.selectVideo()) { var options = JSON.stringify({'maxSize': 320, 'videoBitrate': 500}); ogg.encode(options); document.getElementById('message').innerHTML="please wait"; var transcodeStatus = function() { if(ogg.state == 'encoding') { setTimeout(transcodeStatus, 500); } else if (ogg.state == 'encoding done') { document.getElementById('message').innerHTML=“finished"; } } transcodeStatus(); } return false; } </script> <p id="message"></p> <a href="#" onclick="javascript:transcode()" >transcode file</a>
  • 43. Accessibility • Player keyboard access ▫ Tabbing ▫ Space ▫ Left/Right arrow (5 sec) ▫ Ctl-Left/Ctl-Right arrow (60sec) ▫ Home-Left/Home-Right (beginning/end) ▫ Volume up / down arrows
  • 44. Captions/Subtitles: srt example 1 00:00:15,000 --> 00:00:17,951 At the left we can see... 2 00:00:18,166 --> 00:00:20,083 At the right we can see the... 3 00:00:20,119 --> 00:00:21,962 ...the head-snarlers http://www.annodex.net/~silvia/itext/elephants_dream/elephant.engl ish-utf8.srt
  • 45. Sites that offer subtitles • OpenSubtitles.org: ▫ http://www.opensubtitles.org/en • DivX Subtitles: ▫ http://www.divxsubtitles.net/ • AllSubs.org: ▫ http://www.allsubs.org/
  • 46. Subtitle example with HTML5 <video src="elephants_dream.ogv" poster="elephants_dream.png" > <itextlist category="SUB"> <itext lang="af" charset="ISO-8859-1“ src="elephants_dream.afrikaans.srt“/> <itext lang="ar" charset="Windows-1256" src="elephants_dream.arabic.srt“/> <itext lang="bn" charset="UTF-8” src="elephants_dream.bangla.srt“/> </itextlist> </video> Demo: http://www.annodex.net/~silvia/itext/elephant_no_skin_v2.html Note: in process of standardisation
  • 47. Javascript subtitle approach <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.srt.js"></script> <video src="http://example.com/video.ogv" id="video" controls> </video> <div class="srt“ data-video="video" data-srt="http://example.com/video.srt" /> Demo: http://v2v.cc/~j/jquery.srt/
  • 48. Audio Descriptions Demo: http://au.youtube.com/watch?v=i2VXp0s0BLw Textual audio descriptions: • Run screenreader • http://www.annodex.net/~silvia/itext/elephant _no_skin_v2.html • http://www.annodex.net/~silvia/itext/elephant s_dream/audiodescription.srt
  • 49. Ogg Kate • Encapsulated text in Ogg • ffmpeg2theora or kateence/oggz-merge: ▫ Run “kateenc -t elephants_dream_1024.srt -l en - c SUB -o elephants_dream_1024.ogx” ▫ Run “oggz-merge elephants_dream_1024.ogx elephants_dream_1024.ogv -o elephants_dream_1024_merged.ogv” Demo: Firefox with Kate support (hack)
  • 50. Ogg Theora with Kate in Cortado <applet code="com.fluendo.player.Cortado.class" archive="cortado.jar" width="512" height="288"> <param name="url" value="video.ogv"/> <param name="kateLanguage" value="en"> </applet> page8.html – test in IE on Win http://people.xiph.org/~oggk/elephants_dream/elephantsdream.html
  • 51. In-Browser HTML5 video editing http://sandbox.kaltura.com/testwiki/js2/mwEmb ed/example_usage/Sequence_Editor.html
  • 52. Other HTML5 Demos • Video and SVG: ▫ http://www.double.co.nz/video_test/video.svg ▫ http://people.mozilla.com/~prouget/demos/DynamicContentInj ection/play.xhtml • Video and CSS Transforms: ▫ http://www.zachstronaut.com/lab/isocube.html ▫ http://people.mozilla.com/~prouget/demos/round/index.xhtml ▫ http://hacks.mozilla.org/2009/07/video-more-than-just-a-tag/ • Replace background with image ▫ http://people.mozilla.com/~prouget/demos/green/green.xhtml
  • 53. References • http://en.flossmanuals.net/TheoraCookbook/ • http://commons.wikimedia.org/wiki/Help:Conv erting_video • http://free- electrons.com/community/videos/mini-howto/ • http://planet.xiph.org/ • http://gov2.net.au/projects/project-18/