Week 5

HTML5 and Video+

Web Fonts

Video and HTML5

• Until now, there has not been a standard for showing a video/movie on a web page.

• In the past most videos have been shown through a plug-in (like flash).

• HTML5 defines a new element which specifies a standard way to embed a video/movie on a web page: the <video> element.

<video> attributes• In HTML5 embedding video is done with the <video> element, but as with many HTML tags there

are further attributes that can help the browser when rendering <video>.

• width and height: (optional) sets the dimensions of the video frame.

These help the browser by allocating the correct space for the video while the page loads.

Its also worth noting that if you specify a size smaller than the video source, the entire video will scale down. However, if you specify a size larger than the source, the video will display in its original size, with the remainder of the dimensions you specified filled by empty space.

<video id="sampleMovie" src="HTML5Sample.mov" width=”640” height=”360”></video>

• controls: adds a default video control overlay for playback eg play/pause buttons etc.

This is useful if you don’t want to create your own custom controls. However, if you do want to delve into customizing the player controls, you can use JavaScript and CSS..

<video id="sampleMovie" src="HTML5Sample.mov" controls></video>

<video> attributes• preload: begins downloading the video as soon as the user hits the page.

To instruct the video to preload, simply include the attribute. To instruct it not to preload, set the attribute equal to “none.”

<video id="sampleMovie" src="HTML5Sample.mov" preload></video>

<video id="sampleMovie" src="HTML5Sample.mov" preload=”none”></video>

• poster: specifies an image to be shown while the video is downloading, or until the user hits the play button.

If this is not included, the first frame of the video will be used instead.

<video id="sampleMovie" src="HTML5Sample.mov" poster=“images/HTML5SamplePoster.png”></video>

• autoplay: considered by many to be pure evil. This instructs the browser to begin playing the video as soon as the page loads.

<video id="sampleMovie" src="HTML5Sample.mov" autoplay></video>

Exercise 1 - <video width="250" height="" controls>

<source src="video/TheCreamasterExtracto.mp4" >Your browser does not support the video tag.

</video>

•You should insert text content between the <video> and </video> tags for browsers that do not support the <video> element.

•The <video> element also allows multiple <source> elements to link to multiple formats of the same file. The browser will then use the first recognized vidoe format.

<video width="250" height="" controls><source src="video/TheCreamasterExtracto.mp4" > <source src="video/TheCreamasterExtracto.ogg" >Your browser does not support the video tag.

</video>

Exercise 2 - Video JS• Video.js is a JavaScript and CSS library that makes

it easier to work with and build on HTML5 video. • Video.js provides a controls skin built in

HTML/CSS (which you can customise). • It fixes cross-browser inconsistencies, adds

additional features and manages the fallback when HTML5 video isn't supported.

• It also provides a very handy HTML5 video tag builder.

• http://videojs.com/

Web Fonts

• Previously using fonts in your website posed several challenges, as browsers were restricted to a limited set of fonts commonly installed on the users computers, these were called web-safe fonts.

• When web designers needed to use fonts outside of a Mac and PC’s core set — eg Arial, Georgia, Times, Verdana — they made pictures of text or use alternatives like Flash.

• None of these methods were perfect, as they all suffered from accessibility concerns and performance problems.

Web Fonts• With CSS3 we now have a better option allowing

us to display real fonts on the web called ‘web fonts’.

• Web fonts offer a way to use more varied fonts. With almost all contemporary browsers now supporting web fonts. This means we can largely guarantee that people will experience our type designs as we intend them to.

• Web fonts are simple to implement and when we use them our text stays accessible, selectable and search engine friendly.

Web fonts and licensing

• One of the major concerns with using web fonts is licensing.• It is important to ensure you have the proper licensing for a font

before using it in a web site.• Naturally, font foundries (makers) would like to be paid for their

work and therefore place strict restrictions on the use of their fonts.

• Often these foundries have teamed up with various premium @font-face solutions including: Typekit, Typotheque, Fonts Live etc to make the process of licencing easier.

• However the web font licensing problems have also caused a major rise in the popularity of sites offering quality free fonts. eg. Font squirrel ,Fontex, Google fonts etc

Embedding Web Fonts with @font-face

To embed a web fonts with @font-face we need three things:

1.a font file, in a format that browsers will understand. 2.an @font-face declaration at the start of our style sheet. This will define the font-family name, the source of the font file and, finally, its format (TrueType in the following example).

A simple declaration looks like this:

@font-face { font-family : "AllerRegular"; src : url("AllerRegular.ttf") format("truetype");

} 3.a font-family property, which applies the embedded font to an element, id, class, child, sibling, attribute, pseudo- or any other CSS selector.

eg. h1 { font-family : "AllerRegular" }”

EXERCISE 3 - @font-face• To get started, go to Font Squirrel and download Chunkfive (or any other font you like).

• Once you’ve downloaded the font, create a 'fonts' folder in the root directory of your web page, and save the font in this file.

• Now, go into your stylesheet and insert the following code at the top:

@font-face { font-family: Chunkfive; src: url('../fonts/Chunkfive.otf'); }

The first line sets an identifier of “Chunkfive” to the font. It’s best to keep things simple by always using the font name.

The second line tells the browser that when “Chunkfive” is called, it should load the font Chunkfive.otf file from the url mentioned.

• Now find your h1 element in your css file and set the font family as Chuckfive:

h1 {font-family: Chunkfive;

}

Web Fonts and Cross-Browser Compatibility

• There are five font formats widely used on the web – EOT, OpenType, SVG, TrueType and WOFF.

• Of course, all the major browsers have decided to go their own way with font formats that they choose to support.

• Internet Explorer only supports EOT• Mozilla browsers support OTF and TTF• Safari and Opera support OTF, TTF and SVG• Chrome supports TTF and SVG.• Further, mobile browsers like Safari on the iPad and iPhone require

SVG.

• This varied support means that we should link to more than one font file in each @font-face declaration

Font Squirrel – WebFont Generator• Luckily Font Squirrel offers @font-face kits and a

font kit generator service that are essentially a one-click download for everything you need to get going with custom, cross-browser compatible fonts.

• Each kit includes all the font types you need as well as CSS files to get you started.

• The CSS used by Font Squirrel is based on Paul Irish’s bulletproof @font-face syntax which is the best method currently available for ensuring compliance for as many users as possible.

Exercise 4- WebFont Generator

• 1) Get a font file font• 2) Go to web the font generator page• 3) Upload your font• 4) Generate the kit• 5) Insert files into your sites directory• 6)insert appropriate css code snippet• 7) update url in @font-face declaration if

required

Google Web Fonts

• The Google Font API is one of the easiest and newest solutions for inserting custom fonts into your designs.

• Using this API, you simply choose a font from the Google Font Directory and grab a snippet of code to insert into the <head> tag of your HTML documents.

• You can then refer to the font in your CSS just like any other font you use normally.

• When using the Google Web Font API there is no@font-face CSS required as it takes care of all this behind the scenes.

• All of the fonts in the Google Font Directory are free and open-source.

Exercise 5- Google Web Fonts

• Go to Google Fonts• Select some fonts• Insert codes• Enjoy!