Tải bản đầy đủ

Giao trinh DH FPT_Slide4

BËI 4
LËM VIỆC VỚI CçC THËNH PHẦN VIDEO, AUDIO,
CANVAS CỦA HTML5

CuuDuongThanCong.com

https://fb.com/tailieudientucntt


NHẮC LẠI BËI TRƯỚC
!
!
!
!

  Tổng quan về Javascript vˆ Jquery
  Lˆm việc với Javascript
  Lˆm việc với thư viện Jquery
  Học Javascript, jQuery với w3schools

Slide 4 - Lˆm việc với c‡c thˆnh phần video, audio, canvas của HTML5


CuuDuongThanCong.com

2

https://fb.com/tailieudientucntt


MỤC TIæU BËI HỌC
!
!
!
!

  Ch•n c‡c thˆnh phần video, audio vˆo trang
  iều khiển video với Javascript
  Lˆm quen với thˆnh phần canvas
  Sử dụng thˆnh phần cavas để thực hiện:
!   Vẽ h“nh vˆ đường
!   çp dụng mˆu vˆ cọ fradient
!   Thực hiện tạo h“nh động

Slide 4 - Lˆm việc với c‡c thˆnh phần video, audio, canvas của HTML5

CuuDuongThanCong.com

3

https://fb.com/tailieudientucntt


THËNH PHẦN VIDEO, AUDIO TRONG
HTML5

CuuDuongThanCong.com

https://fb.com/tailieudientucntt


THËNH PHẦN VIDEO, AUDIO TRONG HTML5



!   Tại sao phải th•m video, ‰m thanh vˆo trang web?
!   Tạo n•n trang web hấp dẫn
!   Thu hœt sự truy cập của người duyệt với website
!   Lˆ một c‡ch tiếp cận người d•ng

!   Trước khi c— HTML5, lˆm c‡ch nˆo để ch•n video,
‰m thanh vˆo trang web?
!   Phải sử dụng plug-ins của c‡c c™ng ty thứ 3 (third
party)

Slide 4 - Lˆm việc với c‡c thˆnh phần video, audio, canvas của HTML5

CuuDuongThanCong.com

5

https://fb.com/tailieudientucntt


THËNH PHẦN VIDEO, AUDIO TRONG HTML5

!   HTML5 ch•n video, ‰m thanh vˆo trang web như thế
nˆo?
!   Cung cấp thˆnh phần HTML video chạy trong tr“nh
duyệt
!   T’ch hợp th•m với Javascript
!   C‰u lệnh:


!   Autoplay: thuộc t’nh quy định với tr“nh duyệt oạn
video sẽ được chơi ngay khi trang được load

Slide 4 - Lˆm việc với c‡c thˆnh phần video, audio, canvas của HTML5

CuuDuongThanCong.com

6

https://fb.com/tailieudientucntt


THËNH PHẦN VIDEO, AUDIO TRONG HTML5

!   HTML5 cung cấp th•m c‡c iều khiển cho video:


!   Controls: cung cấp tr“nh iều khiển video tr•n c‡c
tr“nh duyệt kh‡c nhau

!   Poster: thuộc t’nh chỉ định cho tr“nh duyệt load h“nh
ảnh ban đầu của video
!   Width, height: thuộc t’nh chỉ định k’ch thước của
video
Slide 4 - Lˆm việc với c‡c thˆnh phần video, audio, canvas của HTML5

CuuDuongThanCong.com

7

https://fb.com/tailieudientucntt


THËNH PHẦN VIDEO, AUDIO TRONG HTML5

!   Audio: thuộc t’nh nˆy cho phŽp tắt tiếng của video,
gi‡ trị 'muted'
!   Loop: thuộc t’nh nˆy sẽ k’ch hoạt oạn video ph‡t lại
!   Preload: cho phŽp tải oạn video ngay khi tải trang
web, giảm thời gian tải video

Slide 4 - Lˆm việc với c‡c thˆnh phần video, audio, canvas của HTML5

CuuDuongThanCong.com

8

https://fb.com/tailieudientucntt


THËNH PHẦN VIDEO, AUDIO TRONG HTML5

!   Th•m c‡c thuộc t’nh để video được hỗ trợ tr•n
nhiều tr“nh duyệt:
!   C— nhiều định dạng, codec cho video nhưng kh™ng phải lœc nˆo
c ng hỗ trợ HTML5 video hiển thị tr•n c‡c tr“nh duyệt

