Hướng dẫn html5 video hide volume control - html5 video ẩn điều khiển âm lượng

Question

Siêu dễ dàng:

Nội dung chính Show

Chỉ định nhiều nguồn cho video
Hiển thị hoặc ẩn các điều khiển trình phát video
Bắt đầu hoặc dừng video tại một điểm hoặc dấu thời gian nhất định
Hiển thị một poster video hoặc hình thu nhỏ trước khi video được bắt đầu
Tải trước video trước khi phát lại
Phát video nội tuyến trong Safari trên iOS
Tự động phát, vòng lặp và tắt tiếng
Hiển thị chú thích hoặc phụ đề trong quá trình phát lại
Truy cập nhiều chức năng hơn thông qua JavaScript
Phù hợp với video chân dung trong người chơi cảnh quan sử dụng đối tượng phù hợp
Làm cách nào để che giấu điều khiển video trong HTML?
Làm cách nào để tùy chỉnh các điều khiển video trong HTML5?
Làm thế nào tôi có thể ẩn một video HTML5 khi nó hoàn thành chơi?

HTML của bạn phải là một cái gì đó như:

<video id="Video1">
  <source src="..." type="video/mp4">
  <source src="..." type="video/ogg">
  Your browser does not support HTML5 video.
</video>

Thêm sau đó một nút tùy chỉnh để phát video:

<button id="play" onclick="vidplay()">&gt;</button>

Cuối cùng là một thanh tiến bộ:

<progress id="progressbar" value="0" max="100"></progress>

Sau đó, trong JavaScript thêm một nút để chơi

var video = document.getElementById("Video1");

function vidplay() {

       var button = document.getElementById("play");
       if (video.paused) {
          video.play();
          button.textContent = "||";
       } else {
          video.pause();
          button.textContent = ">";
       }
    }

Và người nghe để cập nhật thanh tiến trình:

video.addEventListener('timeupdate', updateProgressBar, false);


function updateProgressBar() { 
var progressBar = document.getElementById('progressbar'); 
var percentage = Math.floor((100 / mediaPlayer.duration) * mediaPlayer.currentTime);
 progressBar.value = percentage; progressBar.innerHTML = percentage + '% played'; 
}

Vì vậy, về cơ bản loại bỏ "các điều khiển tiêu chuẩn" và tạo các điều khiển của riêng bạn.remove the "standard controls" and create your own ones.

Nếu bạn muốn đạt được kết quả phức tạp hơn, tôi sẽ giới thiệu cho bạn một lựa chọn khác. Điều này có thể được sử dụng một cài đặt có thể định cấu hình hơn như video.js.

Một thủ thuật CSS đơn giản để ẩn hoàn toàn các điều khiển video HTML5

Khi chúng tôi sử dụng các phần tử video HTML5 để xây dựng một ứng dụng với Kurento, OpenVidu, Jitsi hoặc bất kỳ thư viện RTC nào khác, chúng tôi muốn ẩn hoàn toàn các điều khiển video.

Chúng ta có thể ẩn các điều khiển bằng cách không thêm thuộc tính

<button id="play" onclick="vidplay()">&gt;</button>

9 vào phần tử video.not adding the

<button id="play" onclick="vidplay()">&gt;</button>

9 attribute to the video element.

<video autoplay playsinline></video>

Ngay cả khi không có thuộc tính

<button id="play" onclick="vidplay()">&gt;</button>

9 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

<progress id="progressbar" value="0" max="100"></progress>

1.

Người dùng có thể bật các điều khiển

Để tránh kịch bản này, chúng ta có thể áp dụng một thuộc tính CSS duy nhất để làm cho phần tử video không bao giờ là mục tiêu của các sự kiện con trỏ.

<video autoplay playsinline style="pointer-events: none;"></video>

Thuộc tính CSS ở trên làm cho phần tử video không nghe các sự kiện con trỏ. Do đó, người dùng không thể cho phép các điều khiển bằng menu nhấp chuột phải.

Chúng tôi đã đề cập đến những điều cơ bản của việc thêm video vào trang web của bạn bằng phần tử

<progress id="progressbar" value="0" max="100"></progress>

2 và liệt kê ngắn gọn các tính năng nâng cao hơn của

<progress id="progressbar" value="0" max="100"></progress>

2 Element trong một bài đăng trên blog trước đó.

Trong bài đăng trên blog này, chúng tôi sẽ xem xét sâu hơn 10 trong số các tính năng nâng cao đó và giải thích với các ví dụ về mã cách bạn có thể sử dụng chúng trên trang web của mình trong trình phát video HTML của bạn.

Chúng tôi sẽ bao gồm:

Chỉ định nhiều nguồn cho video
Hiển thị hoặc ẩn các điều khiển trình phát video
Bắt đầu hoặc dừng video tại một điểm hoặc dấu thời gian nhất định
Hiển thị một poster video hoặc hình thu nhỏ trước khi video được bắt đầu
Tải trước video trước khi phát lại
Phát video nội tuyến trong Safari trong iOS
Tự động phát, vòng lặp và tắt tiếng
Hiển thị chú thích hoặc phụ đề trong quá trình phát lại
Truy cập nhiều chức năng hơn thông qua JavaScript
Video chân dung phù hợp trong người chơi cảnh quan sử dụng thuộc tính CSS phù hợp đối tượng

Chỉ định nhiều nguồn cho video

Hiển thị hoặc ẩn các điều khiển trình phát video

Bắt đầu hoặc dừng video tại một điểm hoặc dấu thời gian nhất định

Hiển thị một poster video hoặc hình thu nhỏ trước khi video được bắt đầu

<video controls>
    <source src="vid1.webm" type='video/webm;codecs="vp8, opus"'/>
    <source src="vid2.mp4" type='video/mp4;codecs="avc1.4D401E, mp4a.40.2"'/>
</video>

Tải trước video trước khi phát lại

Phát video nội tuyến trong Safari trong iOS

<video src="vid1.mp4"></video>

Hiển thị hoặc ẩn các điều khiển trình phát video

Bắt đầu hoặc dừng video tại một điểm hoặc dấu thời gian nhất định

<video controls src="/static/short.mp4" preload="none"></video>

Hiển thị một poster video hoặc hình thu nhỏ trước khi video được bắt đầu

Tải trước video trước khi phát lại

<button id="play" onclick="vidplay()">&gt;</button>

0

Phát video nội tuyến trong Safari trong iOS

Tự động phát, vòng lặp và tắt tiếng

Bắt đầu hoặc dừng video tại một điểm hoặc dấu thời gian nhất định

Hiển thị một poster video hoặc hình thu nhỏ trước khi video được bắt đầuMedia Fragments (the

<progress id="progressbar" value="0" max="100"></progress>

9 anchor in the

<progress id="progressbar" value="0" max="100"></progress>

6) you can specify the time at which the video should start playback and end playback. In this example, the video playback will start at second 15 and end at second 20:

<button id="play" onclick="vidplay()">&gt;</button>

1

Tải trước video trước khi phát lại

Phát video nội tuyến trong Safari trong iOS

var video = document.getElementById("Video1");

function vidplay() {

       var button = document.getElementById("play");
       if (video.paused) {
          video.play();
          button.textContent = "||";
       } else {
          video.pause();
          button.textContent = ">";
       }
    }

3 => results in the time interval

var video = document.getElementById("Video1");

function vidplay() {

       var button = document.getElementById("play");
       if (video.paused) {
          video.play();
          button.textContent = "||";
       } else {
          video.pause();
          button.textContent = ">";
       }
    }

4

var video = document.getElementById("Video1");

function vidplay() {

       var button = document.getElementById("play");
       if (video.paused) {
          video.play();
          button.textContent = "||";
       } else {
          video.pause();
          button.textContent = ">";
       }
    }

5 => results in the time interval

var video = document.getElementById("Video1");

function vidplay() {

       var button = document.getElementById("play");
       if (video.paused) {
          video.play();
          button.textContent = "||";
       } else {
          video.pause();
          button.textContent = ">";
       }
    }

6

Hiển thị một poster video hoặc hình thu nhỏ trước khi video được bắt đầu

Tải trước video trước khi phát lại

Phát video nội tuyến trong Safari trong iOS

<button id="play" onclick="vidplay()">&gt;</button>

2

Tải trước video trước khi phát lại

Phát video nội tuyến trong Safari trong iOS

Các tùy chọn sau tồn tại:

Không - không có tải trước được thực hiện
Siêu dữ liệu - Chỉ có siêu dữ liệu được tải sẵn: Kích thước, khung đầu tiên, danh sách theo dõi, thời lượng, v.v.
Tự động - Âm thanh/Video sẽ bắt đầu tải ngay khi trang tải

Trong tất cả các trình phát trên, chúng tôi đã sử dụng

var video = document.getElementById("Video1");

function vidplay() {

       var button = document.getElementById("play");
       if (video.paused) {
          video.play();
          button.textContent = "||";
       } else {
          video.pause();
          button.textContent = ">";
       }
    }

9 để ngăn video được tải cùng với trang web vì nó có thể sử dụng dữ liệu đáng kể ngay cả khi người dùng sẽ không phát video. Do đó, chúng tôi có thể nhận được một hóa đơn truyền dữ liệu cao từ nhà cung cấp lưu trữ của chúng tôi nếu bài đăng trên blog này có rất nhiều lượt xem.

Tại đây, cách cho phép trình duyệt tải trước chỉ siêu dữ liệu video và hiển thị khung số 1 dưới dạng poster:

<button id="play" onclick="vidplay()">&gt;</button>

3

Phát video nội tuyến trong Safari trên iOS

Safari trên iOS 10+ hỗ trợ phát lại video. Cho đến và bao gồm iOS9, video web, khi được phát, sẽ hiển thị toàn màn hình trên thiết bị. Để kích hoạt phát lại nội tuyến cần sử dụng thuộc tính

video.addEventListener('timeupdate', updateProgressBar, false);


function updateProgressBar() { 
var progressBar = document.getElementById('progressbar'); 
var percentage = Math.floor((100 / mediaPlayer.duration) * mediaPlayer.currentTime);
 progressBar.value = percentage; progressBar.innerHTML = percentage + '% played'; 
}

0:

<button id="play" onclick="vidplay()">&gt;</button>

4

Tự động phát, vòng lặp và tắt tiếng

Tự chạy

Một video có thể được phát tự động ngay khi nó sẵn sàng bằng cách thêm thuộc tính

video.addEventListener('timeupdate', updateProgressBar, false);


function updateProgressBar() { 
var progressBar = document.getElementById('progressbar'); 
var percentage = Math.floor((100 / mediaPlayer.duration) * mediaPlayer.currentTime);
 progressBar.value = percentage; progressBar.innerHTML = percentage + '% played'; 
}

1:

<button id="play" onclick="vidplay()">&gt;</button>

5

Autoplay bị tắt hoạt động trong Safari trên iOS10+ (trong khi không ở chế độ công suất thấp) và trong Chrome 53+ trên Android. Kiểm tra các chính sách mới cho iOS và autoplay bị tắt tiếng trên thiết bị di động để biết thêm chi tiết. Trên các thiết bị di động, Google và Apple trước đó đã chặn các video tự động phát.

Vòng

Nếu bạn muốn video phát trong một vòng lặp, bạn có thể sử dụng thuộc tính

video.addEventListener('timeupdate', updateProgressBar, false);


function updateProgressBar() { 
var progressBar = document.getElementById('progressbar'); 
var percentage = Math.floor((100 / mediaPlayer.duration) * mediaPlayer.currentTime);
 progressBar.value = percentage; progressBar.innerHTML = percentage + '% played'; 
}

2:

<button id="play" onclick="vidplay()">&gt;</button>

6

Tắt tiếng âm thanh

Đôi khi âm thanh của video là không cần thiết. Để tắt âm thanh của video, bạn chỉ cần thêm thuộc tính

video.addEventListener('timeupdate', updateProgressBar, false);


function updateProgressBar() { 
var progressBar = document.getElementById('progressbar'); 
var percentage = Math.floor((100 / mediaPlayer.duration) * mediaPlayer.currentTime);
 progressBar.value = percentage; progressBar.innerHTML = percentage + '% played'; 
}

3 vào mã

<progress id="progressbar" value="0" max="100"></progress>

2:

<button id="play" onclick="vidplay()">&gt;</button>

7

Đây là cùng một video được nhúng nhưng lần này với thuộc tính bị tắt tiếng được thêm vào:

Hiển thị chú thích hoặc phụ đề trong quá trình phát lại

Bằng cách sử dụng phần tử

video.addEventListener('timeupdate', updateProgressBar, false);


