Transcript video - Andrew Robards

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 @fontface
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!