!   Định dạng Ogg:
¥  Định dạng theo chuẩn m‹ nguồn mở
¥  Được hỗ trợ bởi c‡c tr“nh duyệt Chrome, Firefox,
Opera

!   Định dạng MP4:
¥  Sử dụng codec H.264 vˆ ‰m thanh sử dụng codec AAC
¥  Được hỗ trợ bởi IE, Safari, iOS vˆ Android
Slide 4 - Lˆm việc với c‡c thˆnh phần video, audio, canvas của HTML5

CuuDuongThanCong.com

9

https://fb.com/tailieudientucntt


THËNH PHẦN VIDEO, AUDIO TRONG HTML5

!   Để oạn video ở cả 2 định dạng Ogg vˆ MP4 sẽ giœp
hiển thị tốt tr•n c‡c tr“nh duyệt vˆ thiết bị


!   Th•m thuộc t’nh type, codecs: m™ tả cấu trœc kiểu
của file ogg, mp4
vorbis >
codecs= avc1.42E01E, mp4a.40.2
>
Slide 4 - Lˆm việc với c‡c thˆnh phần video, audio, canvas của HTML5

CuuDuongThanCong.com

10

https://fb.com/tailieudientucntt


THËNH PHẦN VIDEO, AUDIO TRONG HTML5

!   iều khiển video với Javascript:

Tạo nút sử dụng javascript đề điều khiển video 
Slide 4 - Lˆm việc với c‡c thˆnh phần video, audio, canvas của HTML5

CuuDuongThanCong.com

11

https://fb.com/tailieudientucntt


THËNH PHẦN VIDEO, AUDIO TRONG HTML5

!   Khởi tạo hˆm trong javascript để thực hiện c‡c sự
kiện: Play, Pause, É


Slide 4 - Lˆm việc với c‡c thˆnh phần video, audio, canvas của HTML5

CuuDuongThanCong.com

12

https://fb.com/tailieudientucntt


THËNH PHẦN VIDEO, AUDIO TRONG HTML5

!   Ch•n ‰m thanh vˆo trang web sử dụng HTML5:


Slide 4 - Lˆm việc với c‡c thˆnh phần video, audio, canvas của HTML5

CuuDuongThanCong.com

13

https://fb.com/tailieudientucntt


CANVAS

CuuDuongThanCong.com

https://fb.com/tailieudientucntt


CANVAS
!   Canvas lˆ hˆm API vẽ 2 chiều của HTML5
!   H“nh vẽ sử dụng Canvas:
!   Cập nhật được trong thời gian thực
!   Lưu lại dưới định dạng .png

!   Sử dụng c‡c thˆnh phần Canvas để x‡c định bề
mặt vẽ, nhưng phải x‡c định hướng vẽ vˆ d˜ng kết
quả, h“nh dạng, mˆu sắc với Javascript
!   Canvas lu™n lˆm việc c•ng với javascript
!   C‡c bước lˆm việc với Canvas:
!   Định ngh a thˆnh phần canvas trong HTML
!   Tham chiếu bối cảnh vẽ cho c‡c phần từ — như một
biến trong Javascript
Slide 4 - Lˆm việc với c‡c thˆnh phần video, audio, canvas của HTML5

CuuDuongThanCong.com

15

https://fb.com/tailieudientucntt


CANVAS
!   Khởi tạo:
!   Lệnh canvas:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);


Slide 4 - Lˆm việc với c‡c thˆnh phần video, audio, canvas của HTML5

CuuDuongThanCong.com

16

https://fb.com/tailieudientucntt


CANVAS
var ctx=c.getContext("2d");

!   Đối tượng getContext( 2d ) lˆ đối tượng HTML5
chứa c‡c phương thức vẽ đường path, h“nh hộp,
h“nh tr˜n, character, h“nh ảnh, v.vÉ.
ctx.fillStyle="#FF0000 ;

!   Định ngh a kiểu mˆu t™ lˆ mˆu đỏ
ctx.fillRect(0,0,150,75);

!   Định ngh a vẽ một h“nh chữ nhật k’ch thước
150x75, bắt đầu từ g—c tr•n b•n tr‡i (0,0)
Slide 4 - Lˆm việc với c‡c thˆnh phần video, audio, canvas của HTML5

CuuDuongThanCong.com

17

https://fb.com/tailieudientucntt