function updateProgressBar() { 
var progressBar = document.getElementById('progressbar'); 
var percentage = Math.floor((100 / mediaPlayer.duration) * mediaPlayer.currentTime);
 progressBar.value = percentage; progressBar.innerHTML = percentage + '% played'; 
}

5, bạn có thể thêm phụ đề, mô tả trình đọc màn hình và chú thích vào video.

Phần tử

video.addEventListener('timeupdate', updateProgressBar, false);


function updateProgressBar() { 
var progressBar = document.getElementById('progressbar'); 
var percentage = Math.floor((100 / mediaPlayer.duration) * mediaPlayer.currentTime);
 progressBar.value = percentage; progressBar.innerHTML = percentage + '% played'; 
}

5 hàm chính xác giống như một phần tử

<progress id="progressbar" value="0" max="100"></progress>

4 trong phần tử

<progress id="progressbar" value="0" max="100"></progress>

2. Nó có thuộc tính

<progress id="progressbar" value="0" max="100"></progress>

6 trỏ đến một tệp ở định dạng WebVTT. Bằng cách sử dụng

<video autoplay playsinline></video>

0, bạn có thể chỉ định tên sẽ được hiển thị cho người dùng trong UI. Với

<video autoplay playsinline></video>

1, bạn có thể chỉ định ngôn ngữ cho các chú thích. Thuộc tính

<video autoplay playsinline></video>

2 sẽ đặt cách sử dụng bản nhạc với các tùy chọn sau: phụ đề (mặc định), chú thích, mô tả, chương và siêu dữ liệu.

Khi tải các chú thích gốc chéo, bạn có thể phải chỉ định thuộc tính

<video autoplay playsinline></video>

3. Máy chủ web phục vụ các tệp .vtt cũng có thể phải cung cấp tiêu đề

<video autoplay playsinline></video>

4 cho các tệp .vtt.

<button id="play" onclick="vidplay()">&gt;</button>

8

Để biết thêm thông tin về chủ đề, tôi đề xuất các bài viết của Ian Devlin về chủ đề: Trợ giúp WebVTT, Google Chrome hỗ trợ phụ đề WebVTT, WebVTT và chú thích video Audio và HTML5 - Trạng thái trình duyệt hiện tại.

Truy cập nhiều chức năng hơn thông qua JavaScript

Phần tử

<progress id="progressbar" value="0" max="100"></progress>

2 cũng có các phương thức, thuộc tính và sự kiện chỉ có thể được truy cập thông qua JavaScript. Chúng bao gồm kiểm soát tốc độ phát lại, tìm ra các phần đệm của video, đọc bất kỳ trạng thái lỗi nào và hơn thế nữa. Bạn có thể tìm thấy danh sách đầy đủ ở đây.

Phù hợp với video chân dung trong người chơi cảnh quan sử dụng đối tượng phù hợp

Thuộc tính

<video autoplay playsinline></video>

6 CSS chỉ định làm thế nào nội dung của các thành phần IMG và video nên được thay đổi kích thước để phù hợp với thùng chứa của chúng.

<video autoplay playsinline></video>

6 có thể lấy một số giá trị:

```
<video autoplay playsinline></video>
```
8 - Video sẽ được chia tỷ lệ để phù hợp với container trong khi bảo toàn tỷ lệ khung hình, hộp thư sẽ có mặt xung quanh video
```
<video autoplay playsinline></video>
```
9 - Video được chia tỷ lệ để lấp đầy container trong khi bảo toàn tỷ lệ khung hình, video sẽ được cắt
```
<video autoplay playsinline style="pointer-events: none;"></video>
```
0 - Video được chia tỷ lệ để lấp đầy container mà không cần bảo quản tỷ lệ khung hình, video sẽ được kéo dài

<video autoplay playsinline style="pointer-events: none;"></video>

1 - Video không được thay đổi kích thước

Ở đây, một video chân dung được đặt trong một trình phát video phong cảnh bằng cách sử dụng

<video autoplay playsinline style="pointer-events: none;"></video>

2 CSS. Video được thu nhỏ xuống để phù hợp với container. Tỷ lệ khung hình chân dung của video được duy trì để không bóp méo video dẫn đến hộp thư ở hai bên:

Làm cách nào để che giấu điều khiển video trong HTML?

Chúng ta 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à cho phép các điều khiển hiển thị.not adding the controls attribute to the video element. Even without controls attribute on the elements the user can view the controls section by right-clicking on the video and enabling the show controls .