Làm cách nào để thêm các điều khiển video trong JavaScript?

Question

Tham số duy nhất mà chúng ta truyền cho phương thức là loại phần tử sẽ được tạo (trong ví dụ là ____9)

Nội dung chính Show

Đảm bảo khả năng tương thích giữa nhiều trình duyệt cho phần tử video
Mọi điều điên rồ mà JavaScript đều làm
Làm cách nào để thêm phần tử video trong JavaScript?
Bạn có thể đặt video bằng JavaScript không?
Thuộc tính nào được sử dụng để thêm điều khiển video trong HTML?
Làm cách nào để ẩn các điều khiển video trong JavaScript?

Phương thức

// Create video element
const video = document.createElement('video');

// Use local file
// video.src = 'video.mp4';

// Use remote file
video.src =
  'https://archive.org/download/C.E.PriceCatWalksTowardCamera/cat_walks_toward_camera_512kb.mp4';


video.controls = true;
video.muted = false;
video.height = 240; // in px
video.width = 320; // in px

const box = document.getElementById('box');

// Include in HTML as child of #box
box.appendChild(video);

0 trả về phần tử mới được tạo

Chúng tôi đặt thuộc tính

// Create video element
const video = document.createElement('video');

// Use local file
// video.src = 'video.mp4';

// Use remote file
video.src =
  'https://archive.org/download/C.E.PriceCatWalksTowardCamera/cat_walks_toward_camera_512kb.mp4';


video.controls = true;
video.muted = false;
video.height = 240; // in px
video.width = 320; // in px

const box = document.getElementById('box');

// Include in HTML as child of #box
box.appendChild(video);

1 của phần tử thành tệp video được lưu trữ từ xa

Tuy nhiên, nếu bạn có video trên hệ thống tệp cục bộ, bạn có thể đặt thuộc tính

// Create video element
const video = document.createElement('video');

// Use local file
// video.src = 'video.mp4';

// Use remote file
video.src =
  'https://archive.org/download/C.E.PriceCatWalksTowardCamera/cat_walks_toward_camera_512kb.mp4';


video.controls = true;
video.muted = false;
video.height = 240; // in px
video.width = 320; // in px

const box = document.getElementById('box');

// Include in HTML as child of #box
box.appendChild(video);

1 thành đường dẫn trỏ đến video

Không phải tất cả các trình duyệt đều hỗ trợ các định dạng video giống nhau, vì vậy bạn có thể kiểm tra xem trình duyệt của người dùng có hỗ trợ định dạng này hay không trước khi đặt thuộc tính

// Create video element
const video = document.createElement('video');

// Use local file
// video.src = 'video.mp4';

// Use remote file
video.src =
  'https://archive.org/download/C.E.PriceCatWalksTowardCamera/cat_walks_toward_camera_512kb.mp4';


video.controls = true;
video.muted = false;
video.height = 240; // in px
video.width = 320; // in px

const box = document.getElementById('box');

// Include in HTML as child of #box
box.appendChild(video);

1 của phần tử

Phần tử video hỗ trợ nhiều

Trong ví dụ, chúng tôi đặt thuộc tính

// Create video element
const video = document.createElement('video');

// Use local file
// video.src = 'video.mp4';

// Use remote file
video.src =
  'https://archive.org/download/C.E.PriceCatWalksTowardCamera/cat_walks_toward_camera_512kb.mp4';


video.controls = true;
video.muted = false;
video.height = 240; // in px
video.width = 320; // in px

const box = document.getElementById('box');

// Include in HTML as child of #box
box.appendChild(video);

51 trên phần tử. Thuộc tính trỏ đến một hình ảnh được hiển thị trong khi video vẫn đang tải xuống

Thuộc tính

// Create video element
const video = document.createElement('video');

// Use local file
// video.src = 'video.mp4';

// Use remote file
video.src =
  'https://archive.org/download/C.E.PriceCatWalksTowardCamera/cat_walks_toward_camera_512kb.mp4';


video.controls = true;
video.muted = false;
video.height = 240; // in px
video.width = 320; // in px

const box = document.getElementById('box');

// Include in HTML as child of #box
box.appendChild(video);

52 chỉ định xem video có tự động bắt đầu phát ngay khi có thể mà không dừng lại để tải xong dữ liệu hay không

Thuộc tính

// Create video element
const video = document.createElement('video');

// Use local file
// video.src = 'video.mp4';

// Use remote file
video.src =
  'https://archive.org/download/C.E.PriceCatWalksTowardCamera/cat_walks_toward_camera_512kb.mp4';


