Hướng dẫn html video tag enable download - thẻ video html cho phép tải xuống

Thử nó

Ví dụ trên cho thấy cách sử dụng đơn giản của phần tử

$( document ).ready(function() {
  $("video").each(function(){
    $(this).attr('controlsList','nodownload');
    $(this).load();
  });
});

$( document ).ready(function() {
  $("video").each(function(){
    $(this).attr('controlsList','nodownload');
    $(this).load();
  });
});

$( document ).ready(function() {
  $("video").each(function(){
    $(this).attr('controlsList','nodownload');
    $(this).load();
  });
});

Nội dung bên trong các thẻ mở và đóng

$( document ).ready(function() {
  $("video").each(function(){
    $(this).attr('controlsList','nodownload');
    $(this).load();
  });
});

Thuộc tính

Giống như tất cả các yếu tố HTML khác, yếu tố này hỗ trợ các thuộc tính toàn cầu.

$( document ).ready(function() {
  $("video").each(function(){
    $(this).attr('controlsList','nodownload');
    $(this).load();
  });
});

Một thuộc tính boolean; Nếu được chỉ định, video sẽ tự động bắt đầu phát lại ngay khi có thể làm như vậy mà không dừng để hoàn thành tải dữ liệu.

Lưu ý: Các trang web tự động phát âm thanh (hoặc video có bản nhạc âm thanh) có thể là một trải nghiệm khó chịu cho người dùng, vì vậy nên tránh khi có thể. Nếu bạn phải cung cấp chức năng Autoplay, bạn nên thực hiện chọn tham gia (yêu cầu người dùng cụ thể bật nó). Tuy nhiên, điều này có thể hữu ích khi tạo các yếu tố phương tiện có nguồn sẽ được đặt sau, dưới sự kiểm soát của người dùng. Xem Hướng dẫn Autoplay của chúng tôi để biết thêm thông tin về cách sử dụng autoplay đúng cách. Sites that automatically play audio (or videos with an audio track) can be an unpleasant experience for users, so should be avoided when possible. If you must offer autoplay functionality, you should make it opt-in (requiring a user to specifically enable it). However, this can be useful when creating media elements whose source will be set at a later time, under user control. See our autoplay guide for additional information about how to properly use autoplay.

Để vô hiệu hóa video Autoplay,

$( document ).ready(function() {
  $("video").each(function(){
    $(this).attr('controlsList','nodownload');
    $(this).load();
  });
});

$( document ).ready(function() {
  $("video").each(function(){
    $(this).attr('controlsList','nodownload');
    $(this).load();
  });
});

Trong một số trình duyệt (ví dụ: Chrome 70.0) Autoplay không hoạt động nếu không có thuộc tính

Một thuộc tính boolean mà nếu

Nếu thuộc tính này có mặt, trình duyệt sẽ cung cấp các điều khiển để cho phép người dùng điều khiển phát lại video, bao gồm âm lượng, tìm kiếm và tạm dừng/tiếp tục phát lại.

Thuộc tính

Các giá trị được phép là

jQuery( document ).ready(function() {
  jQuery("video").each(function(){
    jQuery(this).attr('controlsList','nodownload');
    jQuery(this).load();
  });
});

jQuery( document ).ready(function() {
  jQuery("video").each(function(){
    jQuery(this).attr('controlsList','nodownload');
    jQuery(this).load();
  });
});

Sử dụng thuộc tính

jQuery( document ).ready(function() {
  jQuery("video").each(function(){
    jQuery(this).attr('controlsList','nodownload');
    jQuery(this).load();
  });
});

jQuery( document ).ready(function() {
  jQuery("video").each(function(){
    jQuery(this).attr('controlsList','nodownload');
    jQuery(this).load();
  });
});

Thuộc tính được liệt kê này cho biết có nên sử dụng CORS để tìm nạp video liên quan hay không. Tài nguyên hỗ trợ CORS có thể được sử dụng lại trong phần tử

jQuery( document ).ready(function() {
  jQuery("video").each(function(){
    jQuery(this).attr('controlsList','nodownload');
    jQuery(this).load();
  });
});

jQuery( document ).ready(function() {
  jQuery("video").each(function(){
    jQuery(this).attr('controlsList','nodownload');
    jQuery(this).load();
  });
});

Gửi một yêu cầu có nguồn gốc chéo mà không cần chứng chỉ. Nói cách khác, nó gửi tiêu đề HTTP

jQuery( document ).ready(function() {
  jQuery("video").each(function(){
    jQuery(this).attr('controlsList','nodownload');
    jQuery(this).load();
  });
});

jQuery( document ).ready(function() {
  jQuery("video").each(function(){
    jQuery(this).attr('controlsList','nodownload');
    jQuery(this).load();
  });
});

jQuery( document ).ready(function() {
  jQuery("video").each(function(){
    jQuery(this).attr('controlsList','nodownload');
    jQuery(this).load();
  });
});

Gửi một yêu cầu có nguồn gốc chéo với thông tin xác thực. Nói cách khác, nó gửi tiêu đề HTTP

jQuery( document ).ready(function() {
  jQuery("video").each(function(){
    jQuery(this).attr('controlsList','nodownload');
    jQuery(this).load();
  });
});

<video controls>
  <source src="myVideo.webm" type="video/webm" />
  <source src="myVideo.mp4" type="video/mp4" />
  <p>
    Your browser doesn't support HTML video. Here is a
    <a href="myVideo.mp4">link to the videoa> instead.
  p>
video>

Khi không có, tài nguyên được tìm nạp mà không có yêu cầu CORS (tức là mà không gửi tiêu đề

jQuery( document ).ready(function() {
  jQuery("video").each(function(){
    jQuery(this).attr('controlsList','nodownload');
    jQuery(this).load();
  });
});

jQuery( document ).ready(function() {
  jQuery("video").each(function(){
    jQuery(this).attr('controlsList','nodownload');
    jQuery(this).load();
  });
});

jQuery( document ).ready(function() {
  jQuery("video").each(function(){
    jQuery(this).attr('controlsList','nodownload');
    jQuery(this).load();
  });
});

Ngăn chặn trình duyệt đề xuất menu ngữ cảnh hình ảnh trong ảnh hoặc tự động yêu cầu hình ảnh trong ảnh trong một số trường hợp.

<video controls>
  <source src="myVideo.webm" type="video/webm" />
  <source src="myVideo.mp4" type="video/mp4" />
  <p>
    Your browser doesn't support HTML video. Here is a
    <a href="myVideo.mp4">link to the videoa> instead.
  p>
video>

Một thuộc tính boolean được sử dụng để vô hiệu hóa khả năng phát lại từ xa trong các thiết bị được gắn bằng dây có dây (HDMI, DVI, v.v.) và các công nghệ không dây (Miracast, Chromecast, DLNA, AirPlay, v.v.).

Trong Safari, bạn có thể sử dụng

<video controls>
  <source src="myVideo.webm" type="video/webm" />
  <source src="myVideo.mp4" type="video/mp4" />
  <p>
    Your browser doesn't support HTML video. Here is a
    <a href="myVideo.mp4">link to the videoa> instead.
  p>
video>

<video controls>
  <source src="myVideo.webm" type="video/webm" />
  <source src="myVideo.mp4" type="video/mp4" />
  <p>
    Your browser doesn't support HTML video. Here is a
    <a href="myVideo.mp4">link to the videoa> instead.
  p>
video>

Chiều cao của khu vực hiển thị của video, trong các pixel CSS (chỉ có giá trị tuyệt đối; không có tỷ lệ phần trăm).

<video controls>
  <source src="myVideo.webm" type="video/webm" />
  <source src="myVideo.mp4" type="video/mp4" />
  <p>
    Your browser doesn't support HTML video. Here is a
    <a href="myVideo.mp4">link to the videoa> instead.
  p>
video>

Một thuộc tính boolean; Nếu được chỉ định, trình duyệt sẽ tự động tìm kiếm trở lại bắt đầu khi đến cuối video.

Một thuộc tính Boolean cho biết cài đặt mặc định của âm thanh có trong video. Nếu được thiết lập, âm thanh ban đầu sẽ bị im lặng. Giá trị mặc định của nó là

const elem = document.querySelector("video");

elem.audioTracks.onaddtrack = (event) => {
  trackEditor.addTrack(event.track);
};

elem.audioTracks.onremovetrack = (event) => {
  trackEditor.removeTrack(event.track);
};

const elem = document.querySelector("video");

elem.audioTracks.onaddtrack = (event) => {
  trackEditor.addTrack(event.track);
};

elem.audioTracks.onremovetrack = (event) => {
  trackEditor.removeTrack(event.track);
};

Một thuộc tính Boolean chỉ ra rằng video sẽ được phát "nội tuyến", nằm trong khu vực phát lại của phần tử. Lưu ý rằng sự vắng mặt của thuộc tính này không ngụ ý rằng video sẽ luôn được phát trên toàn màn hình.

const elem = document.querySelector("video");

elem.audioTracks.onaddtrack = (event) => {
  trackEditor.addTrack(event.track);
};

elem.audioTracks.onremovetrack = (event) => {
  trackEditor.removeTrack(event.track);
};

Một URL cho một hình ảnh được hiển thị trong khi video đang tải xuống. Nếu thuộc tính này không được chỉ định, không có gì được hiển thị cho đến khi khung đầu tiên có sẵn, thì khung đầu tiên được hiển thị dưới dạng khung áp phích.

const elem = document.querySelector("video");

elem.audioTracks.onaddtrack = (event) => {
  trackEditor.addTrack(event.track);
};

elem.audioTracks.onremovetrack = (event) => {
  trackEditor.removeTrack(event.track);
};

Thuộc tính được liệt kê này nhằm cung cấp một gợi ý cho trình duyệt về những gì tác giả nghĩ sẽ dẫn đến trải nghiệm người dùng tốt nhất liên quan đến nội dung nào được tải trước khi video được phát. Nó có thể có một trong các giá trị sau:

• const elem = document.querySelector("video");
  
  elem.audioTracks.onaddtrack = (event) => {
    trackEditor.addTrack(event.track);
  };
  
  elem.audioTracks.onremovetrack = (event) => {
    trackEditor.removeTrack(event.track);
  };
  

  4: Cho biết rằng video không nên được tải sẵn.

• const elem = document.querySelector("video");
  
  elem.audioTracks.onaddtrack = (event) => {
    trackEditor.addTrack(event.track);
  };
  
  elem.audioTracks.onremovetrack = (event) => {
    trackEditor.removeTrack(event.track);
  };
  

  5: Chỉ ra rằng chỉ có siêu dữ liệu video (ví dụ: độ dài) được tìm nạp.

• const elem = document.querySelector("video");
  
  elem.audioTracks.onaddtrack = (event) => {
    trackEditor.addTrack(event.track);
  };
  
  elem.audioTracks.onremovetrack = (event) => {
    trackEditor.removeTrack(event.track);
  };
  

  6: Cho biết rằng toàn bộ tệp video có thể được tải xuống, ngay cả khi người dùng không dự kiến ​​sẽ sử dụng nó.
• Chuỗi trống: Từ đồng nghĩa của giá trị

  const elem = document.querySelector("video");
  
  elem.audioTracks.onaddtrack = (event) => {
    trackEditor.addTrack(event.track);
  };
  
  elem.audioTracks.onremovetrack = (event) => {
    trackEditor.removeTrack(event.track);
  };
  

  6.

Giá trị mặc định là khác nhau cho mỗi trình duyệt. Thông số kỹ thuật khuyên nó sẽ được đặt thành

const elem = document.querySelector("video");

elem.audioTracks.onaddtrack = (event) => {
  trackEditor.addTrack(event.track);
};

elem.audioTracks.onremovetrack = (event) => {
  trackEditor.removeTrack(event.track);
};

Note:

• Thuộc tính

  $( document ).ready(function() {
    $("video").each(function(){
      $(this).attr('controlsList','nodownload');
      $(this).load();
    });
  });
  

  8 được ưu tiên hơn

  const elem = document.querySelector("video");
  
  elem.audioTracks.onaddtrack = (event) => {
    trackEditor.addTrack(event.track);
  };
  
  elem.audioTracks.onremovetrack = (event) => {
    trackEditor.removeTrack(event.track);
  };
  

  3. Nếu

  $( document ).ready(function() {
    $("video").each(function(){
      $(this).attr('controlsList','nodownload');
      $(this).load();
    });
  });
  

  8 được chỉ định, trình duyệt rõ ràng sẽ cần bắt đầu tải xuống video để phát lại.
• Thông số kỹ thuật không buộc trình duyệt phải tuân theo giá trị của thuộc tính này; Nó chỉ là một gợi ý.

$( document ).ready(function() {
  $("video").each(function(){
    $(this).attr('controlsList','nodownload');
    $(this).load();
  });
});

URL của video để nhúng. Đây là tùy chọn; Thay vào đó, bạn có thể sử dụng phần tử

AddType video/ogg .ogm
AddType video/ogg .ogv
AddType video/ogg .ogg

AddType video/ogg .ogm
AddType video/ogg .ogv
AddType video/ogg .ogg

Chiều rộng của vùng hiển thị của video, trong các pixel CSS (chỉ có giá trị tuyệt đối; không có tỷ lệ phần trăm).

Sự kiện

Ghi chú sử dụng

Các trình duyệt không hỗ trợ cùng một định dạng video; Bạn có thể cung cấp nhiều nguồn bên trong các yếu tố

AddType video/ogg .ogm
AddType video/ogg .ogv
AddType video/ogg .ogg

<video controls>
  <source src="myVideo.webm" type="video/webm" />
  <source src="myVideo.mp4" type="video/mp4" />
  <p>
    Your browser doesn't support HTML video. Here is a
    <a href="myVideo.mp4">link to the videoa> instead.
  p>
video>

Chúng tôi cung cấp một hướng dẫn thực chất và kỹ lưỡng về các loại tệp phương tiện và hướng dẫn cho các codec được hỗ trợ cho video. Cũng có sẵn là một hướng dẫn cho các codec âm thanh có thể được sử dụng với chúng.

Ghi chú sử dụng khác:

• Nếu bạn không chỉ định thuộc tính
  4, video sẽ không bao gồm các điều khiển mặc định của trình duyệt; Bạn có thể tạo các điều khiển tùy chỉnh của riêng mình bằng JavaScript và API

  AddType video/ogg .ogm
  AddType video/ogg .ogv
  AddType video/ogg .ogg
  

  7. Xem Tạo một trình phát video trình duyệt chéo để biết thêm chi tiết.
• Để cho phép kiểm soát chính xác nội dung video (và âm thanh) của bạn,

  AddType video/ogg .ogm
  AddType video/ogg .ogv
  AddType video/ogg .ogg
  

  7S bắn nhiều sự kiện khác nhau. Ngoài việc cung cấp khả năng kiểm soát, các sự kiện này cho phép bạn theo dõi tiến trình của cả tải xuống và phát lại phương tiện, cũng như trạng thái phát lại và vị trí.
• Bạn có thể sử dụng thuộc tính

  AddType video/ogg .ogm
  AddType video/ogg .ogv
  AddType video/ogg .ogg
  

  9 để điều chỉnh vị trí của video trong khung của phần tử và thuộc tính

  AddType video/webm .webm
  

  0 để kiểm soát cách điều chỉnh kích thước của video để phù hợp với khung.
• Để hiển thị phụ đề/chú thích cùng với video của bạn, bạn có thể sử dụng một số JavaScript cùng với phần tử

  AddType video/webm .webm
  

  1 và định dạng WebVTT. Xem thêm chú thích và phụ đề vào video HTML để biết thêm thông tin.
• Bạn có thể phát các tệp âm thanh bằng phần tử

  $( document ).ready(function() {
    $("video").each(function(){
      $(this).attr('controlsList','nodownload');
      $(this).load();
    });
  });
  

  1. Điều này có thể hữu ích nếu, ví dụ, bạn cần thực hiện âm thanh với bảng điểm WebVTT, vì phần tử

  $( document ).ready(function() {
    $("video").each(function(){
      $(this).attr('controlsList','nodownload');
      $(this).load();
    });
  });
  

  3 không cho phép các chú thích bằng WebVTT.
• Để kiểm tra nội dung dự phòng trên các trình duyệt hỗ trợ phần tử, bạn có thể thay thế

  $( document ).ready(function() {
    $("video").each(function(){
      $(this).attr('controlsList','nodownload');
      $(this).load();
    });
  });
  

  1 bằng một phần tử không tồn tại như

  AddType video/webm .webm
  

  5.

Một nguồn thông tin chung tốt về việc sử dụng HTML

$( document ).ready(function() {
  $("video").each(function(){
    $(this).attr('controlsList','nodownload');
    $(this).load();
  });
});

Kiểu dáng với CSS

Phần tử

$( document ).ready(function() {
  $("video").each(function(){
    $(this).attr('controlsList','nodownload');
    $(this).load();
  });
});

AddType video/webm .webm

Không có cân nhắc đặc biệt cho kiểu dáng

$( document ).ready(function() {
  $("video").each(function(){
    $(this).attr('controlsList','nodownload');
    $(this).load();
  });
});

AddType video/webm .webm

<video
  controls
  src="https://archive.org/download/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.mp4"
  poster="https://peach.blender.org/wp-content/uploads/title_anouncement.jpg?x11217"
  width="620">
  Sorry, your browser doesn't support embedded videos, but don't worry, you can
  <a href="https://archive.org/details/BigBuckBunny_124">download ita>
  and watch it with your favorite video player!
video>

Phát hiện bổ sung và loại bỏ theo dõi

Bạn có thể phát hiện khi các bản nhạc được thêm vào và xóa khỏi phần tử

$( document ).ready(function() {
  $("video").each(function(){
    $(this).attr('controlsList','nodownload');
    $(this).load();
  });
});

<video
  controls
  src="https://archive.org/download/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.mp4"
  poster="https://peach.blender.org/wp-content/uploads/title_anouncement.jpg?x11217"
  width="620">
  Sorry, your browser doesn't support embedded videos, but don't worry, you can
  <a href="https://archive.org/details/BigBuckBunny_124">download ita>
  and watch it with your favorite video player!
video>

<video
  controls
  src="https://archive.org/download/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.mp4"
  poster="https://peach.blender.org/wp-content/uploads/title_anouncement.jpg?x11217"
  width="620">
  Sorry, your browser doesn't support embedded videos, but don't worry, you can
  <a href="https://archive.org/details/BigBuckBunny_124">download ita>
  and watch it with your favorite video player!
video>

$( document ).ready(function() {
  $("video").each(function(){
    $(this).attr('controlsList','nodownload');
    $(this).load();
  });
});

$( document ).ready(function() {
  $("video").each(function(){
    $(this).attr('controlsList','nodownload');
    $(this).load();
  });
});

$( document ).ready(function() {
  $("video").each(function(){
    $(this).attr('controlsList','nodownload');
    $(this).load();
  });
});

<video
  controls
  src="https://archive.org/download/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.mp4"
  poster="https://peach.blender.org/wp-content/uploads/title_anouncement.jpg?x11217"
  width="620">
  Sorry, your browser doesn't support embedded videos, but don't worry, you can
  <a href="https://archive.org/details/BigBuckBunny_124">download ita>
  and watch it with your favorite video player!
video>

Một

<video
  width="620"
  controls
  poster="https://upload.wikimedia.org/wikipedia/commons/e/e8/Elephants_Dream_s5_both.jpg">
  <source
    src="https://archive.org/download/ElephantsDream/ed_hd.ogv"
    type="video/ogg" />
  <source
    src="https://archive.org/download/ElephantsDream/ed_hd.avi"
    type="video/avi" />
  <source
    src="https://archive.org/download/ElephantsDream/ed_1024_512kb.mp4"
    type="video/mp4" />

  Sorry, your browser doesn't support embedded videos, but don't worry, you can
  <a href="https://archive.org/download/ElephantsDream/ed_1024_512kb.mp4">
    download the MP4
  a>
  and watch it with your favorite video player!
video>

<video
  controls
  src="https://archive.org/download/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.mp4"
  poster="https://peach.blender.org/wp-content/uploads/title_anouncement.jpg?x11217"
  width="620">
  Sorry, your browser doesn't support embedded videos, but don't worry, you can
  <a href="https://archive.org/details/BigBuckBunny_124">download ita>
  and watch it with your favorite video player!
video>

<video
  width="620"
  controls
  poster="https://upload.wikimedia.org/wikipedia/commons/e/e8/Elephants_Dream_s5_both.jpg">
  <source
    src="https://archive.org/download/ElephantsDream/ed_hd.ogv"
    type="video/ogg" />
  <source
    src="https://archive.org/download/ElephantsDream/ed_hd.avi"
    type="video/avi" />
  <source
    src="https://archive.org/download/ElephantsDream/ed_1024_512kb.mp4"
    type="video/mp4" />

  Sorry, your browser doesn't support embedded videos, but don't worry, you can
  <a href="https://archive.org/download/ElephantsDream/ed_1024_512kb.mp4">
    download the MP4
  a>
  and watch it with your favorite video player!
video>

Thêm trình nghe

<video
  controls
  src="https://archive.org/download/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.mp4"
  poster="https://peach.blender.org/wp-content/uploads/title_anouncement.jpg?x11217"
  width="620">
  Sorry, your browser doesn't support embedded videos, but don't worry, you can
  <a href="https://archive.org/details/BigBuckBunny_124">download ita>
  and watch it with your favorite video player!
video>

<video
  width="620"
  controls
  poster="https://upload.wikimedia.org/wikipedia/commons/e/e8/Elephants_Dream_s5_both.jpg">
  <source
    src="https://archive.org/download/ElephantsDream/ed_hd.ogv"
    type="video/ogg" />
  <source
    src="https://archive.org/download/ElephantsDream/ed_hd.avi"
    type="video/avi" />
  <source
    src="https://archive.org/download/ElephantsDream/ed_1024_512kb.mp4"
    type="video/mp4" />

  Sorry, your browser doesn't support embedded videos, but don't worry, you can
  <a href="https://archive.org/download/ElephantsDream/ed_1024_512kb.mp4">
    download the MP4
  a>
  and watch it with your favorite video player!
video>

<video
  width="620"
  controls
  poster="https://upload.wikimedia.org/wikipedia/commons/e/e8/Elephants_Dream_s5_both.jpg">
  <source
    src="https://archive.org/download/ElephantsDream/ed_hd.ogv"
    type="video/ogg" />
  <source
    src="https://archive.org/download/ElephantsDream/ed_hd.avi"
    type="video/avi" />
  <source
    src="https://archive.org/download/ElephantsDream/ed_1024_512kb.mp4"
    type="video/mp4" />

  Sorry, your browser doesn't support embedded videos, but don't worry, you can
  <a href="https://archive.org/download/ElephantsDream/ed_1024_512kb.mp4">
    download the MP4
  a>
  and watch it with your favorite video player!
video>

Thêm trình nghe sự kiện

<video
  controls
  src="https://archive.org/download/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.mp4"
  poster="https://peach.blender.org/wp-content/uploads/title_anouncement.jpg?x11217"
  width="620">
  Sorry, your browser doesn't support embedded videos, but don't worry, you can
  <a href="https://archive.org/details/BigBuckBunny_124">download ita>
  and watch it with your favorite video player!
video>

<video
  width="620"
  controls
  poster="https://upload.wikimedia.org/wikipedia/commons/e/e8/Elephants_Dream_s5_both.jpg">
  <source
    src="https://archive.org/download/ElephantsDream/ed_hd.ogv"
    type="video/ogg" />
  <source
    src="https://archive.org/download/ElephantsDream/ed_hd.avi"
    type="video/avi" />
  <source
    src="https://archive.org/download/ElephantsDream/ed_1024_512kb.mp4"
    type="video/mp4" />

  Sorry, your browser doesn't support embedded videos, but don't worry, you can
  <a href="https://archive.org/download/ElephantsDream/ed_1024_512kb.mp4">
    download the MP4
  a>
  and watch it with your favorite video player!
video>

Ví dụ: để phát hiện khi các rãnh âm thanh được thêm hoặc xóa khỏi phần tử

$( document ).ready(function() {
  $("video").each(function(){
    $(this).attr('controlsList','nodownload');
    $(this).load();
  });
});

const elem = document.querySelector("video");

elem.audioTracks.onaddtrack = (event) => {
  trackEditor.addTrack(event.track);
};

elem.audioTracks.onremovetrack = (event) => {
  trackEditor.removeTrack(event.track);
};

Mã này theo dõi các bản nhạc âm thanh được thêm và xóa khỏi phần tử và gọi chức năng giả thuyết trên trình chỉnh sửa theo dõi để đăng ký và xóa bản nhạc khỏi danh sách các bản nhạc có sẵn của trình soạn thảo.

Bạn cũng có thể sử dụng

<video
  width="620"
  controls
  poster="https://upload.wikimedia.org/wikipedia/commons/e/e8/Elephants_Dream_s5_both.jpg">
  <source
    src="https://archive.org/download/ElephantsDream/ed_hd.ogv"
    type="video/ogg" />
  <source
    src="https://archive.org/download/ElephantsDream/ed_hd.avi"
    type="video/avi" />
  <source
    src="https://archive.org/download/ElephantsDream/ed_1024_512kb.mp4"
    type="video/mp4" />

  Sorry, your browser doesn't support embedded videos, but don't worry, you can
  <a href="https://archive.org/download/ElephantsDream/ed_1024_512kb.mp4">
    download the MP4
  a>
  and watch it with your favorite video player!
video>

<video
  controls
  src="https://archive.org/download/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.mp4"
  poster="https://peach.blender.org/wp-content/uploads/title_anouncement.jpg?x11217"
  width="620">
  Sorry, your browser doesn't support embedded videos, but don't worry, you can
  <a href="https://archive.org/details/BigBuckBunny_124">download ita>
  and watch it with your favorite video player!
video>

<video
  controls
  src="https://archive.org/download/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.mp4"
  poster="https://peach.blender.org/wp-content/uploads/title_anouncement.jpg?x11217"
  width="620">
  Sorry, your browser doesn't support embedded videos, but don't worry, you can
  <a href="https://archive.org/details/BigBuckBunny_124">download ita>
  and watch it with your favorite video player!
video>

Hỗ trợ máy chủ cho video

Nếu loại MIME cho video không được đặt chính xác trên máy chủ, video có thể không hiển thị hoặc hiển thị hộp màu xám có chứa X (nếu JavaScript được bật).

Nếu bạn sử dụng Apache Web Server để phục vụ video OGG Theora, bạn có thể khắc phục sự cố này bằng cách thêm các phần mở rộng loại tệp video vào loại MIME "Video/OGG". Các tiện ích mở rộng loại tệp video phổ biến nhất là ".Ogm", ".Ogv" hoặc ".Ogg". Để thực hiện việc này, hãy chỉnh sửa tệp "mime.types" trong "/etc/apache" hoặc sử dụng Chỉ thị cấu hình

$( document ).ready(function() {
  $("video").each(function(){
    $(this).attr('controlsList','nodownload');
    $(this).load();
  });
});

$( document ).ready(function() {
  $("video").each(function(){
    $(this).attr('controlsList','nodownload');
    $(this).load();
  });
});

AddType video/ogg .ogm
AddType video/ogg .ogv
AddType video/ogg .ogg

Nếu bạn phục vụ video của mình dưới dạng webm, bạn có thể khắc phục sự cố này cho máy chủ Web Apache bằng cách thêm tiện ích mở rộng được sử dụng bởi các tệp video của bạn (" mime.types "Tệp trong"/etc/apache "hoặc thông qua Chỉ thị cấu hình" AddType "trong

$( document ).ready(function() {
  $("video").each(function(){
    $(this).attr('controlsList','nodownload');
    $(this).load();
  });
});

AddType video/webm .webm

Máy chủ web của bạn có thể cung cấp một giao diện dễ dàng để thay đổi cấu hình loại MIME cho các công nghệ mới cho đến khi bản cập nhật toàn cầu xảy ra một cách tự nhiên.

Ví dụ

Nguồn đơn

Ví dụ này phát một video khi được kích hoạt, cung cấp cho người dùng các điều khiển video mặc định của trình duyệt để kiểm soát phát lại.

HTML

<video
  controls
  src="https://archive.org/download/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.mp4"
  poster="https://peach.blender.org/wp-content/uploads/title_anouncement.jpg?x11217"
  width="620">
  Sorry, your browser doesn't support embedded videos, but don't worry, you can
  <a href="https://archive.org/details/BigBuckBunny_124">download ita>
  and watch it with your favorite video player!
video>

Kết quả

Cho đến khi video bắt đầu phát, hình ảnh được cung cấp trong thuộc tính

const elem = document.querySelector("video");

elem.audioTracks.onaddtrack = (event) => {
  trackEditor.addTrack(event.track);
};

elem.audioTracks.onremovetrack = (event) => {
  trackEditor.removeTrack(event.track);
};

Nhiều nguồn

Ví dụ này được xây dựng trên cái cuối cùng, cung cấp ba nguồn khác nhau cho các phương tiện truyền thông; Điều này cho phép video được xem bất kể các codec video nào được hỗ trợ bởi trình duyệt.

HTML

<video
  width="620"
  controls
  poster="https://upload.wikimedia.org/wikipedia/commons/e/e8/Elephants_Dream_s5_both.jpg">
  <source
    src="https://archive.org/download/ElephantsDream/ed_hd.ogv"
    type="video/ogg" />
  <source
    src="https://archive.org/download/ElephantsDream/ed_hd.avi"
    type="video/avi" />
  <source
    src="https://archive.org/download/ElephantsDream/ed_1024_512kb.mp4"
    type="video/mp4" />

  Sorry, your browser doesn't support embedded videos, but don't worry, you can
  <a href="https://archive.org/download/ElephantsDream/ed_1024_512kb.mp4">
    download the MP4
  a>
  and watch it with your favorite video player!
video>

Kết quả

Cho đến khi video bắt đầu phát, hình ảnh được cung cấp trong thuộc tính

const elem = document.querySelector("video");

elem.audioTracks.onaddtrack = (event) => {
  trackEditor.addTrack(event.track);
};

elem.audioTracks.onremovetrack = (event) => {
  trackEditor.removeTrack(event.track);
};

Một số loại tệp phương tiện cho phép bạn cung cấp thông tin cụ thể hơn bằng tham số

$( document ).ready(function() {
  $("video").each(function(){
    $(this).attr('controlsList','nodownload');
    $(this).load();
  });
});

$( document ).ready(function() {
  $("video").each(function(){
    $(this).attr('controlsList','nodownload');
    $(this).load();
  });
});

Mối quan tâm tiếp cận

Video sẽ cung cấp cả chú thích và bảng điểm mô tả chính xác nội dung của nó (xem thêm chú thích và phụ đề vào video HTML để biết thêm thông tin về cách thực hiện các điều này). Chú thích cho phép những người đang bị mất thính lực để hiểu nội dung âm thanh của video khi video đang được phát, trong khi bảng điểm cho phép những người cần thêm thời gian để có thể xem lại nội dung âm thanh theo tốc độ và định dạng thoải mái cho họ.

Điều đáng chú ý là trong khi bạn có thể chú thích phương tiện chỉ dành cho âm thanh, bạn chỉ có thể làm như vậy khi phát âm thanh trong phần tử

$( document ).ready(function() {
  $("video").each(function(){
    $(this).attr('controlsList','nodownload');
    $(this).load();
  });
});

Nếu các dịch vụ chú thích tự động được sử dụng, điều quan trọng là phải xem xét nội dung được tạo để đảm bảo nó đại diện chính xác cho video nguồn.

Ngoài hộp thoại nói, phụ đề và bảng điểm cũng nên xác định các hiệu ứng âm nhạc và âm thanh truyền đạt thông tin quan trọng. Điều này bao gồm cảm xúc và giai điệu:

$( document ).ready(function() {
  $("video").each(function(){
    $(this).attr('controlsList','nodownload');
    $(this).load();
  });
});

Chú thích không nên cản trở chủ đề chính của video. Chúng có thể được định vị bằng cách sử dụng cài đặt CUE

$( document ).ready(function() {
  $("video").each(function(){
    $(this).attr('controlsList','nodownload');
    $(this).load();
  });
});

• Định dạng theo dõi văn bản video Web (WebVTT)
• Webaim: chú thích, bảng điểm và mô tả âm thanh
• MDN Hiểu WCAG, Hướng dẫn 1.2 Giải thích
• Hiểu tiêu chí thành công 1.2.1 | W3C Hiểu WCAG 2.0
• Hiểu tiêu chí thành công 1.2.2 | W3C Hiểu WCAG 2.0

Tóm tắt kỹ thuật

Xem thêm