Your SlideShare is downloading. ×
0
HTML5TV - kako obraditi i objaviti predavanja na web-u
HTML5TV - kako obraditi i objaviti predavanja na web-u
HTML5TV - kako obraditi i objaviti predavanja na web-u
HTML5TV - kako obraditi i objaviti predavanja na web-u
HTML5TV - kako obraditi i objaviti predavanja na web-u
HTML5TV - kako obraditi i objaviti predavanja na web-u
HTML5TV - kako obraditi i objaviti predavanja na web-u
HTML5TV - kako obraditi i objaviti predavanja na web-u
HTML5TV - kako obraditi i objaviti predavanja na web-u
HTML5TV - kako obraditi i objaviti predavanja na web-u
HTML5TV - kako obraditi i objaviti predavanja na web-u
HTML5TV - kako obraditi i objaviti predavanja na web-u
HTML5TV - kako obraditi i objaviti predavanja na web-u
HTML5TV - kako obraditi i objaviti predavanja na web-u
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

HTML5TV - kako obraditi i objaviti predavanja na web-u

813

Published on

http://www.webstrategija.com/11/predavanja#dp …

http://www.webstrategija.com/11/predavanja#dp

Iako postoji mnogo web servisa koji nam omogućavaju upload prezentacija (npr. SlideShare) ili videa (npr. YouTube) oni ne omogućavaju jednostavnu sinhronizaciju videa i prezentacije. Također, većina servisa koristi Flash za reprodukciju videa što u doba HTML5 standarda također nije optimalan način.

Pogledati ćemo set alata koji se zovu HTML5TV i omogućavaju jednostavnu sinhronizaciju video materijala i PDF prezentacije te njihovo objavljivanje na web-u bez potrebe za pluginima na browserima nove generacije. Kako je cijeli projekt na github-u, kolaboracija se svodi na korištenje git-a.

Published in: Business
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
813
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
4
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. HTML5TV Dobrica Pavlinušić http://blog.rot13.org 1 14
  • 2. Zašto?● Mnoge konferencije objavljuju video snimke● Video predavanja obično nije dovoljno dobar da bi mogli pročitati tekst prezentacije● Flash ima tenenciju da troši CPU i baterije nemilice, a imamo <video> tag!● Lokalna arhiva video materijala je puno otpornija na vremenske neprilike u oblaku 2 14
  • 3. Flash? YouTube / SlideShare? 3 14
  • 4. 4 14
  • 5. <video> tag<video width="320" height="240" controls> <source src="pr6.mp4" type=video/mp4> <source src="pr6.webm" type=video/webm> <source src="pr6.ogv" type=video/ogg></video>http://diveintohtml5.org/video.htmlhttp://www.html5rocks.com/tutorials/video/basics/http://www.html5video.org/kaltura-html5/ 5 14
  • 6. Izazov: koji <video> codec? Theora+Vorbis+Ogg H.264+AAC+MP4 WebMIE 9.0+ 9.0+ [codec]Firefox 3.5+ 4.0+Safari [codec] 3.0+ [codec]Chrome 5.0+ 5.0-13.0 [?] 6.0+Opera 10.5+ 10.6+iPhone 3.0+Android 2.0+ 2.3+ [no hw accel]● Enkodirati u više formata na serveru ● http://videojs.com/● HTML5 API (Flash or Silverlight, single H.264 file) ● http://mediaelementjs.com/ 6 14
  • 7. Kako obraditi i objaviti predavanja?● Izvorni materijali ● video datoteka ● pdf prezentacije● Sinhronizirati video i prezentaciju ● U jednom gledanju, bez mnogo editiranja● Obaviti na web-u ● Statične HTML stranice (crawler friendly) ● <video> tag, JavaScript za UI 7 14
  • 8. Dont make me click!Keyboard is the way to go! 8 14
  • 9. i EDL start/stop, add (preroll 3s)F1 prevF2 move -0.3F3 move +0.3F4 nextF5 saveF9 add 9 14F12 edit
  • 10. 10 14
  • 11. Pripremimo prezentaciju● mkdir media/my_presentation/● www.sh ● Mirror script za video+pdf prezentacije ● $ clive, cclive, wget ● Convert video to .ogv (Ogg Theora)● Symlink presetation.pdf video.ogv● hCalendar.html ● Author, summary, url, location, date, description● ./bin/mplayer.pl media/my_presentation/● github commit & share for fun&profit ! 11 14
  • 12. Enkodiranje video datoteka● mp4 (H.264 / ACC): ffmpeg -i INPUTFILE -b 1500k -vcodec libx264 -vpre slow -vpre baseline -g 30 "OUTPUTFILE.mp4"● webm (VP8 / Vorbis): ffmpeg -i "INPUTFILE" -b 1500k -vcodec libvpx -acodec libvorbis -ab 160000 -f webm -g 30 "OUTPUTFILE.webm"● ogv (Theora / Vorbis): ffmpeg -i "INPUTFILE" -b 1500k -vcodec libtheora -acodec libvorbis -ab 160000 -g 30 "OUTPUTFILE.ogv" 12 14
  • 13. Open Source● Scratching my own itch● Building on work of othershttp://www.ffmpeg.org/http://www.mplayerhq.hu/DOCS/tech/slave.txthttp://sdl.perl.org/http://www.bbc.co.uk/blogs/rad/2009/08/html5.htmlhttp://jquery.com/http://sorgalla.com/projects/jcarousel/http://microformats.org/wiki/hcalendar-cheatsheet 13 14
  • 14. Linkovi● HTML5TV archive: ● http://html5tv.rot13.org/● Source code ● https://github.com/dpavlin/HTML5TV ● github pull requests dobrodošli!● My blog ● http://blog.rot13.org/ 14 14

×