Thẻ chèn video - audio vào trong trang html
Chú ý!Video hướng dẫn khai báo biến - thực thi code php bằng dòng lệnh trên xampp

Thẻ chèn video - audio vào trong trang html


Tự học html css javascript 12/12/2016 345

Hướng dẫn chèn audio (âm thanh) bằng thẻ <audio>, chèn video bằng thẻ <video>, <object>, <iframe>, <embed> - video youtube vào trang html

Các bạn đã tìm hiểu cách chèn ảnh bằng thẻ img vào trang web. Âm thanh (audio) vào video là 2 định dạng file đa phương tiện hay được sử dụng trên website bên cạnh hình ảnh. Bài này hướng dẫn chèn âm thanh (audio) / video trong html5.

Chèn Âm Thanh

Sử dụng thẻ <audio>  - với 2 tham số cần lưu ý là src: đường dẫn tới file lưu trữ và loại audio (audio type). Trong đó, khái niệm về đường dẫn đã được đề cập ở bài chèn ảnh bằng thẻ img. 

Gỉa sử, có tập tin audio.mp3 - tại vị trí file lưu trữ code html, đoạn code sau để chèn audio này vào trang html:

<audio controls="controls">
  <source src="audio.mp3" type="audio/mpeg" />
  Your browser does not support the audio tag (trình duyệt không hỗ trợ thẻ audio)
</audio>

Một số thuộc tính khác:

  • autoplay: tự động phát khi truy cập trang web -
  • controls: thêm các nút play/pause...

Ví dụ 1: Chèn audio vào trang html với thuộc tính autoplay, controls: play, pause

<audio autoplay="autoplay" controls="controls">
	<source src="audio.mp3" type="audio/mpeg" />
	Your browser does not support the audio tag (trình duyệt không hỗ trợ thẻ audio)
</audio>

Hiện tại, thẻ audio hỗ trợ 3 định dạng file: 

Định dạng MIME-type
MP3 audio/mpeg
Wav audio/wav
Ogg audio/ogg

Tuy nhiên, không phải trình duyệt nào cũng hỗ trợ thẻ audio tham khảo: các trình duyệt hỗ trợ thẻ audio

Chèn Video

Trước đây, ở phiên bản HTML4 sử dụng các thẻ object, embed , iframe để chèn video vào trong trang html. Trình duyệt cần cài đặt 1 player để chạy được các file này như flashplayer (swf). Sang tới HTML5 trình duyệt không cần phải cài đặt thêm plugin hỗ trợ (flashplayer) - bằng cách sử dụng thẻ video.

Thẻ video trong html5

Ví dụ 2: Chèn video vào trang web bằng thẻ video trong html5

<video width="320" height="240" controls="controls">
  <source src="video.mp4" type="video/mp4" />
  <source src="video.ogg" type="video/ogg" />
  Your browser does not support the video tag ( trình duyệt không hỗ trợ thẻ video )
</video>

Trong đó cần lưu ý đến type và trình duyệt hỗ trợ - tham khảo thêm ở đây

Thẻ object

Thường hay sử dụng để chèn một video flash (swf) - dạng hình ảnh động như các đoạn quảng cáo, banner động, ...

Ví dụ 3: Chèn video flash (swf) vào trang html

<object width="320" height="400" data="flash_video.swf"></object>

Trong đó các thuộc tính: 

  • width: chiều rộng màn hình video (pixel)
  • height: chiều cao màn hình video (pixel)
  • data: đường dẫn (URL) tới file video
  • type: loại file đa phương tiện được sử dụng - tham khảo ở đây

Thẻ embed sử dụng tương tự nhưng thay thuộc tính data bằng src

<embed width="320" height="400" src="flash_video.swf" />
 

Thẻ iframe

Thông thường, thẻ iframe dùng để tải một đoạn mã html khác vào trang html hiện tại - có thể chia một trang thành các vùng khác nhau. Mỗi vùng lưu trữ vào 1 file html rồi sau đó ghép lại, tiện cho thiết kế.

Chia khung trong html

Như hình trên, sẽ tạo ra 3 file header.html là vùng title, content.html là vùng frameholder, nav.html là vùng nav

iframe cũng được sử dụng để chèn video vào trong trang web. Ở đây hướng dẫn chèn video youtube vào trang html.

Bước 1: Truy cập tới đường dẫn youtube của một video - ví dụ: https://www.youtube.com/watch?v=vq3GlW82oRg
Bước 2: Nhấn vào nút chia sẻ - copy đoạn code đó rồi dán vào vị trí cần hiển thị video

Ví dụ 4: Chèn video youtube vào trang web sử dụng thẻ iframe

<iframe 
	width="560" height="315" 
	src="https://www.youtube.com/embed/vq3GlW82oRg" 
	frameborder="0" allowfullscreen="allowfullscreen">
</iframe>

Trong đó:

  • width: chiều rộng của khung hiển thị tính bằng pixel
  • height: chiều cao của khung hiển thị tính bằng pixel
  • src: đường dẫn tới trang video
  • frameborder: xác định đường viền cho khung
  • allowfullscreen: cho phép xem toàn màn hình

Tổng Kết

Bài này hướng dẫn nhiều loại thẻ để chèn video và audio vào một trang web. Ngoài ra các bạn có thể tìm hiểu cài đặt JWPlayer, một player video phổ biến, mạnh mẽ - nhiều tính năng. Kết thúc phần html cơ bản, đủ để các bạn có thể thực hành thiết kế trang web đơn giản. 


Bài cùng chuyên mục:


  • Thẻ chèn video - audio vào trong trang html
  • Các thẻ phân chia khu vực - div span - thông tin address - trích dẫn blockquote - định dạng pre trong html
  • Tạo biểu mẫu - form nhập liệu trong html
  • Tạo bảng (table) trong html
  • Các thẻ căn lề - thay đổi nền trang - chèn ảnh - siêu liên kết - khối văn bản trong html
  • Các thẻ định dạng kiểu chữ và văn bản trong html
  • Các thẻ cơ bản trong HTML
  • Giới thiệu ngôn ngữ HTML

  • Bài liên quan:



    Bình luận:

    
    tự học html