video.controls = true;
video.muted = false;
video.height = 240; // in px
video.width = 320; // in px

const box = document.getElementById('box');

// Include in HTML as child of #box
box.appendChild(video);

53 cho phép người dùng điều khiển phát lại video, e. g. âm lượng, tạm dừng và tiếp tục video, v.v.

Thuộc tính

// Create video element
const video = document.createElement('video');

// Use local file
// video.src = 'video.mp4';

// Use remote file
video.src =
  'https://archive.org/download/C.E.PriceCatWalksTowardCamera/cat_walks_toward_camera_512kb.mp4';


video.controls = true;
video.muted = false;
video.height = 240; // in px
video.width = 320; // in px

const box = document.getElementById('box');

// Include in HTML as child of #box
box.appendChild(video);

54 cho biết liệu video có nên bị tắt tiếng theo mặc định hay không

Thuộc tính

// Create video element
const video = document.createElement('video');

// Use local file
// video.src = 'video.mp4';

// Use remote file
video.src =
  'https://archive.org/download/C.E.PriceCatWalksTowardCamera/cat_walks_toward_camera_512kb.mp4';


video.controls = true;
video.muted = false;
video.height = 240; // in px
video.width = 320; // in px

const box = document.getElementById('box');

// Include in HTML as child of #box
box.appendChild(video);

56 và

// Create video element
const video = document.createElement('video');

// Use local file
// video.src = 'video.mp4';

// Use remote file
video.src =
  'https://archive.org/download/C.E.PriceCatWalksTowardCamera/cat_walks_toward_camera_512kb.mp4';


video.controls = true;
video.muted = false;
video.height = 240; // in px
video.width = 320; // in px

const box = document.getElementById('box');

// Include in HTML as child of #box
box.appendChild(video);

57 có thể được đặt thành số và biểu thị chiều cao và chiều rộng của khu vực hiển thị của video bằng pixel

Có nhiều thuộc tính khác mà bạn có thể cần đặt tùy thuộc vào trường hợp sử dụng của mình, để có danh sách đầy đủ, hãy xem phần

Nếu tôi tải trang từ ví dụ trên, tôi có thể thấy rằng phần tử video đã được tạo thành công

Tài liệu. Phương thức createElement() tạo một phần tử HTML được chỉ định bởi một tên thẻ và trả về phần tử đó. Bằng cách chuyển thẻ video, chúng tôi tạo phần tử video

Phần tử video đi kèm với một số thuộc tính mà chúng ta có thể sử dụng để tùy chỉnh giao diện và hành vi của phần tử đó. Dưới đây là một số cái được sử dụng phổ biến nhất

// Create video element
const video = document.createElement('video');

// Use local file
// video.src = 'video.mp4';

// Use remote file
video.src =
  'https://archive.org/download/C.E.PriceCatWalksTowardCamera/cat_walks_toward_camera_512kb.mp4';


video.controls = true;
video.muted = false;
video.height = 240; // in px
video.width = 320; // in px

const box = document.getElementById('box');

// Include in HTML as child of #box
box.appendChild(video);

1. Thuộc tính quan trọng nhất, được đặt thành URL hoặc đường dẫn tệp để xác định video sẽ được phát

// Create video element
const video = document.createElement('video');

// Use local file
// video.src = 'video.mp4';

// Use remote file
video.src =
  'https://archive.org/download/C.E.PriceCatWalksTowardCamera/cat_walks_toward_camera_512kb.mp4';


video.controls = true;
video.muted = false;
video.height = 240; // in px
video.width = 320; // in px

const box = document.getElementById('box');

// Include in HTML as child of #box
box.appendChild(video);

0. Thuộc tính này chỉ định xem video có bắt đầu phát tự động ngay khi có thể mà không dừng lại để tải xong dữ liệu hay không

// Create video element
const video = document.createElement('video');

// Use local file
// video.src = 'video.mp4';

// Use remote file
video.src =
  'https://archive.org/download/C.E.PriceCatWalksTowardCamera/cat_walks_toward_camera_512kb.mp4';


video.controls = true;
video.muted = false;
video.height = 240; // in px
video.width = 320; // in px

const box = document.getElementById('box');

// Include in HTML as child of #box
box.appendChild(video);

1. Thuộc tính

// Create video element
const video = document.createElement('video');

// Use local file
// video.src = 'video.mp4';

// Use remote file
video.src =
  'https://archive.org/download/C.E.PriceCatWalksTowardCamera/cat_walks_toward_camera_512kb.mp4';


video.controls = true;
video.muted = false;
video.height = 240; // in px
video.width = 320; // in px

const box = document.getElementById('box');

// Include in HTML as child of #box
box.appendChild(video);

1 xác định xem trình duyệt có hiển thị các điều khiển cho phép người dùng điều khiển phát lại video hay không, i. e. , điều chỉnh âm lượng, di chuyển đến vị trí mới trong video (tìm kiếm), tạm dừng/tiếp tục, v.v.

// Create video element
const video = document.createElement('video');

// Use local file
// video.src = 'video.mp4';

// Use remote file
video.src =
  'https://archive.org/download/C.E.PriceCatWalksTowardCamera/cat_walks_toward_camera_512kb.mp4';


video.controls = true;
video.muted = false;
video.height = 240; // in px
video.width = 320; // in px

const box = document.getElementById('box');

// Include in HTML as child of #box
box.appendChild(video);

3. URL cho một hình ảnh sẽ được hiển thị trong khi hình ảnh vẫn đang tải xuống

// Create video element
const video = document.createElement('video');

// Use local file
// video.src = 'video.mp4';

// Use remote file
video.src =
  'https://archive.org/download/C.E.PriceCatWalksTowardCamera/cat_walks_toward_camera_512kb.mp4';


video.controls = true;
video.muted = false;
video.height = 240; // in px
video.width = 320; // in px

const box = document.getElementById('box');

// Include in HTML as child of #box
box.appendChild(video);

4. Đây là một thuộc tính boolean được sử dụng để chỉ định xem có nên tắt tiếng video theo mặc định hay không

// Create video element
const video = document.createElement('video');

// Use local file
// video.src = 'video.mp4';

// Use remote file
video.src =
  'https://archive.org/download/C.E.PriceCatWalksTowardCamera/cat_walks_toward_camera_512kb.mp4';


video.controls = true;
video.muted = false;
video.height = 240; // in px
video.width = 320; // in px

const box = document.getElementById('box');

// Include in HTML as child of #box
box.appendChild(video);

4. Đặt chiều cao của khu vực hiển thị của video, tính bằng pixel

// Create video element
const video = document.createElement('video');

// Use local file
// video.src = 'video.mp4';

// Use remote file
video.src =
  'https://archive.org/download/C.E.PriceCatWalksTowardCamera/cat_walks_toward_camera_512kb.mp4';


video.controls = true;
video.muted = false;
video.height = 240; // in px
video.width = 320; // in px

const box = document.getElementById('box');

// Include in HTML as child of #box
box.appendChild(video);

5. Đặt chiều rộng của vùng hiển thị của video, tính bằng pixel

Để có danh sách đầy đủ tất cả các thuộc tính được phần tử video hỗ trợ, hãy truy cập tài liệu MDN trên phần tử video

Phương thức appendChild() có thể thêm một phần tử DOM vào cuối danh sách con của một nút cha được chỉ định. Sau khi truy cập phần tử

// Create video element
const video = document.createElement('video');

// Use local file
// video.src = 'video.mp4';

// Use remote file
video.src =
  'https://archive.org/download/C.E.PriceCatWalksTowardCamera/cat_walks_toward_camera_512kb.mp4';


video.controls = true;
video.muted = false;
video.height = 240; // in px
video.width = 320; // in px

const box = document.getElementById('box');

// Include in HTML as child of #box
box.appendChild(video);

7 từ HTML của chúng tôi bằng getElementById(), chúng tôi gọi phương thức

// Create video element
const video = document.createElement('video');

// Use local file
// video.src = 'video.mp4';

// Use remote file
video.src =
  'https://archive.org/download/C.E.PriceCatWalksTowardCamera/cat_walks_toward_camera_512kb.mp4';


video.controls = true;
video.muted = false;
video.height = 240; // in px
video.width = 320; // in px

const box = document.getElementById('box');

// Include in HTML as child of #box
box.appendChild(video);

6 trên phần tử đó để đưa phần tử video vào HTML bằng cách thêm phần tử đó làm phần tử con của phần tử

// Create video element
const video = document.createElement('video');

// Use local file
// video.src = 'video.mp4';

// Use remote file
video.src =
  'https://archive.org/download/C.E.PriceCatWalksTowardCamera/cat_walks_toward_camera_512kb.mp4';


video.controls = true;
video.muted = false;
video.height = 240; // in px
video.width = 320; // in px

const box = document.getElementById('box');

// Include in HTML as child of #box
box.appendChild(video);

7

Đăng ký bản tin Coding Beauty

Có được những hiểu biết hữu ích và nâng cao kiến thức phát triển web của bạn với các mẹo và hướng dẫn hàng tuần từ Coding Beauty. Hơn 1.400 nhà phát triển đăng ký

Đảm bảo khả năng tương thích giữa nhiều trình duyệt cho phần tử video

Vì không phải tất cả các trình duyệt đều hỗ trợ các định dạng video giống nhau nên khi nhúng video, chúng tôi sẽ cần chỉ định các định dạng khác nhau tùy thuộc vào định dạng mà trình duyệt của người dùng hỗ trợ

Để kiểm tra xem trình duyệt có hỗ trợ một loại video cụ thể hay không, chúng ta có thể sử dụng phương pháp

// Create video element
const video = document.createElement('video');

video.autoplay = false;
video.controls = true;
video.muted = false;
video.height = 240; // in px
video.width = 320; // in px

if (video.canPlayType('video/mp4')) {
  video.src = 'video.mp4';
} else if (video.canPlayType('video/ogg')) {
  video.src = 'video.ogg';
} else {
  // Provide video link to user
}

const box = document.getElementById('box');

// Include in HTML as child of box
box.appendChild(video);

0

// Create video element
const video = document.createElement('video');

video.autoplay = false;
video.controls = true;
video.muted = false;
video.height = 240; // in px
video.width = 320; // in px

if (video.canPlayType('video/mp4')) {
  video.src = 'video.mp4';
} else if (video.canPlayType('video/ogg')) {
  video.src = 'video.ogg';
} else {
  // Provide video link to user
}

const box = document.getElementById('box');

// Include in HTML as child of box
box.appendChild(video);

Nếu trình duyệt không hỗ trợ bất kỳ định dạng video nào, điều tốt nhất nên làm là cung cấp cho người dùng liên kết tới video để họ tải xuống và xem ngoại tuyến. Bằng cách đó, mọi người dùng sẽ có thể xem video của bạn, bất kể mức độ hỗ trợ video mà trình duyệt của họ có

Mọi điều điên rồ mà JavaScript đều làm

Hướng dẫn hấp dẫn về những cảnh báo tinh tế và những phần ít được biết đến của JavaScript

Làm cách nào để thêm các điều khiển video trong JavaScript?

Đăng ký và nhận ngay một bản sao miễn phí

Ayibatari Ibaba

Ayibatari Ibaba là nhà phát triển phần mềm có nhiều năm kinh nghiệm xây dựng trang web và ứng dụng. Anh ấy đã viết rất nhiều về nhiều chủ đề lập trình và đã tạo ra hàng chục ứng dụng và thư viện mã nguồn mở

Làm cách nào để thêm phần tử video trong JavaScript?

Cách tạo phần tử video bằng JavaScript. .

sử dụng tài liệu. phương thức createElement() để tạo phần tử video

Đặt các thuộc tính khác nhau của thành phần video, chẳng hạn như src , height , width , v.v.

Đưa phần tử video vào HTML bằng phương thức appendChild()

Bạn có thể đặt video bằng JavaScript không?

4 Tạo phần tử âm thanh/video bằng JavaScript . The video tag can be treated like any other tag in the DOM, so you can easily create one with the document. createElement("video") rồi đặt các thuộc tính của video như nguồn, điều khiển, v.v. Đây là một ví dụ thêm video bên trong div có id = "myVideo".

Thuộc tính nào được sử dụng để thêm điều khiển video trong HTML?

Thuộc tính điều khiển thêm các điều khiển video, như phát, tạm dừng và âm lượng. Bạn nên luôn bao gồm các thuộc tính chiều rộng và chiều cao. Nếu chiều cao và chiều rộng không được đặt, trang có thể nhấp nháy khi tải video. Phần tử

Làm cách nào để ẩn các điều khiển video trong JavaScript?

Chúng tôi có thể ẩn các điều khiển bằng cách không thêm thuộc tính điều khiển vào phần tử video . Ngay cả khi không có thuộc tính điều khiển trên các phần tử, người dùng có thể xem phần điều khiển bằng cách nhấp chuột phải vào video và bật điều khiển chương trình.

programming javascript

Làm cách nào để thêm các điều khiển video trong JavaScript?

Đăng ký bản tin Coding Beauty

Đảm bảo khả năng tương thích giữa nhiều trình duyệt cho phần tử video

Mọi điều điên rồ mà JavaScript đều làm

Làm cách nào để thêm phần tử video trong JavaScript?

Bạn có thể đặt video bằng JavaScript không?

Thuộc tính nào được sử dụng để thêm điều khiển video trong HTML?

Làm cách nào để ẩn các điều khiển video trong JavaScript?

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội