11 October 2018

Embedded content

Vinh Mai

1/40
Overview

1 Introdution
2 Css properties
3 Image
4 Iframe
5 Video
6 Audio
7 Track
8 Sumary

2/40
Css properties of embedded content

Properties:
object-fit: way of element resizes to fit container
object-position: aligns position of element in container

3/40
Css properties of embedded content

object-fit properties: Adjust content of embedded content

none
contain: fitting within the element’s content box (retain ratio)
cover: filling the element’s entire content box (retain ratio)
fill: the entire object will completely fill the box
scale-down: a smaller size

4/40
Css properties of embedded content

object-fit properties:
// example:
img {
width: 300px // required
height: 150px // required
object-fit: cover
} // IE not support

5/40
Css properties of embedded content

object-position properties: align content within the element’s

box
keywords: top, left, right, center
relative value: em, rem, %
absolute value: px

6/40
Css properties of embedded content

// example:
img {
width: 300px // required
height: 150px // required
object-fit: scale-down
object-position: left top
// x:y --> 10px 40px
} // IE not support

7/40
Image

Attributes
width, height
src crossorigin
srcset usemap
sizes ismap
alt longdesc
title referrepolicy

8/40
Image

src and alt attribute:

path of source image
// Example:
<img src="/images/a.png" // required
alt="A lake in Asia" // required
/>

9/40
Image - responsive
Resolution switching problem: : the small images files for
small screen
Different sizes
// Example:
<img
// defines the set of images
srcset="elva-fairy-320w.jpg 320w,
elva-fairy-480w.jpg 480w,
elva-fairy-800w.jpg 800w"
// defines a set of media conditions
sizes="(max-width: 320px) 280px,
(max-width: 480px) 440px, 800px"
// normal
src="elva-fairy-800w.jpg" alt="Elva fairy">

10/40
Image - responsive

Resolution switching problem:

Same sizes & different resolutions
// Example:
<img
// defines the set of images
srcset="elva-fairy-320w.jpg,
elva-fairy-480w.jpg 1.5x,
elva-fairy-640w.jpg 2x"
// x: dentist
// normal
src="elva-fairy-640w.jpg" alt="Elva fairy">

11/40
Image - responsive
Art direction problem: Cut images for different layouts such
as landscape, portrait
Same sizes & different resolutions
// Example:
<picture>
<source media="(max-width: 799px)"
srcset="elva-480w-p.jpg"> // portrait

<source media="(min-width: 800px)"

srcset="elva-800w.jpg"> // landscape

<img src="elva-800w.jpg" alt="Chris Elva">

</picture>

12/40
Image - filter property

Change image to ”black and white”

Prefix
–webkit-filter
–filter

13/40
Image - filter property

Functions

blur(px)
grayscale(%) opacity(%)
brightness invert(%)
contrast(%) saturate(%)
drop-shadow(horizontal sepia(%)
vertical blur color) url(): svg

14/40
Image - filter property