CANVAS
!   Ưu iểm của thˆnh phần Canvas:
!   Cho phŽp tạo graphic, h“nh động (animation),
gradient, c‡c đối tượng đồ họa kh‡c bằng m‹
!   ‹ được c‡c tr“nh duyệt phổ biến hỗ trợ
!   Khả n ng mạnh mẽ: lˆm game, animation, chart,
graph, vector, É
!   Kh™ng phải sử dụng th•m plugin

Slide 4 - Lˆm việc với c‡c thˆnh phần video, audio, canvas của HTML5

CuuDuongThanCong.com

18

https://fb.com/tailieudientucntt


CANVAS
!   Vẽ đường path:
!   Đường path: tạo n•n c‡c h“nh dạng cơ sở
Hình 
chữ 
nhật 

Đường 
cong 

path 

Đường 
thẳng 

Hình 
tròn 
Slide 4 - Lˆm việc với c‡c thˆnh phần video, audio, canvas của HTML5

CuuDuongThanCong.com

19

https://fb.com/tailieudientucntt


CANVAS
!   Vẽ h“nh chữ nhật:
.fillStyle()
.fillRect(x,y, width, height)
.strokeStyle()
.strokeRect(x, y, width, height)

!   X,y: tọa độ vẽ h“nh
!   Width, height: k’ch thước h“nh

Tọa độ x,y trên màn hình 

Slide 4 - Lˆm việc với c‡c thˆnh phần video, audio, canvas của HTML5

CuuDuongThanCong.com

20

https://fb.com/tailieudientucntt


CANVAS
!   Vẽ h“nh chữ nhật:
function setup() {
var canvas = document.getElementById('lessonCanvas');
if (canvas.getContext) {
var ctx = canvas.getContext('2d');
ctx.strokeStyle = 'rgb(255, 0, 0)';
ctx.strokeRect(0.5, 0.5, 100, 100);}
}

Slide 4 - Lˆm việc với c‡c thˆnh phần video, audio, canvas của HTML5

CuuDuongThanCong.com

21

https://fb.com/tailieudientucntt


CANVAS
!   Vẽ đường thẳng:
ctx.strokeRect(0, 0, 300, 300);
ctx.moveTo(20, 20);
ctx.lineTo(100, 100);
ctx.lineTo(80, 200);
ctx.lineTo(200, 80);
ctx.lineTo(200, 200);
ctx.lineTo(280, 280);
ctx.stroke();

moveTo(x, y) 

Tạo ra một đường path phụ với tọa độ xác định 

lineTo (x,y) 

Thêm điểm point mới, kết nối với điểm trước đó bằng đường 
thẳng 

Slide 4 - Lˆm việc với c‡c thˆnh phần video, audio, canvas của HTML5

CuuDuongThanCong.com

22

https://fb.com/tailieudientucntt


CANVAS
!   Vẽ đường tr˜n:


Arc(x,y, bán kính ,  2 пr) 

Slide 4 - Lˆm việc với c‡c thˆnh phần video, audio, canvas của HTML5

CuuDuongThanCong.com

23

https://fb.com/tailieudientucntt


CANVAS
!   Vẽ đường cong:
ctx.fillStyle = 'rgb(0,173,104)';
ctx.moveTo(145, 150);
ctx.quadraticCurveTo(120, 200, 170, 280);
ctx.lineTo(190, 280);
ctx.quadraticCurveTo(125, 190, 155, 150);
ctx.fill();
var pt1 = { x: 155, y: 145 };
var pt2 = { x: 93, y: 106 };
var cp1 = { x: 111, y: 154 };
var cp2 = { x: 4, y: 131 };

quadraΥcCurveTo(cpx, cpy, x, y) 
bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y) 
Slide 4 - Lˆm việc với c‡c thˆnh phần video, audio, canvas của HTML5

CuuDuongThanCong.com

24

https://fb.com/tailieudientucntt


CANVAS
!   Vẽ text:
ctx.font = "bold 1.8em sans-serif";
ctx.fillText(text,x,y,maxWidth);

ctx.font = "bold 1.8em 
sans‐serif"; 
ctx.fillText('HELLO MY 
NAME IS', 12, 40); 

Slide 4 - Lˆm việc với c‡c thˆnh phần video, audio, canvas của HTML5

CuuDuongThanCong.com

25

https://fb.com/tailieudientucntt


Tài liệu bạn tìm kiếm đã sẵn sàng tải về

Tải bản đầy đủ ngay

×