handouts - ppt download (402 kb)
TRANSCRIPT
![Page 1: Handouts - PPT Download (402 kb)](https://reader038.vdocuments.net/reader038/viewer/2022110307/556bf354d8b42a65458b5236/html5/thumbnails/1.jpg)
Back to the Basics - Video
Nick Kwiatkowski
Michigan Flex Users Group
![Page 2: Handouts - PPT Download (402 kb)](https://reader038.vdocuments.net/reader038/viewer/2022110307/556bf354d8b42a65458b5236/html5/thumbnails/2.jpg)
Welcome to Back to the Basics
• Part II of the series.– November’s recording is on our website at
http://www.theFlexGroup.org– This month’s recording (assuming everything
records OK) will also be available on our site
• This month we will be focusing on writing a simple video app– Stream videos from a server using HTTP– “Jukebox” like interface.
![Page 3: Handouts - PPT Download (402 kb)](https://reader038.vdocuments.net/reader038/viewer/2022110307/556bf354d8b42a65458b5236/html5/thumbnails/3.jpg)
About Video
• As you probably already know, video is a big thing on the web– 80% + of video served on the internet is
served with Flash or Flex– 90% of all HD video is served with H.264
• 3 ways to serve Flash video:– Red5 or Flash Media Server (RTMP)– HTTP/s Streaming– Local disc access (embedded or via AIR)
![Page 4: Handouts - PPT Download (402 kb)](https://reader038.vdocuments.net/reader038/viewer/2022110307/556bf354d8b42a65458b5236/html5/thumbnails/4.jpg)
About Video
• Video Formats– The Flash player knows of three basic video
formats:• SWF – video files that are compiled to Flash
format. No buffering – old way to do it• FLV – Flash Video offers some buffering, OK
performance, but very widely deployed.• H.264 (MP4) – HD video, HD sound. Good
compression, but limited cue point support and requires recent Flash Player
![Page 5: Handouts - PPT Download (402 kb)](https://reader038.vdocuments.net/reader038/viewer/2022110307/556bf354d8b42a65458b5236/html5/thumbnails/5.jpg)
Encoding Video
• In order to serve any type of video, you need to encode it to be ready for the web.– If you have Premier, Flash or After Effects,
you also get a program called Adobe Encoder CS. Will show demo of this.
– Many programs can save to MP4 (H.264) or FLV format natively.
– Flash Media Server can do some encoding on the fly. Certain Linux tools can do this too.
![Page 6: Handouts - PPT Download (402 kb)](https://reader038.vdocuments.net/reader038/viewer/2022110307/556bf354d8b42a65458b5236/html5/thumbnails/6.jpg)
ENCODING A VIDEO
![Page 7: Handouts - PPT Download (402 kb)](https://reader038.vdocuments.net/reader038/viewer/2022110307/556bf354d8b42a65458b5236/html5/thumbnails/7.jpg)
Serving the Video
• Local Disk Access– Simply include the FLV or MP4 video in your
project. Easy, but limiting. Can use VideoDisplay component.
• HTTP Streaming– Place the video files on your HTTP server.
Unfortunately you need to manually setup a NetStream and NetConnection component.
![Page 8: Handouts - PPT Download (402 kb)](https://reader038.vdocuments.net/reader038/viewer/2022110307/556bf354d8b42a65458b5236/html5/thumbnails/8.jpg)
Serving the Video
• Flash Media Server– Very expensive, but allows for really neat
setups. Live video streaming, and smart objects.
– Uses aliases for videos channels, similar to LCDS or BlazeDS, to simplify the configuration.
– Dynamic Buffering– Video files can be stored on server, or cluster.
![Page 9: Handouts - PPT Download (402 kb)](https://reader038.vdocuments.net/reader038/viewer/2022110307/556bf354d8b42a65458b5236/html5/thumbnails/9.jpg)
Metadata
• Video producers can include additional metadata in video. You can read these things!– Closed Captioning– Cue-Points– In-band Advertising– Duration, Codecs, Audio channels, etc.
![Page 10: Handouts - PPT Download (402 kb)](https://reader038.vdocuments.net/reader038/viewer/2022110307/556bf354d8b42a65458b5236/html5/thumbnails/10.jpg)
Making the App
1. Design the UI1. List for video selection
2. 3 Buttons (Play, Stop, Camera)
3. Slider (for seeking)
4. Video Component (via ActionScript)
2. Connect the Web Service to get video list
3. Implement the NetConnection, NetStream and Video components
![Page 11: Handouts - PPT Download (402 kb)](https://reader038.vdocuments.net/reader038/viewer/2022110307/556bf354d8b42a65458b5236/html5/thumbnails/11.jpg)
Making the App
4. Implement the Metadata and variables
5. Write ActionScript to connect it all up!
![Page 12: Handouts - PPT Download (402 kb)](https://reader038.vdocuments.net/reader038/viewer/2022110307/556bf354d8b42a65458b5236/html5/thumbnails/12.jpg)
LETS GET INTO THE CODE!