Hướng dẫn video play button html - nút phát video html

Phần tử HTML <video> được sử dụng để hiển thị video trên trang web.

Phần tử HTML

Để hiển thị video trong HTML, hãy sử dụng phần tử <video>:

Thí dụ

& nbsp; & nbsp; Trình duyệt của bạn không hỗ trợ thẻ video.
 
 
Your browser does not support the video tag.

Hãy tự mình thử »

Làm thế nào nó hoạt động

Thuộc tính controls thêm các điều khiển video, như chơi, tạm dừng và âm lượng.

Đó là một ý tưởng tốt để luôn bao gồm các thuộc tính width và height. Nếu chiều cao và chiều rộng không được đặt, trang có thể nhấp nháy trong khi video tải.

Phần tử <source> cho phép bạn chỉ định các tệp video thay thế mà trình duyệt có thể chọn. Trình duyệt sẽ sử dụng định dạng được công nhận đầu tiên.

Văn bản giữa các thẻ <video> và

<video width="320" height="240" autoplay>
  <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
  <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/ogg">
Your browser does not support the video tag.
</video>

HTML Autoplay

Để tự động bắt đầu video, hãy sử dụng thuộc tính

<video width="320" height="240" autoplay>
  <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
  <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/ogg">
Your browser does not support the video tag.
</video>

Thí dụ

& nbsp; & nbsp; Trình duyệt của bạn không hỗ trợ thẻ video.
 
 
Your browser does not support the video tag.

Hãy tự mình thử »

Làm thế nào nó hoạt động Chromium browsers do not allow autoplay in most cases. However, muted autoplay is always allowed.

Thuộc tính controls thêm các điều khiển video, như chơi, tạm dừng và âm lượng.

Thí dụ

& nbsp; & nbsp; Trình duyệt của bạn không hỗ trợ thẻ video.
 
 
Your browser does not support the video tag.

Hãy tự mình thử »

Làm thế nào nó hoạt động

Thuộc tính controls thêm các điều khiển video, như chơi, tạm dừng và âm lượng.

Văn bản giữa các thẻ <video> và <video width="320" height="240" autoplay>   <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">   <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/ogg"> Your browser does not support the video tag. </video>0 sẽ chỉ được hiển thị trong các trình duyệt không hỗ trợ phần tử <video>.

HTML Autoplay

<video width="320" height="240" autoplay>
  <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
  <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/ogg">
Your browser does not support the video tag.
</video>

<video width="320" height="240" autoplay>
  <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
  <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/ogg">
Your browser does not support the video tag.
</video>

<video width="320" height="240" autoplay>
  <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
  <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/ogg">
Your browser does not support the video tag.
</video>

Yếu tố

Trình duyệt Chrome

Firefox

Cuộc đi săn

KHÔNG

Opera

Video HTML - Các loại phương tiện

<video width="320" height="240" autoplay>
  <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
  <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/ogg">
Your browser does not support the video tag.
</video>

<video width="320" height="240" autoplay>
  <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
  <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/ogg">
Your browser does not support the video tag.
</video>

<video width="320" height="240" autoplay>
  <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
  <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/ogg">
Your browser does not support the video tag.
</video>

HTML5 xác định DOM phương thức, thuộc tính, và sự kiện cho phần tử .Nguyễn Văn Hợi vào 10/07/2019. Lượt xem: 1,970

HTML5 xác định DOM phương thức, thuộc tính, và sự kiện cho phần tử .

Điều này cho phép bạn tải, phát và dừng video cũng như cài đặt độ dài và âm lượng.

Ngoài ra còn có các sự kiện DOM có thể thông báo cho bạn khi video bắt đầu phát, bị tạm dừng, v.v.

Ví dụ sử dụng JavaScript

Để tham khảo thêm về DOM các bạn có thể vào đường dẫn  HTML5 Audio/Video DOM Reference.

Các thẻ video HTML5

<video width="320" height="240" controls>
  <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
  <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/ogg">
Your browser does not support the video tag.
</video>

Thẻ

Mô tả

Bạn cũng nên thêm thuộc tính width và height, nếu không đặt kích thước cho video, trang có thể bị nhấp nháy (do chưa xác định được kích thước video) khi tải trang.

Xác định một video hoặc phim

Xác định tài nguyên cho các phần tử media như và (dùng thuộc tính src để dẫn nguồn cho video và audio)

Xác định phụ đề trong trình phát media

Trích nguồn từ: (https://www.w3schools.com/html/html5_video.asp)

Các thẻ video HTML5

<video width="320" height="240" autoplay>
  <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
  <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/ogg">
Your browser does not support the video tag.
</video>

Thẻ

Mô tả

Trong HTML5, có 3 định dạng video được hỗ trợ : MP4, WebM, và Ogg.

Trình duyệt hỗ trợ cho các định dạng khác nhau là:

NO

Internet Explorer

YES

NO

Chrome

Firefox

<!DOCTYPE html>

<html>

<body>



<div style="text-align:center">

  <button onclick="playPause()">Play/Pause</button>

  <button onclick="makeBig()">Big</button>

  <button onclick="makeSmall()">Small</button>

  <button onclick="makeNormal()">Normal</button>

  <br><br>

  <video id="video1" width="420">

 <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
  <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/ogg">
    Your browser does not support HTML5 video.

  </video>

</div>



<script>

var myVideo = document.getElementById("video1");



function playPause() {

  if (myVideo.paused)

    myVideo.play();

  else

    myVideo.pause();

}



function makeBig() {

    myVideo.width = 560;

}



function makeSmall() {

    myVideo.width = 320;

}



function makeNormal() {

    myVideo.width = 420;

}

</script>



<p>Video courtesy of <a href="https://www.bigbuckbunny.org/" target="_blank">Big Buck Bunny</a>.</p>



</body>

</html>

Safari HTML5 Audio/Video DOM Reference.

Opera

HTML video – Phương thức, thuộc tính và sự kiện.