Difference between revisions of "HTML5MediaLibraries"

From Sugar Labs
Jump to navigation Jump to search
m
Line 3: Line 3:
 
<span style="color:#FF0000">This page is under construction</span>
 
<span style="color:#FF0000">This page is under construction</span>
  
 +
=Video=
 
== Display a Video ? ==
 
== Display a Video ? ==
  
Line 49: Line 50:
 
|
 
|
 
|}
 
|}
 +
==Record a video using the Webcam==
 +
==Take a picture using the Webcam==
  
 +
=Audio=
 
== Play sound ? ==
 
== Play sound ? ==
  
Line 68: Line 72:
 
     Your user agent does not support the HTML5 Audio element.
 
     Your user agent does not support the HTML5 Audio element.
 
   </audio>
 
   </audio>
 +
 +
  See http://createjs.com/SoundJS
  
 
=== Warning ===
 
=== Warning ===
Line 78: Line 84:
 
   http://createjs.com/SoundJS
 
   http://createjs.com/SoundJS
  
 +
== Record sound using the microphone ==
  
== Interact with Canvas ? ==
+
=Input/Touch=
 
 
=== Scene Manager ===
 
 
 
  http://createjs.com
 

Revision as of 10:11, 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.

Sound Manager

 http://createjs.com/SoundJS

Record sound using the microphone

Input/Touch