Posts Tagged HTML
Tìm hiểu về HTML5 – Phần V
Hỗ trợ Multimedia
Web không thể hấp dẫn nếu thiếu hình ảnh và âm thanh! Ngày nay, các dịch vụ giải trí đa phương tiện như nghe nhạc, xem phim trực tuyến ngày càng nở rộ và trở thành một phần quan trọng của Internet. Cộng với việc số người sử dụng liên tục gia tăng và băng thông mạng ngày càng được mở rộng, có lẽ đã đến lúc các tổ chức phát triển HTML cần nghĩ đến việc hỗ trợ multimedia một cách nghiêm túc. Và thật may, họ đã làm điều đó trong HTML5!
Làm việc với thẻ <video> và <audio>
Khả năng hỗ trợ đa phương tiện trong HTML5 được hiện thực qua việc bổ sung hai thẻ mới là <video> và <audio>. Hãy thử tưởng tượng đây là tất cả những gì bạn cần để thêm một đoạn phim vào trang web:
<video src=“myVideo.mp4”></video>
Quá đơn giản, phải không? Thậm chí có thể còn đơn giản hơn nhiều so với việc nhúng một đối tượng Flash vào trang web. Với HTML5, video chỉ còn cách bạn có một dòng code mà thôi!
Tuy nhiên, sẽ không có gì đáng nói nếu đó là tất cả những gì HTML cho phép. Một khi đưa các loại nội dung trên vào website của mình, bạn hẳn mong ước có một cách tương tác với chúng. Một nhu cầu phổ biến là thêm các nút điều khiển cơ bản (như Play/Pause) để người truy cập có thể chủ động phát/ngưng đoạn phim của họ. Thẻ <video> cung cấp thuộc tính controls để đáp ứng nhu cầu này, chúng ta chỉ cần sửa câu khai báo lại như sau:
<video src=“myVideo.mp4” controls></video>
Thế là người sử dụng đã có thêm một chút khả năng tương tác rồi đấy, mà bạn thì lại không phải mất thêm giọt mồ hôi nào! Bên cạnh đó, thẻ <video> còn có nhiều thuộc tính hữu dụng khác cho các bạn thích khám phá. Hãy thử áp dụng các thuộc tính sau và xem kết quả nhé:
- autoplay: tự động chơi đoạn video khi đã download xong (lưu ý là các đoạn video theo mặc định sẽ không tự play, do đó bạn phải thêm thuộc tính này nếu bạn muốn đoạn video được phát tự động mỗi khi có người truy cập trang web)
- height/width: hai thuộc tính này cho phép quy định kích thước (chiều cao + chiều rộng) của vùng chứa video
- loop: sử dụng thuộc tính này khi bạn muốn đoạn video được phát lặp đi lặp lại liên tục.
Cuối cùng, thẻ <audio> cung cấp các chức năng tương tự khi bạn cần làm việc với các file âm thanh. Việc thêm một đoạn nhạc giờ đây trở nên quá dễ dàng:
<audio autoplay controls> <source src="myAudio.mp3"/> </audio>
JavaScript API
Không chỉ dừng lại ở mức khai báo, HTML5 còn đưa ra một giao diện lập trình để tương tác với các nội dung số trên. Bảng sau đây liệt kê một số hàm và thuộc tính thường dùng nhất:
| Tên | Chức Năng |
| Hàm | |
| load() | Nạp file để sẵn sàng phát. |
| play() | Phát nội dung. Nếu file nội dung chưa được nạp thì nó sẽ được nạp tự động. Nếu đoạn phim hoặc nhạc đang ở trạng thái paused thì nó sẽ được phát tiếp từ vị trí ngưng trước đó. |
| pause() | Tạm ngưng phát nội dung. |
| canPlayType(type) | Kiểm tra xem định dạng file trong tham số type có được hỗ trợ hay không. |
| Thuộc tính | |
| currentSrc | Tên và đường dẫn tới file đang được phát. |
| duration | Thời lượng của đoạn phim hay nhạc đang phát. |
| paused | Giá trị true nghĩa là việc phát đang bị tạm ngưng. |
| ended | Giá trị true nghĩa là việc phát đã hoàn tất. |
| autoplay | Cho phép kiểm soát việc tự động phát nội dung. |
| loop | Giá trị true nghĩa là nội dung sẽ được phát lặp. |
| controls | Cho phép kiểm soát việc ẩn/hiện các nút điều khiển. |
| volume | Điều chỉnh âm lượng. |
| muted | Ngắt tiếng. |
Ví dụ sau minh họa cách sử dụng JavaScript API để tự tạo nút Play cho trình chơi nhạc:
<audio id="audioPlayer"> <source src="myAudio.mp3"/> </audio> <button id="toggleBtn" onclick="toggle()">Play</button> <script type="text/javascript"> function toogle() { var music = document.getElementById("audioPlayer"); var toggle = document.getElementById("toggleBtn"); if (music.paused) { music.play(); toggle.innerHTML = "Pause"; } else { music.pause(); toggle.innerHTML = "Play"; } } </script>
Một vài lưu ý
Phần lớn các trình duyệt ngày nay đều đã hỗ trợ các thẻ <audio> và <video> của HTML5. Nếu bạn luôn luôn sử dụng các phiên bản mới nhất của IE, Chrome, hay FireFox, bạn không cần phải quá lo lắng về vấn đề tương thích trình duyệt.
Trong trường hợp bạn phải làm việc với các trình duyệt cũ hơn, bạn có thể kiểm tra khả năng của trình duyệt đó bằng đoạn code sau:
var support = !!(document.createElement('video').canPlayType);
Mặc dù khả năng hỗ trợ multimedia trong HTML5 là rất tuyệt nhưng vẫn tồn tại một vài hạn chế: chưa có tiêu chuẩn chính thức cho media streaming và khả năng hỗ trợ người khuyết tật chưa hoàn chỉnh. Tuy nhiên, những gì đạt được với HTML5 rõ ràng là một bước tiến dài, và từ nay đến ngày HTML5 chính thức ra đời, biết đâu vẫn còn nhiều thay đổi sẽ được thực hiện.
* Mục lục:
Tìm hiểu về HTML5 – Phần IV (tiếp)
Thực hành: Vẽ đồ thị với HTML5 Canvas API
Trong phần trước chúng ta đã cùng nhau tìm hiểu về HTML5 Canvas API. Tuy nhiên, cách dễ nhất để biết lập trình là phải thực hành nó! Bài viết này sẽ trình bày cách ứng dụng Canvas API để thực hiện một công việc phổ biến: vẽ đồ thị.
Bước 1: khai báo một canvas trong HTML. Lưu ý thuộc tính id của tag <canvas> là cần thiết để dễ dàng tương tác sau này.
<!DOCTYPE html> <head> <meta charset="utf-8”/> <title>Worm Chart</title> </head> <body> <canvas id=“chart” width=“800” height=“600”></canvas> </body> </html>
Bước 2: JavaScript sẽ được sử dụng để làm việc với canvas. Do đó chúng ta cần thêm cặp tag <script> sau vào trong phần <head> của trang web.
<script type=“text/javascript”> </script>
Bước 3: khai báo biến để chứa dữ liệu cho đồ thị. Trong ví dụ này chúng ta sử dụng một mảng thể hiện thông tin về doanh thu của từng tháng. Đặt đoạn code sau trong tag <script>
var data = new Array(12); data[0] = “Jan,280”; data[1] = “Feb,320”; data[2] = “Mar,240”; data[3] = “Apr,470”; data[4] = “May,310”; data[5] = "Jun,260"; data[6] = "Jul,510"; data[7] = "Aug,310"; data[8] = "Sep,400"; data[9] = "Oct,270"; data[10] = "Nov,340"; data[11] = "Dec,440";
Bước 4: định nghĩa hàm vẽ đồ thị.
function graph() { // lấy về phần tử canvas để thao tác var canvas = document.getElementById(‘chart’); // kiểm tra phần tử canvas trả về là hợp lệ if (canvas && canvas.getContext) { var context = canvas.getContext(‘2d’); drawChart(context, data, 50, 50, (canvas.height - 20), 100); } }
Hàm graph() chỉ thực hiện một công việc đơn giản: lấy về phần tử canvas được khai báo trong trang web theo id của nó. Sau khi đảm bảo rằng canvas này là hợp lệ, graph() truy vấn context của canvas và chứa nó trong biến context. Đối tượng context này sẽ rất quan trọng trong các hoạt động vẽ sau này. Chi tiết về cách vẽ đồ thị được giao lại cho hàm tiện ích drawChart() xử lý.
function drawChart(context, data, startX, colWidth, chartHeight, interval) { // vẽ hai trục X, Y của đồ thị context.lineWidth = “1.0”; var startY = 580; drawLine(context, startX, startY, startX, 30); drawLine(context, startX, startY, 770, startY); context.lineWidth = "0.0”; var maxValue = 0;
// lấy dữ liệu từ mảng và vẽ các cột đồ thị for (var i = 0; i < data.length; i++) { var values = data[i].split(“,”); var name = values[0]; var height = parseInt(values[1]);
if (parseInt(height) > parseInt(maxValue))
maxValue = height;
context.fillStyle = “azure”; drawRectangle(context, startX + (i * colWidth) + i, (chartHeight - height), colWidth, height, true); // vẽ tên cột trên trục X context.textAlign = “left”; context.fillStyle = “#00F”; context.fillText(name, startX + (i * colWidth) + i, chartHeight + 10, 200); }
// vẽ các mốc trên trục Y var numMarkers = Math.ceil(maxValue / interval); context.textAlign = “right”; context.fillStyle = “#F0F”; var markerValue = 0;
for (var i = 0; i < numMarkers; i++)
{
context.fillText(markerValue, (startX - 5),(chartHeight - markerValue), 20);
markerValue += interval;
}
}
function drawLine(context, startx, starty, endx, endy)
{
context.beginPath();
context.moveTo(startx, starty);
context.lineTo(endx, endy);
context.closePath();
context.stroke();
}
function drawRectangle(context, x, y, w, h, fill)
{
context.beginPath();
context.rect(x, y, w, h);
context.closePath();
context.stroke();
if (fill)
context.fill();
}
Có lẽ cũng không cần giải thích gì thêm về đoạn code trên. Sau khi hoàn tất, công việc cuối cùng chỉ là gọi hàm graph() để vẽ đồ thị.
Bước 5: gọi hàm graph trong sự kiện OnLoad của trang web.
<body onLoad=“graph();”>
Thế là xong! Bây giờ bạn chỉ cần lưu trang web lại và mở nó lên với một trình duyệt hỗ trợ HTML5 (tôi sử dụng Google Chrome 8 để thử nghiệm). Kết quả nhận được sẽ tương tự như sau:
* Source code:
Download file HTML hoàn chỉnh chứa các đoạn code trong bài ở đây
* Mục lục:
