Thuộc tính của phần tử đa phương tiện

5.1 Thuộc tính bổ sung

Các phần tử đa phương tiện HTML5 như <audio> và <video> cung cấp nhiều thuộc tính để quản lý việc phát nội dung đa phương tiện. Hiểu biết về những thuộc tính này cho phép tạo ra các trang web tương tác hơn và tiện lợi cho người dùng, có thể điều chỉnh theo nhu cầu khác nhau. Giờ chúng ta sẽ xem xét kỹ hơn các thuộc tính bổ sung có sẵn cho các phần tử <audio> và <video>.

Thuộc tính crossorigin

Thuộc tính crossorigin chỉ định cách trình duyệt nên xử lý các yêu cầu tới tập tin đa phương tiện nằm trên các tên miền khác. Thuộc tính này có thể nhận hai giá trị:

• anonymous: yêu cầu được thực hiện mà không có thông tin xác thực (cookies, tiêu đề ủy quyền, v.v.)
• use-credentials: yêu cầu được thực hiện cùng với thông tin xác thực

Ví dụ:

    
      <audio src="https://example.com/audiofile.mp3" controls crossorigin="anonymous"></audio>
      <video src="https://example.com/videofile.mp4" controls crossorigin="use-credentials" width="800" height="450"></video>
    
  

Thuộc tính nguồn <source>

Thẻ <source> được sử dụng bên trong các phần tử <audio> và <video> để chỉ định nhiều nguồn nội dung đa phương tiện. Điều này giúp đảm bảo sự tương thích trên các trình duyệt khác nhau, vì mỗi trình duyệt có thể hỗ trợ các định dạng khác nhau.

Ví dụ:

    
      <video controls width="600">
        <source src="videofile.mp4" type="video/mp4">
        <source src="videofile.webm" type="video/webm">
        <source src="videofile.ogv" type="video/ogg">
        Trình duyệt của bạn không hỗ trợ phần tử video.
      </video>
    
  

Thuộc tính và tính năng cho phụ đề và track văn bản

HTML5 cung cấp khả năng thêm phụ đề, track văn bản và mô tả thông qua thẻ <track>. Phần tử này hỗ trợ nhiều loại track văn bản như phụ đề, mô tả và chương.

Ví dụ:

    
      <video controls width="600">
        <source src="videofile.mp4" type="video/mp4">
        <track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English">
        <track src="subtitles_es.vtt" kind="subtitles" srclang="es" label="Spanish">
        Trình duyệt của bạn không hỗ trợ phần tử video.
      </video>
    
  

5.2 Quản lý các phần tử đa phương tiện bằng JavaScript

Các phần tử <audio> và <video> cung cấp API để quản lý việc phát thông qua JavaScript. Điều này cho phép tạo ra các phần tử điều khiển tùy chỉnh và hiện thực hóa các kịch bản phát phức tạp.

Ví dụ:

    
      <video id="myVideo" src="videofile.mp4" controls></video>
      <button onclick="playVideo()">Play</button>
      <button onclick="pauseVideo()">Pause</button>
      <button onclick="stopVideo()">Stop</button>
    
  

    
      const video = document.getElementById("myVideo");

      function playVideo() {
        video.play();
      }

      function pauseVideo() {
        video.pause();
      }

      function stopVideo() {
        video.pause();
        video.currentTime = 0;
      }
    
  

Trong ví dụ này, các nút cho phép phát, tạm dừng và dừng video bằng JavaScript.

5.3 Sự kiện của phần tử đa phương tiện

Các phần tử <audio> và <video> hỗ trợ nhiều sự kiện, cho phép theo dõi và phản ứng với các thay đổi trong trạng thái phát.

Các sự kiện chính:

• play: xảy ra khi việc phát bắt đầu
• pause: xảy ra khi việc phát tạm dừng
• ended: xảy ra khi việc phát kết thúc
• timeupdate: xảy ra định kỳ khi thời gian phát hiện tại thay đổi

Ví dụ sử dụng các sự kiện:

    
      <video id="myVideo" src="videofile.mp4" controls></video>
    
  

    
      const video = document.getElementById("myVideo");

      video.addEventListener('play', function() {
        console.log('Video bắt đầu phát');
      });

      video.addEventListener('pause', function() {
        console.log('Video tạm dừng');
      });

      video.addEventListener('ended', function() {
        console.log('Video kết thúc');
      });

      video.addEventListener('timeupdate', function() {
        console.log('Thời gian hiện tại: ' + video.currentTime);
      });
    
  

Mã này minh họa cách theo dõi các sự kiện chính của phần tử đa phương tiện.

1

Опрос

Đa phương tiện trong HTML,  6 уровень,  5 лекция

недоступен

Đa phương tiện trong HTML

Đa phương tiện trong HTML

Открыть