Difference between revisions of "HTML5MediaLibraries"
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=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 | |
+ | |||
+ | <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/ | |
{| 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 | + | 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= |
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.