Bài giảng HTML5 - Bài 4: Làm việc với các thành phần Video, Audio, Canvas của HTML5 (Mới)

Làm việc với các thành phần video, audio, canvas của HTML5 6 
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 7 
<video src=‘video/BigBuck.ogg’ controls poster=‘poster854.jpg’ 
width=‘320’ height=‘180’ > 
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 8 
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 9 
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 
Slide 4 - Làm việc với các thành phần video, audio, canvas của HTML5 10 
<source src=‘video/BigBuck.ogg’ type=‘video/ogg; codecs=“theora, 
vorbis”’> 
<source src=‘video/BigBuck.mp4’ type=‘video/mp4; 
codecs=“avc1.42E01E, mp4a.40.2” ’ > 
THÀNH PHẦN VIDEO, AUDIO TRONG HTML5 
   Điều khiển video với Javascript: 
Slide 4 - Làm việc với các thành phần video, audio, canvas của HTML5 11 
Tạo	
  nút	
  sử	
  dụng	
  javascript	
  đề	
  điều	
  khiển	
  video	
  
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 12 
 var video = document.getElementsByTagName('video')[0]; 
 var playPause = document.getElementById('playPause'); 
function setButtonWidth(e){ 
 playPause.style.width = video.videoWidth + 'px'; 
} 
function setPlayPause(e){ 
 if(video.paused) { 
 playPause.value = 'Play'; 
 playPause.onclick = function(e) { video.play(); } 
 }else{ 
 playPause.value = 'Pause'; 
 playPause.onclick = function(e) { video.pause(); } 
 } 
} 
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 13 
CANVAS 
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 15 
CANVAS 
   Khởi tạo: 
  Lệnh canvas: 
  Kết hợp vẽ với Javascript: 
Slide 4 - Làm việc với các thành phần video, audio, canvas của HTML5 16 
<canvas id="myCanvas" width="200" height="100" style="border:1px 
solid #c3c3c3;“> 
 var c=document.getElementById("myCanvas"); 
 var ctx=c.getContext("2d"); 
 ctx.fillStyle="#FF0000"; 
 ctx.fillRect(0,0,150,75); 
CANVAS 
   Đố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. 
   Định nghĩa kiểu màu tô là màu đỏ 
   Đị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 17 
 var ctx=c.getContext("2d"); 
 ctx.fillStyle="#FF0000“; 
 ctx.fillRect(0,0,150,75); 
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 18 
CANVAS 
   Vẽ đường path: 
   Đường path: tạo nên các hình dạng cơ sở 
Slide 4 - Làm việc với các thành phần video, audio, canvas của HTML5 19 
path	
  
Hình	
  
chữ	
  
nhật	
  
Đường	
  
thẳng	
  
Hình	
  
tròn	
  
Đường	
  
cong	
  
CANVAS 
   Vẽ hình chữ nhật: 
  X,y: tọa độ vẽ hình 
  Width, height: kích thước hình 
Slide 4 - Làm việc với các thành phần video, audio, canvas của HTML5 20 
.fillStyle() 
.fillRect(x,y, width, height) 
.strokeStyle() 
.strokeRect(x, y, width, height) 
Tọa	
  độ	
  x,y	
  trên	
  màn	
  hình	
  
CANVAS 
   Vẽ hình chữ nhật: 
Slide 4 - Làm việc với các thành phần video, audio, canvas của HTML5 21 
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);} 
} 
CANVAS 
   Vẽ đường thẳng: 
Slide 4 - Làm việc với các thành phần video, audio, canvas của HTML5 22 
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	
  
CANVAS 
   Vẽ đường tròn: 
Slide 4 - Làm việc với các thành phần video, audio, canvas của HTML5 23 
 var c=document.getElementById("myCanvas"); 
 var ctx=c.getContext("2d"); 
 ctx.fillStyle="#FF0000"; 
 ctx.beginPath(); 
 ctx.arc(70,18,15,0,Math.PI*2,true); 
 ctx.closePath(); 
 ctx.fill(); 
Arc(x,y,	
  bán	
  kính	
  ,	
  	
  2	
  пr)	
  
CANVAS 
   Vẽ đường cong: 
Slide 4 - Làm việc với các thành phần video, audio, canvas của HTML5 24 
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 }; 
quadraUcCurveTo(cpx,	
  cpy,	
  x,	
  y)	
  
