Difference between revisions of "HTML5MediaLibraries"

From Sugar Labs
Jump to navigation Jump to search
m
 
(5 intermediate revisions by the same user not shown)
Line 1: Line 1:
 
=Overview of HTML5 media libraries and feedbacks=
 
=Overview of HTML5 media libraries and feedbacks=
  
 +
<span style="color:#FF0000">This page is under construction</span>
 +
 +
=Video=
 
== Display a Video ? ==
 
== Display a Video ? ==
  
Line 9: Line 12:
 
Even if ogv is free, it’s not supported on all majors platforms.
 
Even if ogv is free, it’s not supported on all majors platforms.
  
   * http://caniuse.com/#feat=mpeg4
+
   http://caniuse.com/#feat=mpeg4
   * http://caniuse.com/#feat=ogv
+
   http://caniuse.com/#feat=ogv
  
 
=== Usage ===
 
=== Usage ===
Line 16: Line 19:
 
You can simply use a video tag
 
You can simply use a video tag
  
   * http://www.w3schools.com/html/html5_video.asp
+
   http://www.w3schools.com/html/html5_video.asp
 +
   
 +
  <video width="400" controls>
 +
    <source src="mov_bbb.mp4" type="video/mp4">
 +
    <source src="mov_bbb.ogg" type="video/ogg">
 +
    Your browser does not support HTML5 video.
 +
  </video>
  
 
=== Warning ===
 
=== Warning ===
Line 22: Line 31:
 
On Android, >=2.3 is strongly recommended
 
On Android, >=2.3 is strongly recommended
  
   * http://www.broken-links.com/2010/07/08/making-html5-video-work-on-android-phones/
+
   http://www.broken-links.com/2010/07/08/making-html5-video-work-on-android-phones/
  
 
{| class="wikitable"
 
{| class="wikitable"
Line 29: Line 38:
 
| OGV Support
 
| OGV Support
 
|-
 
|-
| XO
+
| XO-1.5
 
|
 
|
 
| style="text-align:center;" | X
 
| style="text-align:center;" | X
 
|-
 
|-
| Android
+
| Android 4.X
 
| style="text-align:center;" | X
 
| style="text-align:center;" | X
 
|  
 
|  
 
|-
 
|-
| iOS
+
| iOS 8.X
 
| style="text-align:center;" | X
 
| style="text-align:center;" | X
 
|
 
|
 
|}
 
|}
 +
==Record a video using the Webcam==
 +
==Take a picture using the Webcam==
  
 +
=Audio=
 
== Play sound ? ==
 
== Play sound ? ==
  
Line 52: Line 64:
 
=== Usage ===
 
=== Usage ===
  
You can use the audio tag - https://www.w3.org/wiki/HTML/Elements/audio
+
You can use the audio tag
  
=== Warning ===
+
  https://www.w3.org/wiki/HTML/Elements/audio
 +
 
 +
  <audio controls
 +
    src="http://media.w3.org/2010/07/bunny/04-Death_Becomes_Fur.oga">
 +
    Your user agent does not support the HTML5 Audio element.
 +
  </audio>
  
   * Volume is read-only on iOS.
+
   See http://createjs.com/SoundJS
  * Chrome on Android does not support autoplay as advised by the specification.
 
 
 
=== Sound Manager ===
 
 
 
  * http://createjs.com/SoundJS
 
  
 +
=== Warning ===
  
== Interact with Canvas ? ==
+
  Volume is read-only on iOS.
 +
  Chrome on Android does not support autoplay as advised by the specification.
  
=== Scene Manager ===
+
== Record sound using the microphone ==
  
  * http://createjs.com
+
=Input/Touch=

Latest revision as of 10:38, 15 May 2015

Overview of HTML5 media libraries and feedbacks

This page is under construction

Video

Display a Video ?

Recommendations

You should provide both .ogv and .mp4 files

Even if ogv is free, it’s not supported on all majors platforms.

 http://caniuse.com/#feat=mpeg4
 http://caniuse.com/#feat=ogv

Usage

You can simply use a video tag

 http://www.w3schools.com/html/html5_video.asp
   
 <video width="400" controls>
   <source src="mov_bbb.mp4" type="video/mp4">
   <source src="mov_bbb.ogg" type="video/ogg">
   Your browser does not support HTML5 video.
 </video>

Warning

On Android, >=2.3 is strongly recommended

 http://www.broken-links.com/2010/07/08/making-html5-video-work-on-android-phones/
Platform MP4 Support OGV Support
XO-1.5 X
Android 4.X X
iOS 8.X X

Record a video using the Webcam

Take a picture using the Webcam

Audio

Play sound ?

Recommendations

You should provide both .ogg and .mp3 files

Even if ogg is free, it’s not supported on all majors platforms.

Usage

You can use the audio tag

 https://www.w3.org/wiki/HTML/Elements/audio
 
 <audio controls
   src="http://media.w3.org/2010/07/bunny/04-Death_Becomes_Fur.oga">
   Your user agent does not support the HTML5 Audio element.
 </audio>
 See http://createjs.com/SoundJS

Warning

 Volume is read-only on iOS.
 Chrome on Android does not support autoplay as advised by the specification.

Record sound using the microphone

Input/Touch