Functions: drop-shadow
// Example:
img {
-webkit-filter: drop-shadow(1px 1px 2px #000)
filter: drop-shadow(1px 1px 2px #000)
}
// similar to box-shadow in box

15/40
Video

Playing video, movies and audio files

Almost browsers support: mp4, webm, ogg

// Example:
<video>
texts // this text will be display if browsers don’t
support video
</video>

16/40
Video

Attributes:
src preload
poster autoplay
width loop
height crossorigin
controls muted

17/40
Video

poster attribute:
Specify an image to display when downloading a video

// example:
<video
src="/video"
poster="/images/poster.png">
</video>

18/40
Video

width, height attributes:

To avoid blinking, set widht & height to video

// example:
<video
poster="/images/poster.png"
width="700px"
height="400px">
</video>

19/40
Video

controls attribute:
provides controls such as: play, pause, volume

// example:
<video
poster="/images/poster.png"
controls>
</video>

20/40
Video

autoplay attribute:
video autoplay when page loads

// example:
<video
poster="/images/poster.png"
controls
autoplay="true">
// autoplay="false" // not work
// must be deleted
</video>

21/40
Video
preload attribute:
if has autoplay attribute, this is not effective

// example:
<video
preload="auto" // browsers download video when page
loads
preload="none" // when users press play, browser will
be downloaded
preload="metadata"> // browsers only collect metadata:
size, first frame, track list
</video>

22/40
Video

crossorigin attribute:
anonymous: send request cross-origin without credential
HTTP header without cookie, certificate, authentication
use-credentials: otherwise

23/40
Video

source tag:
inside video tag
may be replaced src attribute
video exists in many formats

// example:
<video>
<source src="video" type="video/mp4">
<source src="video" type="video/webm">
</video>

24/40
Video

source tag: attributes

src
type: formats video
video/mp4
video/webm
video/ogg
video/3gpp (obsolete)
video/x-matroska (obsolete)
specify types: reduce time and bandwidth

25/40
Video
source tag: VIDEO CODEC
// codecs
1. Lossless codecs: (H.264, Lagarith, Huffyuv) without
any quality loss

2. Lossy codecs: (Xvid, DivX, VP3, MPEG4) lose some

amount of video information

// Example: for video + audio

type = "video/mp4; codecs=’avc1.42E01E, mp4a.40.2’ "
// video: avc1.42E01E
// audio: mp4a.40.2
// Lossless codecs: H.246 - HD video

26/40
Audio

Playing audio files

// example:
<audio
src="/audio"
controls>
</audio>

27/40
Audio

Attributes:
src
controls
autoplay
muted (default false)
loop
preload
crossorigin

28/40
Audio

controls attribute:
provides controls such as: play, pause, volume, seaking

// example:
<audio
src="audio.mp3"
controls>
</audio>

29/40
Audio

preload attribute:
none
preload: only audio metadata (length)
auto: audio file can be downloaded when page loads

// example:
<audio
src="audio.mp3"
preload>
</audio>

30/40
Audio
source tag:
inside audio tag
may be replaced src attribute
audio exists in many formats

// example:
<audio controls>

<source src="myAudio.mp3" type="audio/mp3">

<source src="myAudio.ogg" type="audio/ogg">

</audio>

31/40
Audio

source tag: attributes

src
type: formats audio
audio/mp4
audio/mpeg
audio/webm
audio/ogg
audio/wav
audio/3gpp
specify types: reduce time and bandwidth

32/40
iframe
Minimized window on page
Many developers and then merged into one
Contents may be a:
image, document html
application of google: google maps, video youtube, google api
proxy
payments, advertising

// example:
<iframe
name="my-iframe">
</iframe>

33/40
iframe

Attributes:
name
src
srcdoc
sandbox
allowfullscreen
allowpaymentrequest
referrepolicy
width, height

34/40
iframe

src attribute:
the url of the page to embed
// example:
<iframe
name="inline-frame"
src="https://www.abc.com/index.html">
</iframe>

35/40
iframe

srcdoc attribute:
content of the page to show
// example:
<iframe
name="inline-frame"
srcdoc="<p> paragraph </p>"
src="https://www.abc.com/index.html">
</iframe>

36/40
iframe

sandbox attribute: restriction of content in iframe

””: applies to all restriction allow-popups-to-escape-

allow-forms sandbox
allow-modals allow-same-origin
allow-pointer-lock allow-scripts
allow-orientation-lock allow-top-navigation
allow-presentation allow-top-navigation-by

37/40
Track

Text track of audio, video when playing media such as:

subtitle, caption
Attributes
kind: captions, chapters, descriptions, metadata and subtitles
label: title of text track
src
srclang: language of code

38/40
Track

// Example:
<video width="320" height="240" controls>

<source src="forrest_gump.mp4" type="video/mp4">

<track src="subtitles_en.vtt" // source file

kind="subtitles" // kind is subtitles
srclang="en" // language of code is english
label="English">

</video>

39/40
Summary

In additional, embeded contents: embed, object, param

40/40