Bài viết này mô tả trình phát video HTML đơn giản sử dụng API Phương tiện và Toàn màn hình và hoạt động trên hầu hết các trình duyệt dành cho máy tính để bàn và thiết bị di động chính. Ngoài chế độ toàn màn hình hoạt động, trình phát còn có các điều khiển tùy chỉnh thay vì chỉ sử dụng mặc định của trình duyệt. Bản thân các điều khiển của người chơi sẽ không được tạo kiểu ngoài những điều cơ bản cần thiết để chúng hoạt động; Trình phát video ví dụ của chúng tôi hiển thị một clip từ một bộ phim nguồn mở có tên là Tears of Steel và bao gồm các điều khiển video điển hình Ghi chú. Bạn có thể xem ví dụ đang chạy trực tiếp hoặc xem mã nguồn trên GitHub Để bắt đầu, chúng ta hãy xem HTML tạo nên trình phát Trước hết, phần tử const supportsVideo = !!document.createElement('video').canPlayType;
if (supportsVideo) {
// set up custom controls
// …
}
0 được xác định, chứa trong phần tử const supportsVideo = !!document.createElement('video').canPlayType;
if (supportsVideo) {
// set up custom controls
// …
}
1 đóng vai trò là bộ chứa video. Đối với bất kỳ ai quen thuộc với đánh dấu HTML và phần tử const supportsVideo = !!document.createElement('video').canPlayType;
if (supportsVideo) {
// set up custom controls
// …
}
0, sẽ không có gì làm bạn ngạc nhiên ở đây<figure id="videoContainer">
<video id="video" controls preload="metadata" poster="img/poster.jpg">
<source
src="video/tears-of-steel-battle-clip-medium.mp4"
type="video/mp4" />
<source
src="video/tears-of-steel-battle-clip-medium.webm"
type="video/webm" />
<source
src="video/tears-of-steel-battle-clip-medium.ogg"
type="video/ogg" />
<!-- Offer download -->
<a href="video/tears-of-steel-battle-clip-medium.mp4">Download MP4</a>
</video>
<figcaption>
© Blender Foundation |
<a href="http://mango.blender.org">mango.blender.org</a>
</figcaption>
</figure>
Mặc dù trình phát này sẽ xác định bộ điều khiển tùy chỉnh của riêng mình, nhưng thuộc tính const supportsVideo = !!document.createElement('video').canPlayType;
if (supportsVideo) {
// set up custom controls
// …
}
3 vẫn được thêm vào phần tử const supportsVideo = !!document.createElement('video').canPlayType;
if (supportsVideo) {
// set up custom controls
// …
}
0 và bộ điều khiển mặc định của trình phát sẽ bị tắt sau đó bằng JavaScript. Làm mọi thứ theo cách này vẫn cho phép người dùng đã tắt JavaScript (vì bất kỳ lý do gì) vẫn có quyền truy cập vào các điều khiển gốc của trình duyệtHình ảnh áp phích được xác định cho video và thuộc tính const supportsVideo = !!document.createElement('video').canPlayType;
if (supportsVideo) {
// set up custom controls
// …
}
5 được đặt thành const supportsVideo = !!document.createElement('video').canPlayType;
if (supportsVideo) {
// set up custom controls
// …
}
6, thuộc tính này thông báo cho trình duyệt rằng ban đầu trình duyệt chỉ nên cố gắng tải siêu dữ liệu từ tệp video chứ không phải toàn bộ tệp video. Điều này cung cấp cho trình phát dữ liệu như thời lượng và định dạng videoGhi chú. IE9 hoạt động khác với hầu hết các trình duyệt khác khi thuộc tính const supportsVideo = !!document.createElement('video').canPlayType;
if (supportsVideo) {
// set up custom controls
// …
}
7 được đặt. Hầu hết các trình duyệt diễn giải sự hiện diện của thuộc tính const supportsVideo = !!document.createElement('video').canPlayType;
if (supportsVideo) {
// set up custom controls
// …
}
7 có nghĩa là hình ảnh được chỉ định sẽ được hiển thị cho đến khi người dùng chọn phát video. IE9 sẽ chỉ sử dụng hình ảnh áp phích được chỉ định theo cách này nếu const supportsVideo = !!document.createElement('video').canPlayType;
if (supportsVideo) {
// set up custom controls
// …
}
9 được đặt; Ba nguồn video khác nhau được cung cấp cho trình phát. MP4, WebM và Ogg. Việc sử dụng các định dạng nguồn khác nhau này mang lại cơ hội tốt nhất để được hỗ trợ trên tất cả các trình duyệt hỗ trợ video HTML. Để biết thêm thông tin về các định dạng video và khả năng tương thích với trình duyệt, hãy xem Đoạn mã trên sẽ cho phép phát lại video trong hầu hết các trình duyệt, sử dụng bộ điều khiển mặc định của trình duyệt. Bước tiếp theo là xác định bộ điều khiển tùy chỉnh, cũng bằng HTML, sẽ được sử dụng để điều khiển video Hầu hết các điều khiển video mặc định của trình duyệt đều có chức năng sau - Tạm dừng chơi
- Tắt tiếng
- Kiểm soát âm lượng
- Thanh tiến trình
- Tiến về phía trước
- Đi toàn màn hình
Bộ điều khiển tùy chỉnh cũng sẽ hỗ trợ chức năng này, với việc bổ sung nút dừng Một lần nữa, HTML khá đơn giản, sử dụng một danh sách không có thứ tự với const videoContainer = document.getElementById('videoContainer');
const video = document.getElementById('video');
const videoControls = document.getElementById('video-controls');
0 được đặt để bao gồm các điều khiển, mỗi trong số đó là một mục danh sách với const videoContainer = document.getElementById('videoContainer');
const video = document.getElementById('video');
const videoControls = document.getElementById('video-controls');
1. Đối với thanh tiến trình, phần tử const videoContainer = document.getElementById('videoContainer');
const video = document.getElementById('video');
const videoControls = document.getElementById('video-controls');
2 được tận dụng, với dự phòng được cung cấp cho các trình duyệt không hỗ trợ nó (e. g. IE8 và IE9). Danh sách này được chèn sau phần tử const supportsVideo = !!document.createElement('video').canPlayType;
if (supportsVideo) {
// set up custom controls
// …
}
0, nhưng bên trong phần tử const supportsVideo = !!document.createElement('video').canPlayType;
if (supportsVideo) {
// set up custom controls
// …
}
1 (điều này rất quan trọng đối với chức năng toàn màn hình, sẽ được giải thích sau)<ul id="video-controls" class="controls">
<li><button id="playpause" type="button">Play/Pause</button></li>
<li><button id="stop" type="button">Stop</button></li>
<li class="progress">
<progress id="progress" value="0" min="0">
<span id="progress-bar"></span>
</progress>
</li>
<li><button id="mute" type="button">Mute/Unmute</button></li>
<li><button id="volinc" type="button">Vol+</button></li>
<li><button id="voldec" type="button">Vol-</button></li>
<li><button id="fs" type="button">Fullscreen</button></li>
</ul>
Mỗi nút được cấp một const videoContainer = document.getElementById('videoContainer');
const video = document.getElementById('video');
const videoControls = document.getElementById('video-controls');
5 để có thể dễ dàng truy cập bằng JavaScript. const videoContainer = document.getElementById('videoContainer');
const video = document.getElementById('video');
const videoControls = document.getElementById('video-controls');
6 trong phần tử const videoContainer = document.getElementById('videoContainer');
const video = document.getElementById('video');
const videoControls = document.getElementById('video-controls');
7 dành cho và sẽ được cập nhật cùng lúc với const videoContainer = document.getElementById('videoContainer');
const video = document.getElementById('video');
const videoControls = document.getElementById('video-controls');
2 (phần tử const videoContainer = document.getElementById('videoContainer');
const video = document.getElementById('video');
const videoControls = document.getElementById('video-controls');
6 này sẽ không hiển thị trên các trình duyệt hỗ trợ const videoContainer = document.getElementById('videoContainer');
const video = document.getElementById('video');
const videoControls = document.getElementById('video-controls');
2)Ban đầu, các điều khiển được ẩn bằng CSS // Hide the default controls
video.controls = false;
// Display the user defined video controls
videoControls.style.display = 'block';
2 và sẽ được bật bằng JavaScript. Một lần nữa, nếu người dùng đã tắt JavaScript, bộ điều khiển tùy chỉnh sẽ không xuất hiện và họ có thể sử dụng bộ điều khiển mặc định của trình duyệt mà không bị cản trởTất nhiên, bộ điều khiển tùy chỉnh này hiện vô dụng và không làm được gì. Hãy cải thiện tình hình với JavaScript HTML đi kèm với API phương tiện JavaScript cho phép nhà phát triển truy cập và kiểm soát phương tiện HTML. API này sẽ được sử dụng để làm cho bộ kiểm soát tùy chỉnh được xác định ở trên thực sự làm điều gì đó. Ngoài ra, nút toàn màn hình sẽ sử dụng API toàn màn hình, một API khác của W3C kiểm soát khả năng trình duyệt web hiển thị ứng dụng bằng cách sử dụng toàn màn hình máy tính của bạn Trước khi xử lý các nút riêng lẻ, cần thực hiện một số cuộc gọi khởi tạo Để bắt đầu, trước tiên bạn nên kiểm tra xem trình duyệt có thực sự hỗ trợ phần tử const supportsVideo = !!document.createElement('video').canPlayType;
if (supportsVideo) {
// set up custom controls
// …
}
0 hay không và chỉ thiết lập các điều khiển tùy chỉnh nếu có. Điều này được thực hiện bằng cách kiểm tra xem phần tử const supportsVideo = !!document.createElement('video').canPlayType;
if (supportsVideo) {
// set up custom controls
// …
}
0 đã tạo có hỗ trợ hay không, mà bất kỳ phần tử const supportsVideo = !!document.createElement('video').canPlayType;
if (supportsVideo) {
// set up custom controls
// …
}
0 HTML được hỗ trợ nào cũng nênconst supportsVideo = !!document.createElement('video').canPlayType;
if (supportsVideo) {
// set up custom controls
// …
}
Khi đã được xác nhận rằng trình duyệt thực sự hỗ trợ video HTML, đã đến lúc thiết lập các điều khiển tùy chỉnh. Một số biến trỏ đến các phần tử HTML được yêu cầu const videoContainer = document.getElementById('videoContainer');
const video = document.getElementById('video');
const videoControls = document.getElementById('video-controls');
Như đã đề cập trước đó, các điều khiển mặc định của trình duyệt hiện cần được tắt và các điều khiển tùy chỉnh cần được hiển thị // Hide the default controls
video.controls = false;
// Display the user defined video controls
videoControls.style.display = 'block';
Khi đã xong, một biến trỏ đến từng nút hiện được yêu cầu const playpause = document.getElementById('playpause');
const stop = document.getElementById('stop');
const mute = document.getElementById('mute');
const volinc = document.getElementById('volinc');
const voldec = document.getElementById('voldec');
const progress = document.getElementById('progress');
const progressBar = document.getElementById('progress-bar');
const fullscreen = document.getElementById('fs');
Sử dụng các tay cầm này, giờ đây các sự kiện có thể được gắn vào từng nút điều khiển tùy chỉnh khiến chúng có tính tương tác. Hầu hết các nút này đều yêu cầu thêm một trình xử lý sự kiện // Hide the default controls
video.controls = false;
// Display the user defined video controls
videoControls.style.display = 'block';
7 đơn giản và một phương thức và/hoặc thuộc tính do API phương tiện xác định sẽ được gọi/kiểm tra trên videoplaypause.addEventListener('click', (e) => {
if (video.paused || video.ended) {
video.play();
} else {
video.pause();
}
});
Khi một sự kiện // Hide the default controls
video.controls = false;
// Display the user defined video controls
videoControls.style.display = 'block';
7 được phát hiện trên nút phát/tạm dừng, trước hết, trình xử lý sẽ kiểm tra xem video hiện đang bị tạm dừng hay đã kết thúc (thông qua các thuộc tính // Hide the default controls
video.controls = false;
// Display the user defined video controls
videoControls.style.display = 'block';
9 và const playpause = document.getElementById('playpause');
const stop = document.getElementById('stop');
const mute = document.getElementById('mute');
const volinc = document.getElementById('volinc');
const voldec = document.getElementById('voldec');
const progress = document.getElementById('progress');
const progressBar = document.getElementById('progress-bar');
const fullscreen = document.getElementById('fs');
0 của Media API); . Nếu không, video phải đang phát, vì vậy video bị tạm dừng bằng phương pháp const playpause = document.getElementById('playpause');
const stop = document.getElementById('stop');
const mute = document.getElementById('mute');
const volinc = document.getElementById('volinc');
const voldec = document.getElementById('voldec');
const progress = document.getElementById('progress');
const progressBar = document.getElementById('progress-bar');
const fullscreen = document.getElementById('fs');
2stop.addEventListener('click', (e) => {
video.pause();
video.currentTime = 0;
progress.value = 0;
});
API Phương tiện không có phương thức const playpause = document.getElementById('playpause');
const stop = document.getElementById('stop');
const mute = document.getElementById('mute');
const volinc = document.getElementById('volinc');
const voldec = document.getElementById('voldec');
const progress = document.getElementById('progress');
const progressBar = document.getElementById('progress-bar');
const fullscreen = document.getElementById('fs');
3, do đó, để bắt chước điều này, video bị tạm dừng và phương pháp const playpause = document.getElementById('playpause');
const stop = document.getElementById('stop');
const mute = document.getElementById('mute');
const volinc = document.getElementById('volinc');
const voldec = document.getElementById('voldec');
const progress = document.getElementById('progress');
const progressBar = document.getElementById('progress-bar');
const fullscreen = document.getElementById('fs');
4 của nó (i. e. vị trí phát hiện tại của video) và vị trí của phần tử const videoContainer = document.getElementById('videoContainer');
const video = document.getElementById('video');
const videoControls = document.getElementById('video-controls');
7 được đặt thành 0 (thêm về phần tử const videoContainer = document.getElementById('videoContainer');
const video = document.getElementById('video');
const videoControls = document.getElementById('video-controls');
7 sau)mute.addEventListener('click', (e) => {
video.muted = !video.muted;
});
Nút tắt tiếng là nút chuyển đổi đơn giản sử dụng thuộc tính const playpause = document.getElementById('playpause');
const stop = document.getElementById('stop');
const mute = document.getElementById('mute');
const volinc = document.getElementById('volinc');
const voldec = document.getElementById('voldec');
const progress = document.getElementById('progress');
const progressBar = document.getElementById('progress-bar');
const fullscreen = document.getElementById('fs');
7 của API phương tiện để tắt tiếng video. đây là Boolean cho biết video có bị tắt tiếng hay không. Để làm cho nó chuyển đổi, chúng tôi đặt nó thành nghịch đảo của chính nóvolinc.addEventListener('click', (e) => {
alterVolume('+');
});
voldec.addEventListener('click', (e) => {
alterVolume('-');
});
Hai nút điều chỉnh âm lượng đã được xác định, một để tăng âm lượng và một để giảm âm lượng. Hàm do người dùng xác định, const playpause = document.getElementById('playpause');
const stop = document.getElementById('stop');
const mute = document.getElementById('mute');
const volinc = document.getElementById('volinc');
const voldec = document.getElementById('voldec');
const progress = document.getElementById('progress');
const progressBar = document.getElementById('progress-bar');
const fullscreen = document.getElementById('fs');
8 đã được tạo để giải quyết vấn đề này<ul id="video-controls" class="controls">
<li><button id="playpause" type="button">Play/Pause</button></li>
<li><button id="stop" type="button">Stop</button></li>
<li class="progress">
<progress id="progress" value="0" min="0">
<span id="progress-bar"></span>
</progress>
</li>
<li><button id="mute" type="button">Mute/Unmute</button></li>
<li><button id="volinc" type="button">Vol+</button></li>
<li><button id="voldec" type="button">Vol-</button></li>
<li><button id="fs" type="button">Fullscreen</button></li>
</ul>
0Chức năng này sử dụng thuộc tính const playpause = document.getElementById('playpause');
const stop = document.getElementById('stop');
const mute = document.getElementById('mute');
const volinc = document.getElementById('volinc');
const voldec = document.getElementById('voldec');
const progress = document.getElementById('progress');
const progressBar = document.getElementById('progress-bar');
const fullscreen = document.getElementById('fs');
9 của Media API, thuộc tính giữ giá trị âm lượng hiện tại của video. Các giá trị hợp lệ cho thuộc tính này là 0 và 1 và bất kỳ giá trị nào ở giữa. Hàm kiểm tra tham số playpause.addEventListener('click', (e) => {
if (video.paused || video.ended) {
video.play();
} else {
video.pause();
}
});
0, cho biết âm lượng sẽ tăng (+) hay giảm (-) và hành động tương ứng. Hàm được xác định để tăng hoặc giảm thuộc tính const playpause = document.getElementById('playpause');
const stop = document.getElementById('stop');
const mute = document.getElementById('mute');
const volinc = document.getElementById('volinc');
const voldec = document.getElementById('voldec');
const progress = document.getElementById('progress');
const progressBar = document.getElementById('progress-bar');
const fullscreen = document.getElementById('fs');
9 của video theo các bước từ 0. 1, đảm bảo rằng nó không thấp hơn 0 hoặc cao hơn 1Khi phần tử const videoContainer = document.getElementById('videoContainer');
const video = document.getElementById('video');
const videoControls = document.getElementById('video-controls');
7 được xác định ở trên trong HTML, chỉ có hai thuộc tính được đặt, playpause.addEventListener('click', (e) => {
if (video.paused || video.ended) {
video.play();
} else {
video.pause();
}
});
3 và playpause.addEventListener('click', (e) => {
if (video.paused || video.ended) {
video.play();
} else {
video.pause();
}
});
4, cả hai đều được gán giá trị bằng 0. Chức năng của các thuộc tính này là dễ hiểu, với playpause.addEventListener('click', (e) => {
if (video.paused || video.ended) {
video.play();
} else {
video.pause();
}
});
4 cho biết giá trị tối thiểu được phép của phần tử const videoContainer = document.getElementById('videoContainer');
const video = document.getElementById('video');
const videoControls = document.getElementById('video-controls');
2 và playpause.addEventListener('click', (e) => {
if (video.paused || video.ended) {
video.play();
} else {
video.pause();
}
});
3 cho biết giá trị hiện tại của nó. Nó cũng cần được đặt giá trị tối đa để có thể hiển thị chính xác phạm vi của nó và điều này có thể được thực hiện thông qua thuộc tính playpause.addEventListener('click', (e) => {
if (video.paused || video.ended) {
video.play();
} else {
video.pause();
}
});
8, thuộc tính này cần được đặt thành thời gian phát tối đa của video. Điều này được lấy từ thuộc tính playpause.addEventListener('click', (e) => {
if (video.paused || video.ended) {
video.play();
} else {
video.pause();
}
});
9 của video, thuộc tính này lại là một phần của Media APILý tưởng nhất là giá trị chính xác của thuộc tính playpause.addEventListener('click', (e) => {
if (video.paused || video.ended) {
video.play();
} else {
video.pause();
}
});
9 của video có sẵn khi sự kiện stop.addEventListener('click', (e) => {
video.pause();
video.currentTime = 0;
progress.value = 0;
});
1 được đưa ra, xảy ra khi siêu dữ liệu của video đã được tải<ul id="video-controls" class="controls">
<li><button id="playpause" type="button">Play/Pause</button></li>
<li><button id="stop" type="button">Stop</button></li>
<li class="progress">
<progress id="progress" value="0" min="0">
<span id="progress-bar"></span>
</progress>
</li>
<li><button id="mute" type="button">Mute/Unmute</button></li>
<li><button id="volinc" type="button">Vol+</button></li>
<li><button id="voldec" type="button">Vol-</button></li>
<li><button id="fs" type="button">Fullscreen</button></li>
</ul>
1Thật không may, trong một số trình duyệt dành cho thiết bị di động, khi stop.addEventListener('click', (e) => {
video.pause();
video.currentTime = 0;
progress.value = 0;
});
1 được nâng lên — nếu nó được nâng lên chẵn — stop.addEventListener('click', (e) => {
video.pause();
video.currentTime = 0;
progress.value = 0;
});
3 có thể không có giá trị chính xác hoặc thậm chí không có bất kỳ giá trị nào. Vì vậy, một cái gì đó khác cần phải được thực hiện. Thông tin thêm về điều đó bên dướiMột sự kiện khác, stop.addEventListener('click', (e) => {
video.pause();
video.currentTime = 0;
progress.value = 0;
});
4, được nâng lên định kỳ khi video đang được phát qua. Sự kiện này là lý tưởng để cập nhật giá trị của thanh tiến trình, đặt nó thành giá trị của thuộc tính const playpause = document.getElementById('playpause');
const stop = document.getElementById('stop');
const mute = document.getElementById('mute');
const volinc = document.getElementById('volinc');
const voldec = document.getElementById('voldec');
const progress = document.getElementById('progress');
const progressBar = document.getElementById('progress-bar');
const fullscreen = document.getElementById('fs');
4 của video, cho biết video hiện tại phát lại được bao xa<ul id="video-controls" class="controls">
<li><button id="playpause" type="button">Play/Pause</button></li>
<li><button id="stop" type="button">Stop</button></li>
<li class="progress">
<progress id="progress" value="0" min="0">
<span id="progress-bar"></span>
</progress>
</li>
<li><button id="mute" type="button">Mute/Unmute</button></li>
<li><button id="volinc" type="button">Vol+</button></li>
<li><button id="voldec" type="button">Vol-</button></li>
<li><button id="fs" type="button">Fullscreen</button></li>
</ul>
2Khi sự kiện stop.addEventListener('click', (e) => {
video.pause();
video.currentTime = 0;
progress.value = 0;
});
4 được nâng lên, thuộc tính playpause.addEventListener('click', (e) => {
if (video.paused || video.ended) {
video.play();
} else {
video.pause();
}
});
3 của phần tử const videoContainer = document.getElementById('videoContainer');
const video = document.getElementById('video');
const videoControls = document.getElementById('video-controls');
2 được đặt thành const playpause = document.getElementById('playpause');
const stop = document.getElementById('stop');
const mute = document.getElementById('mute');
const volinc = document.getElementById('volinc');
const voldec = document.getElementById('voldec');
const progress = document.getElementById('progress');
const progressBar = document.getElementById('progress-bar');
const fullscreen = document.getElementById('fs');
4 của video. Phần tử mute.addEventListener('click', (e) => {
video.muted = !video.muted;
});
0 đã đề cập trước đó, dành cho các trình duyệt không hỗ trợ phần tử const videoContainer = document.getElementById('videoContainer');
const video = document.getElementById('video');
const videoControls = document.getElementById('video-controls');
7 (e. g. Internet Explorer 9), cũng được cập nhật vào thời điểm này, đặt chiều rộng của nó thành tỷ lệ phần trăm của tổng thời gian phát. Khoảng này có màu nền CSS đồng nhất, giúp nó cung cấp phản hồi trực quan giống như phần tử const videoContainer = document.getElementById('videoContainer');
const video = document.getElementById('video');
const videoControls = document.getElementById('video-controls');
7Quay lại vấn đề stop.addEventListener('click', (e) => {
video.pause();
video.currentTime = 0;
progress.value = 0;
});
3 đã đề cập ở trên, khi sự kiện stop.addEventListener('click', (e) => {
video.pause();
video.currentTime = 0;
progress.value = 0;
});
4 được nêu ra, trong hầu hết các trình duyệt trên thiết bị di động, thuộc tính playpause.addEventListener('click', (e) => {
if (video.paused || video.ended) {
video.play();
} else {
video.pause();
}
});
9 của video giờ đây sẽ có giá trị chính xác. Điều này có thể được tận dụng để đặt thuộc tính playpause.addEventListener('click', (e) => {
if (video.paused || video.ended) {
video.play();
} else {
video.pause();
}
});
8 của phần tử const videoContainer = document.getElementById('videoContainer');
const video = document.getElementById('video');
const videoControls = document.getElementById('video-controls');
2 nếu nó hiện chưa được đặt<ul id="video-controls" class="controls">
<li><button id="playpause" type="button">Play/Pause</button></li>
<li><button id="stop" type="button">Stop</button></li>
<li class="progress">
<progress id="progress" value="0" min="0">
<span id="progress-bar"></span>
</progress>
</li>
<li><button id="mute" type="button">Mute/Unmute</button></li>
<li><button id="volinc" type="button">Vol+</button></li>
<li><button id="voldec" type="button">Vol-</button></li>
<li><button id="fs" type="button">Fullscreen</button></li>
</ul>
3Ghi chú. để biết thêm thông tin và ý tưởng về thanh tiến trình và phản hồi đệm, hãy đọc Lưu đệm phương tiện, tìm kiếm và phạm vi thời gian Một tính năng khác của hầu hết các bộ điều khiển video mặc định của trình duyệt là khả năng nhấp vào thanh tiến trình của video để "bỏ qua" đến một điểm khác trong video. Điều này cũng có thể đạt được bằng cách thêm một trình lắng nghe sự kiện // Hide the default controls
video.controls = false;
// Display the user defined video controls
videoControls.style.display = 'block';
7 đơn giản vào phần tử const videoContainer = document.getElementById('videoContainer');
const video = document.getElementById('video');
const videoControls = document.getElementById('video-controls');
2<ul id="video-controls" class="controls">
<li><button id="playpause" type="button">Play/Pause</button></li>
<li><button id="stop" type="button">Stop</button></li>
<li class="progress">
<progress id="progress" value="0" min="0">
<span id="progress-bar"></span>
</progress>
</li>
<li><button id="mute" type="button">Mute/Unmute</button></li>
<li><button id="volinc" type="button">Vol+</button></li>
<li><button id="voldec" type="button">Vol-</button></li>
<li><button id="fs" type="button">Fullscreen</button></li>
</ul>
4Đoạn mã này sử dụng vị trí được nhấp để (đại khái) tìm ra vị trí trong phần tử const videoContainer = document.getElementById('videoContainer');
const video = document.getElementById('video');
const videoControls = document.getElementById('video-controls');
2 mà người dùng đã nhấp và để di chuyển video đến vị trí đó bằng cách đặt thuộc tính const playpause = document.getElementById('playpause');
const stop = document.getElementById('stop');
const mute = document.getElementById('mute');
const volinc = document.getElementById('volinc');
const voldec = document.getElementById('voldec');
const progress = document.getElementById('progress');
const progressBar = document.getElementById('progress-bar');
const fullscreen = document.getElementById('fs');
4API toàn màn hình phải dễ sử dụng. người dùng nhấp vào một nút, nếu video ở chế độ toàn màn hình. hủy nó, nếu không thì vào chế độ toàn màn hình Than ôi, nó đã được triển khai trong các trình duyệt theo một số cách kỳ lạ và tuyệt vời, đòi hỏi nhiều mã bổ sung để kiểm tra các phiên bản thuộc tính và phương thức có tiền tố khác nhau để gọi đúng. Khả năng hiển thị của nút toàn màn hình tùy thuộc vào việc trình duyệt có hỗ trợ API toàn màn hình hay không và nó có được bật hay không <ul id="video-controls" class="controls">
<li><button id="playpause" type="button">Play/Pause</button></li>
<li><button id="stop" type="button">Stop</button></li>
<li class="progress">
<progress id="progress" value="0" min="0">
<span id="progress-bar"></span>
</progress>
</li>
<li><button id="mute" type="button">Mute/Unmute</button></li>
<li><button id="volinc" type="button">Vol+</button></li>
<li><button id="voldec" type="button">Vol-</button></li>
<li><button id="fs" type="button">Fullscreen</button></li>
</ul>
5Đương nhiên, nút toàn màn hình cần thực sự làm một việc gì đó, vì vậy, giống như các nút khác, trình xử lý sự kiện // Hide the default controls
video.controls = false;
// Display the user defined video controls
videoControls.style.display = 'block';
7 được đính kèm trong đó chúng tôi gọi hàm do người dùng xác định là volinc.addEventListener('click', (e) => {
alterVolume('+');
});
voldec.addEventListener('click', (e) => {
alterVolume('-');
});
3<ul id="video-controls" class="controls">
<li><button id="playpause" type="button">Play/Pause</button></li>
<li><button id="stop" type="button">Stop</button></li>
<li class="progress">
<progress id="progress" value="0" min="0">
<span id="progress-bar"></span>
</progress>
</li>
<li><button id="mute" type="button">Mute/Unmute</button></li>
<li><button id="volinc" type="button">Vol+</button></li>
<li><button id="voldec" type="button">Vol-</button></li>
<li><button id="fs" type="button">Fullscreen</button></li>
</ul>
6Hàm volinc.addEventListener('click', (e) => {
alterVolume('+');
});
voldec.addEventListener('click', (e) => {
alterVolume('-');
});
3 được định nghĩa như sau<ul id="video-controls" class="controls">
<li><button id="playpause" type="button">Play/Pause</button></li>
<li><button id="stop" type="button">Stop</button></li>
<li class="progress">
<progress id="progress" value="0" min="0">
<span id="progress-bar"></span>
</progress>
</li>
<li><button id="mute" type="button">Mute/Unmute</button></li>
<li><button id="volinc" type="button">Vol+</button></li>
<li><button id="voldec" type="button">Vol-</button></li>
<li><button id="fs" type="button">Fullscreen</button></li>
</ul>
7Nếu trình duyệt đang ở chế độ toàn màn hình thì phải thoát ra và ngược lại. Điều thú vị là volinc.addEventListener('click', (e) => {
alterVolume('+');
});
voldec.addEventListener('click', (e) => {
alterVolume('-');
});
5 phải được sử dụng để thoát/hủy chế độ toàn màn hình, trong khi bất kỳ phần tử HTML nào cũng có thể yêu cầu chế độ toàn màn hình, ở đây, ______45_______6 được sử dụng vì nó cũng chứa các điều khiển tùy chỉnh cũng sẽ xuất hiện cùng với video ở chế độ toàn màn hìnhMột hàm do người dùng xác định khác — volinc.addEventListener('click', (e) => {
alterVolume('+');
});
voldec.addEventListener('click', (e) => {
alterVolume('-');
});
7 — cũng được gọi, đặt giá trị của thuộc tính volinc.addEventListener('click', (e) => {
alterVolume('+');
});
voldec.addEventListener('click', (e) => {
alterVolume('-');
});
8 trên volinc.addEventListener('click', (e) => {
alterVolume('+');
});
voldec.addEventListener('click', (e) => {
alterVolume('-');
});
6 (điều này sử dụng )<ul id="video-controls" class="controls">
<li><button id="playpause" type="button">Play/Pause</button></li>
<li><button id="stop" type="button">Stop</button></li>
<li class="progress">
<progress id="progress" value="0" min="0">
<span id="progress-bar"></span>
</progress>
</li>
<li><button id="mute" type="button">Mute/Unmute</button></li>
<li><button id="volinc" type="button">Vol+</button></li>
<li><button id="voldec" type="button">Vol-</button></li>
<li><button id="fs" type="button">Fullscreen</button></li>
</ul>
8Điều này được sử dụng để đặt một số CSS cơ bản nhằm cải thiện kiểu dáng của các điều khiển tùy chỉnh khi chúng ở chế độ toàn màn hình (xem mã mẫu để biết thêm chi tiết). Khi một video chuyển sang chế độ toàn màn hình, nó thường hiển thị một thông báo cho biết rằng người dùng có thể nhấn phím Esc để thoát khỏi chế độ toàn màn hình, do đó, mã cũng cần lắng nghe các sự kiện liên quan để gọi hàm volinc.addEventListener('click', (e) => {
alterVolume('+');
});
voldec.addEventListener('click', (e) => {
alterVolume('-');
});
7 nhằm đảm bảo kiểu điều khiển được |