1. HTML 5

2. Introduction In modern browsers, adding a video to your page is as easy as adding an image. No longer do you need to deal with special plug-ins like Adobe’s Shockwave Flash

3. Adobe’s Shockwave Flash Free web browser plugin for multimedia (including video) Flash Plugin is installed on most browsers Developing websites with Shockwave video requires special software.

4. Why Shockwave Flash is bad Not open source. Software and languages are owned by the Adobe corporation and they are Expensive The Shockwave Flash plugin is not optimized for mobile device hardware. Playing video uses too much battery

5. Demo 1: The Old Way We will use the tag to embed a Shockwave Flash Video.

6. Why HTML5 video is good Modern web browsers can play videos without a plugin. Uses the devices’ built-in decoders use less processing power and use less battery life to play video. Works with many different video formats including open source and commercial/proprietary

7. Demo 2: The New Way We will use the HTML5 tag to embed an webm video.

8. Specifying Video Sources Not all devices can play mp4 videos. So, the HTML tag lets you specify alternative sources. If the first source cannot be played, the browser will try the next source.

9. Demo 3: Different Sources We will use the HTML5 tag to specify three different video sources.

10. Specify the type of video You should always include the type attribute It helps the browser figure out which video player to use.

11. Types of web Video WebMtype=“video/webm” open web media format free codecs and video creators. Ogv type=“video/ogg” Another free and open video format. Not as good as WebM in terms of compression to quality ratio.

12. Types of web Video MP4type=“video Uses the commercial H.264 codec, which is widely used. MP4 Players are free, but the video creators and other development tools are often expensive.

13. Types of web Video Video types that you may be familiar with (MOV, AVI, etc.) are not appropriate embedding in a web page. For example, the MOV format will launch Quicktime and cannot be played inside of the web browser. As of 2015, webm, mp4 and ogg are the most widely support formats.

14. Video Codecs Codec stands for Code – Decode Hardware and software for Compressing (coding) video for efficient storage/download and Decompressing (decoding) video so it can be played

15. Why is Video Compressed? Digital video files can be very large. In the past, one minute of high quality video required up to 100MB of data. To view a 2 hour movie might require downloading 12,000MB (or 12GB) of data. Even with high speed Internet, itcould take several hours to download a movie.

16. Video Compression Algorithms are used to reduce the data size of video by slightly decreasing the quality (“lossy” compression). Today, 1 minute of high quality video requires as little as 5MB of data. Thus, videos can often be downloaded faster than they can be watched (streaming video).

17. Why is decoding a problem? Decoding video requires intense processing that heavily utilizes the CPU. Can quickly drain battery life on mobile devices.

18. Decoding Hardware High end mobile devices like the iPhone and Samsung Galaxy have special video decoding hardware so video can decode more efficiently Allows the CPU to “rest” and uses less energy and battery life.

19. Specifying codecs While most web browsers and devices will automatically select the best codec to use based on video type and device, you can specify which codec to use. List of video/audio types and codecs: https://wiki.whatwg.org/wiki/Video_ty pe_parameters#Browser_Support https://wiki.whatwg.org/wiki/Video_ty pe_parameters#Browser_Support

20. Demo 4: Different Codecs We will use the type attribute to specify different codecs to use.

21. Video Attributes Once you embed a video in a web page, you can add attributes to control how it looks and how the video is played.

22. Video Attributes controls Shows the default video controls (play, stop, pause, fullscreen, etc.) If this is missing, users will not be able to easily control the video

23. Video Attributes loop Automatically loop the video. If you disable the controls and allow a video to loop, it is very annoying :)

24. Video Attributes muted Mutes the audio (set volume to zero). Users can still use the controls to turn up the volume. If you use autoplay and mute together, it will get the user attention but without making noise :)

25. Video Attributes height = “640” width = “360” Set the width and height Otherwise, the video source file determines the height and width

26. Video height x width 640 x 480 – Old fashioned standard-screen 1920 X 1080 – HD wide-screen (1080p) 1280X 720 – wide-screen (720p) 640 X 360 – small wide-screen

27. Video Attributes autoplay Tells the browser to immediately start downloading the video and play it as soon as it can. Note that mobile browsers generally do not support this attribute, the user must tap the screen to begin video playback.

28. Video Attributes preload = “auto” “Suggests” that the browser download the video immediately. Some browsers will only start the download when the video is played. Mobile browsers often ignore this

29. Video Attributes poster = “image.jpg” Show an image while the video is loading Some video formats will automatically show a key frame Most video formats will just show a black screen.

30. Demo 5: Bad Attributes We will use attributes to make a small looping video without controls

31. Best Practices Autoplaying and preloading videos is bad for mobile devices users may only be interested in the web page and do not want to play the video. Downloading a video on a mobile device Can lead to data charges and Will use bandwidth and battery power.

32. Good Practices Enabling controls, Using an appropriate poster image that represents the video, and Using an appropriate height and width or none at all.

33. Size & Ratio Most video is now wide-screen where the ratio between the height and width is 16:9. If the source video is 640 x 360 (16:9), you will see A letterbox effect if you set the size to be a different ratio, say 640 x 480 (4:3) A pixilation effect if you set the size to larger but the same ratio, say 1280 x 720.

34. Demo 6: Good Attributes We will use attributes to configure a video using best practices