bezierCurveTo(cp1x,	
  cp1y,	
  cp2x,	
  cp2y,	
  x,	
  y)	
  
CANVAS 
   Vẽ text: 
Slide 4 - Làm việc với các thành phần video, audio, canvas của HTML5 25 
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);	
  
CANVAS 
   Tô màu gradient: 
Slide 4 - Làm việc với các thành phần video, audio, canvas của HTML5 26 
var c=document.getElementById("myCanvas"); 
var ctx=c.getContext("2d"); 
var grd=ctx.createLinearGradient(0,0,170,0); 
grd.addColorStop(0,"black"); 
grd.addColorStop(1,"white"); 
ctx.fillStyle=grd; 
ctx.fillRect(20,20,150,100); 
Phương	
  thức	
  xác	
  định	
  màu	
  sắc	
  và	
  vị	
  trí	
  của	
  
đối	
  tượng	
  gradient	
  
Thường	
  được	
  sử	
  dụng	
  cùng	
  
createLinearGradient()	
  và	
  
createRadialGradient	
  ()	
  
CANVAS 
   Chèn thêm hình ảnh: 
Slide 4 - Làm việc với các thành phần video, audio, canvas của HTML5 27 
context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height); 
Tham	
  số	
   Diễn	
  tả	
  
Img	
   Chỉ	
  định	
  thành	
  phần	
  hình	
  ảnh	
  sử	
  dụng	
  
Sx	
   Tùy	
  chọn.	
  	
  Tọa	
  độ	
  x	
  nơi	
  tọa	
  độ	
  bắt	
  đầu	
  	
  
Sy	
   Tùy	
  chọn.	
  	
  Tọa	
  độ	
  y	
  nơi	
  tọa	
  độ	
  bắt	
  đầu	
  	
  
Swidth	
   Tùy	
  chọn.	
  Chiều	
  rộng	
  của	
  hình	
  ảnh	
  cắt	
  bớt	
  
Sheight	
   Tùy	
  chọn.	
  Chiều	
  cao	
  của	
  hình	
  ảnh	
  cắt	
  bớt	
  
X,	
  y	
   Tọa	
  độ	
  x,	
  y	
  để	
  đặt	
  hình	
  ảnh	
  	
  
Width,	
  height	
   Tùy	
  chọn.	
  Chiều	
  dài,	
  rộng	
  của	
  hình	
  ảnh	
  sử	
  dụng	
  
CANVAS 
   Sử dụng biến đổi: 
  Sử dụng kết hợp với khung hình vẽ sẽ tạo ra hình 
ảnh đẹp hơn 
  3 loại biến đổi: 
•   Scaling 
•   Rotating 
•   Translating 
  Sử dụng kết hợp với hàm: save, restore 
Slide 4 - Làm việc với các thành phần video, audio, canvas của HTML5 28 
ctx.fillRect(30, 120, 40, 40); 
ctx.translate(0, 20); 
ctx.fillRect(80, 120, 40, 40); 
CANVAS 
   Vẽ hình chuyển động lặp (loop): 
  Kết hợp sử dụng với hàm javascript (setInterval), sẽ 
tạo ra được những chuyển động lặp 
Slide 4 - Làm việc với các thành phần video, audio, canvas của HTML5 29 
function draw() { 
 drawBackground(); 
 ctx.drawImage(img, x, y);
 x += 3; 
 if(x > 300){ 
 x = -50; 
 y=Math.random()*300; 
 } 
 } 
function setup() { 
 var canvas = 
document.getElementById('lessonCanvas'); 
 if (canvas.getContext) { 
 ctx = canvas.getContext('2d'); 
 img = new Image(); 
 img.onload = function(){ 
 setInterval(function () { draw(); }, 36);
 } 
 img.src = ‘’; 
 } 
 } 
TỔNG KẾT 
   Khi chèn video, âm thanh vào trang web nên khai 
báo các định dạng .ogg, .mp4, .mp3 để được các 
trình duyệt phổ biến hỗ trợ tốt nhất 
   Khi vẽ các hình cơ bản với Canvas, điều cần chú ý: 
  Tọa độ vẽ 
  Kích thước 
  Hàm tính đặc biệt (chu vi hình tròn) 
   Sử dụng kết hợp Canvas với Javascript để được 
hình ảnh tốt nhất 
Slide 4 - Làm việc với các thành phần video, audio, canvas của HTML5 30