blog/When_web_browser_developers_make_a_video_player___.html

   1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   2           "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
   3 <html xmlns="http://www.w3.org/1999/xhtml" dir="ltr">
   4   <head>
   5     <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
   6     <title>Petter Reinholdtsen: When web browser developers make a video player...</title>
   7     <link rel="stylesheet" type="text/css" media="screen" href="http://people.skolelinux.org/pere/blog/style.css" />
   8     <link rel="stylesheet" type="text/css" media="screen" href="http://people.skolelinux.org/pere/blog/vim.css" />
   9   </head>
  10   <body>
  11     <div class="title">
  12  <h1>
  13      <a href="http://people.skolelinux.org/pere/blog/">Petter Reinholdtsen</a>
  14
  15  </h1>
  16
  17 </div>
  18
  19
  20     <div class="entry">
  21       <div class="title">When web browser developers make a video player...</div>
  22       <div class="date">17th January 2009</div>
  23       <div class="body"><p>As part of the work we do in <a href="http://www.nuug.no">NUUG</a>
  24 to publish video recordings of our monthly presentations, we provide a
  25 page with embedded video for easy access to the recording.  Putting a
  26 good set of HTML tags together to get working embedded video in all
  27 browsers and across all operating systems is not easy.  I hope this
  28 will become easier when the &lt;video&gt; tag is implemented in all
  29 browsers, but I am not sure.  We provide the recordings in several
  30 formats, MPEG1, Ogg Theora, H.264 and Quicktime, and want the
  31 browser/media plugin to pick one it support and use it to play the
  32 recording, using whatever embed mechanism the browser understand.
  33 There is at least four different tags to use for this, the new HTML5
  34 &lt;video&gt; tag, the &lt;object&gt; tag, the &lt;embed&gt; tag and
  35 the &lt;applet&gt; tag.  All of these take a lot of options, and
  36 finding the best options is a major challenge.</p>
  37
  38 <p>I just tested the experimental Opera browser available from <a
  39 href="http://labs.opera.com">labs.opera.com</a>, to see how it handled
  40 a &lt;video&gt; tag with a few video sources and no extra attributes.
  41 I was not very impressed.  The browser start by fetching a picture
  42 from the video stream.  Not sure if it is the first frame, but it is
  43 definitely very early in the recording.  So far, so good. Next,
  44 instead of streaming the 76 MiB video file, it start to download all
  45 of it, but do not start to play the video.  This mean I have to wait
  46 for several minutes for the downloading to finish.  When the download
  47 is done, the playing of the video do not start!  Waiting for the
  48 download, but I do not get to see the video?  Some testing later, I
  49 discover that I have to add the controls="true" attribute to be able
  50 to get a play button to pres to start the video.  Adding
  51 autoplay="true" did not help.  I sure hope this is a misfeature of the
  52 test version of Opera, and that future implementations of the
  53 &lt;video&gt; tag will stream recordings by default, or at least start
  54 playing when the download is done.</p>
  55
  56 <p>The test page I used (since changed to add more attributes) is
  57 <a href="http://www.nuug.no/aktiviteter/20090113-foredrag-om-foredrag/">available
  58 from the nuug site</a>.  Will have to test it with the new Firefox
  59 too.</p>
  60
  61 <p>In the test process, I discovered a missing feature.  I was unable
  62 to find a way to get the URL of the playing video out of Opera, so I
  63 am not quite sure it picked the Ogg Theora version of the video.  I
  64 sure hope it was using the announced Ogg Theora support. :)</p>
  65 </div>
  66
  67       <div class="tags">Tags: <a href="http://people.skolelinux.org/pere/blog/tags/english">english</a>, <a href="http://people.skolelinux.org/pere/blog/tags/multimedia">multimedia</a>, <a href="http://people.skolelinux.org/pere/blog/tags/nuug">nuug</a>, <a href="http://people.skolelinux.org/pere/blog/tags/video">video</a>, <a href="http://people.skolelinux.org/pere/blog/tags/web">web</a>.</div>
  68
  69
  70     </div>
  71
  72
  73
  74
  75     <div id="sidebar">
  76
  77
  78
  79 <h2>Archive</h2>
  80 <ul>
  81
  82 <li>2012
  83 <ul>
  84
  85 <li><a href="http://people.skolelinux.org/pere/blog/archive/2012/01/">January (7)</a></li>
  86
  87 <li><a href="http://people.skolelinux.org/pere/blog/archive/2012/02/">February (10)</a></li>
  88
  89 <li><a href="http://people.skolelinux.org/pere/blog/archive/2012/03/">March (17)</a></li>
  90
  91 <li><a href="http://people.skolelinux.org/pere/blog/archive/2012/04/">April (12)</a></li>
  92
  93 <li><a href="http://people.skolelinux.org/pere/blog/archive/2012/05/">May (12)</a></li>
  94
  95 <li><a href="http://people.skolelinux.org/pere/blog/archive/2012/06/">June (20)</a></li>
  96
  97 <li><a href="http://people.skolelinux.org/pere/blog/archive/2012/07/">July (17)</a></li>
  98
  99 <li><a href="http://people.skolelinux.org/pere/blog/archive/2012/08/">August (6)</a></li>
 100
 101 </ul></li>
 102
 103 <li>2011
 104 <ul>
 105
 106 <li><a href="http://people.skolelinux.org/pere/blog/archive/2011/01/">January (16)</a></li>
 107
 108 <li><a href="http://people.skolelinux.org/pere/blog/archive/2011/02/">February (6)</a></li>
 109
 110 <li><a href="http://people.skolelinux.org/pere/blog/archive/2011/03/">March (6)</a></li>
 111
 112 <li><a href="http://people.skolelinux.org/pere/blog/archive/2011/04/">April (7)</a></li>
 113
 114 <li><a href="http://people.skolelinux.org/pere/blog/archive/2011/05/">May (3)</a></li>
 115
 116 <li><a href="http://people.skolelinux.org/pere/blog/archive/2011/06/">June (2)</a></li>
 117
 118 <li><a href="http://people.skolelinux.org/pere/blog/archive/2011/07/">July (7)</a></li>
 119
 120 <li><a href="http://people.skolelinux.org/pere/blog/archive/2011/08/">August (6)</a></li>
 121
 122 <li><a href="http://people.skolelinux.org/pere/blog/archive/2011/09/">September (4)</a></li>
 123
 124 <li><a href="http://people.skolelinux.org/pere/blog/archive/2011/10/">October (2)</a></li>
 125
 126 <li><a href="http://people.skolelinux.org/pere/blog/archive/2011/11/">November (3)</a></li>
 127
 128 <li><a href="http://people.skolelinux.org/pere/blog/archive/2011/12/">December (1)</a></li>
 129
 130 </ul></li>
 131
 132 <li>2010
 133 <ul>
 134
 135 <li><a href="http://people.skolelinux.org/pere/blog/archive/2010/01/">January (2)</a></li>
 136
 137 <li><a href="http://people.skolelinux.org/pere/blog/archive/2010/02/">February (1)</a></li>
 138
 139 <li><a href="http://people.skolelinux.org/pere/blog/archive/2010/03/">March (3)</a></li>
 140
 141 <li><a href="http://people.skolelinux.org/pere/blog/archive/2010/04/">April (3)</a></li>
 142
 143 <li><a href="http://people.skolelinux.org/pere/blog/archive/2010/05/">May (9)</a></li>
 144
 145 <li><a href="http://people.skolelinux.org/pere/blog/archive/2010/06/">June (14)</a></li>
 146
 147 <li><a href="http://people.skolelinux.org/pere/blog/archive/2010/07/">July (12)</a></li>
 148
 149 <li><a href="http://people.skolelinux.org/pere/blog/archive/2010/08/">August (13)</a></li>
 150
 151 <li><a href="http://people.skolelinux.org/pere/blog/archive/2010/09/">September (7)</a></li>
 152
 153 <li><a href="http://people.skolelinux.org/pere/blog/archive/2010/10/">October (9)</a></li>
 154
 155 <li><a href="http://people.skolelinux.org/pere/blog/archive/2010/11/">November (13)</a></li>
 156
 157 <li><a href="http://people.skolelinux.org/pere/blog/archive/2010/12/">December (12)</a></li>
 158
 159 </ul></li>
 160
 161 <li>2009
 162 <ul>
 163
 164 <li><a href="http://people.skolelinux.org/pere/blog/archive/2009/01/">January (8)</a></li>
 165
 166 <li><a href="http://people.skolelinux.org/pere/blog/archive/2009/02/">February (8)</a></li>
 167
 168 <li><a href="http://people.skolelinux.org/pere/blog/archive/2009/03/">March (12)</a></li>
 169
 170 <li><a href="http://people.skolelinux.org/pere/blog/archive/2009/04/">April (10)</a></li>
 171
 172 <li><a href="http://people.skolelinux.org/pere/blog/archive/2009/05/">May (9)</a></li>
 173
 174 <li><a href="http://people.skolelinux.org/pere/blog/archive/2009/06/">June (3)</a></li>
 175
 176 <li><a href="http://people.skolelinux.org/pere/blog/archive/2009/07/">July (4)</a></li>
 177
 178 <li><a href="http://people.skolelinux.org/pere/blog/archive/2009/08/">August (3)</a></li>
 179
 180 <li><a href="http://people.skolelinux.org/pere/blog/archive/2009/09/">September (1)</a></li>
 181
 182 <li><a href="http://people.skolelinux.org/pere/blog/archive/2009/10/">October (2)</a></li>
 183
 184 <li><a href="http://people.skolelinux.org/pere/blog/archive/2009/11/">November (3)</a></li>
 185
 186 <li><a href="http://people.skolelinux.org/pere/blog/archive/2009/12/">December (3)</a></li>
 187
 188 </ul></li>
 189
 190 <li>2008
 191 <ul>
 192
 193 <li><a href="http://people.skolelinux.org/pere/blog/archive/2008/11/">November (5)</a></li>
 194
 195 <li><a href="http://people.skolelinux.org/pere/blog/archive/2008/12/">December (7)</a></li>
 196
 197 </ul></li>
 198
 199 </ul>
 200
 201
 202
 203 <h2>Tags</h2>
 204 <ul>
 205
 206  <li><a href="http://people.skolelinux.org/pere/blog/tags/3d-printer">3d-printer (13)</a></li>
 207
 208  <li><a href="http://people.skolelinux.org/pere/blog/tags/amiga">amiga (1)</a></li>
 209
 210  <li><a href="http://people.skolelinux.org/pere/blog/tags/aros">aros (1)</a></li>
 211
 212  <li><a href="http://people.skolelinux.org/pere/blog/tags/bitcoin">bitcoin (2)</a></li>
 213
 214  <li><a href="http://people.skolelinux.org/pere/blog/tags/bootsystem">bootsystem (12)</a></li>
 215
 216  <li><a href="http://people.skolelinux.org/pere/blog/tags/bsa">bsa (2)</a></li>
 217
 218  <li><a href="http://people.skolelinux.org/pere/blog/tags/debian">debian (56)</a></li>
 219
 220  <li><a href="http://people.skolelinux.org/pere/blog/tags/debian edu">debian edu (111)</a></li>
 221
 222  <li><a href="http://people.skolelinux.org/pere/blog/tags/digistan">digistan (9)</a></li>
 223
 224  <li><a href="http://people.skolelinux.org/pere/blog/tags/docbook">docbook (6)</a></li>
 225
 226  <li><a href="http://people.skolelinux.org/pere/blog/tags/drivstoffpriser">drivstoffpriser (4)</a></li>
 227
 228  <li><a href="http://people.skolelinux.org/pere/blog/tags/english">english (147)</a></li>
 229
 230  <li><a href="http://people.skolelinux.org/pere/blog/tags/fiksgatami">fiksgatami (17)</a></li>
 231
 232  <li><a href="http://people.skolelinux.org/pere/blog/tags/fildeling">fildeling (12)</a></li>
 233
 234  <li><a href="http://people.skolelinux.org/pere/blog/tags/freeculture">freeculture (7)</a></li>
 235
 236  <li><a href="http://people.skolelinux.org/pere/blog/tags/frikanalen">frikanalen (6)</a></li>
 237
 238  <li><a href="http://people.skolelinux.org/pere/blog/tags/intervju">intervju (30)</a></li>
 239
 240  <li><a href="http://people.skolelinux.org/pere/blog/tags/kart">kart (16)</a></li>
 241
 242  <li><a href="http://people.skolelinux.org/pere/blog/tags/ldap">ldap (8)</a></li>
 243
 244  <li><a href="http://people.skolelinux.org/pere/blog/tags/lenker">lenker (4)</a></li>
 245
 246  <li><a href="http://people.skolelinux.org/pere/blog/tags/ltsp">ltsp (1)</a></li>
 247
 248  <li><a href="http://people.skolelinux.org/pere/blog/tags/multimedia">multimedia (22)</a></li>
 249
 250  <li><a href="http://people.skolelinux.org/pere/blog/tags/norsk">norsk (193)</a></li>
 251
 252  <li><a href="http://people.skolelinux.org/pere/blog/tags/nuug">nuug (142)</a></li>
 253
 254  <li><a href="http://people.skolelinux.org/pere/blog/tags/offentlig innsyn">offentlig innsyn (4)</a></li>
 255
 256  <li><a href="http://people.skolelinux.org/pere/blog/tags/open311">open311 (2)</a></li>
 257
 258  <li><a href="http://people.skolelinux.org/pere/blog/tags/opphavsrett">opphavsrett (35)</a></li>
 259
 260  <li><a href="http://people.skolelinux.org/pere/blog/tags/personvern">personvern (48)</a></li>
 261
 262  <li><a href="http://people.skolelinux.org/pere/blog/tags/raid">raid (1)</a></li>
 263
 264  <li><a href="http://people.skolelinux.org/pere/blog/tags/reprap">reprap (11)</a></li>
 265
 266  <li><a href="http://people.skolelinux.org/pere/blog/tags/rfid">rfid (2)</a></li>
 267
 268  <li><a href="http://people.skolelinux.org/pere/blog/tags/robot">robot (4)</a></li>
 269
 270  <li><a href="http://people.skolelinux.org/pere/blog/tags/rss">rss (1)</a></li>
 271
 272  <li><a href="http://people.skolelinux.org/pere/blog/tags/ruter">ruter (4)</a></li>
 273
 274  <li><a href="http://people.skolelinux.org/pere/blog/tags/scraperwiki">scraperwiki (2)</a></li>
 275
 276  <li><a href="http://people.skolelinux.org/pere/blog/tags/sikkerhet">sikkerhet (23)</a></li>
 277
 278  <li><a href="http://people.skolelinux.org/pere/blog/tags/sitesummary">sitesummary (4)</a></li>
 279
 280  <li><a href="http://people.skolelinux.org/pere/blog/tags/skepsis">skepsis (1)</a></li>
 281
 282  <li><a href="http://people.skolelinux.org/pere/blog/tags/standard">standard (37)</a></li>
 283
 284  <li><a href="http://people.skolelinux.org/pere/blog/tags/stavekontroll">stavekontroll (1)</a></li>
 285
 286  <li><a href="http://people.skolelinux.org/pere/blog/tags/stortinget">stortinget (4)</a></li>
 287
 288  <li><a href="http://people.skolelinux.org/pere/blog/tags/surveillance">surveillance (10)</a></li>
 289
 290  <li><a href="http://people.skolelinux.org/pere/blog/tags/valg">valg (6)</a></li>
 291
 292  <li><a href="http://people.skolelinux.org/pere/blog/tags/video">video (32)</a></li>
 293
 294  <li><a href="http://people.skolelinux.org/pere/blog/tags/vitenskap">vitenskap (1)</a></li>
 295
 296  <li><a href="http://people.skolelinux.org/pere/blog/tags/web">web (25)</a></li>
 297
 298 </ul>
 299
 300
 301     </div>
 302     <p style="text-align: right">
 303  Created by <a href="http://steve.org.uk/Software/chronicle">Chronicle v4.4</a>
 304 </p>
 305
 306   </body>
 307 </html>