Nút phát/tạm dừng tùy chỉnh video html5

Ví dụ trong hành động

Bạn có thể tìm mã cho ví dụ được cập nhật, theo kiểu trên GitHub và xem trực tiếp

Sửa đổi sơ bộ từ ví dụ ban đầu

Phần này tóm tắt các sửa đổi đã được thực hiện đối với ví dụ trình phát video ban đầu để giúp tác vụ tạo kiểu dễ dàng hơn trước khi phần lớn công việc được bắt đầu

Đánh dấu HTML

Có một vài thay đổi đã được thực hiện đối với đánh dấu HTML được hiển thị trong bài viết trước. Các điều khiển video tùy chỉnh và phần tử

.controls {
  width: 100%;
  height: 8.0971659919028340080971659919028%; /* of figure's height */
  position: relative;
}

.controls {
  width: 100%;
  height: 8.0971659919028340080971659919028%; /* of figure's height */
  position: relative;
}

Đánh dấu cho các điều khiển tùy chỉnh bây giờ trông như sau

<div id="video-controls" class="controls" data-state="hidden">
  <button id="playpause" type="button" data-state="play">Play/Pausebutton>
  <button id="stop" type="button" data-state="stop">Stopbutton>
  <div class="progress">
    <progress id="progress" value="0" min="0">
      <span id="progress-bar">span>
    progress>
  div>
  <button id="mute" type="button" data-state="mute">Mute/Unmutebutton>
  <button id="volinc" type="button" data-state="volup">Vol+button>
  <button id="voldec" type="button" data-state="voldown">Vol-button>
  <button id="fs" type="button" data-state="go-fullscreen">Fullscreenbutton>
div>

Thay đổi CSS liên quan

Bài viết trước đặt thuộc tính

.controls {
  width: 100%;
  height: 8.0971659919028340080971659919028%; /* of figure's height */
  position: relative;
}

.controls {
  width: 100%;
  height: 8.0971659919028340080971659919028%; /* of figure's height */
  position: relative;
}

.controls {
  width: 100%;
  height: 8.0971659919028340080971659919028%; /* of figure's height */
  position: relative;
}

Ý tưởng "trạng thái dữ liệu" này cũng được sử dụng để đặt trạng thái hiện tại của các nút trong bộ điều khiển video, cho phép tạo kiểu trạng thái cụ thể

JavaScript

Như đã đề cập ở trên, thuộc tính

.controls {
  width: 100%;
  height: 8.0971659919028340080971659919028%; /* of figure's height */
  position: relative;
}

tạo kiểu

Kiểu trình phát video kết quả được sử dụng ở đây khá cơ bản — điều này là có chủ ý, vì mục đích là để cho thấy cách một trình phát video như vậy có thể được tạo kiểu và đáp ứng

Ghi chú. trong một số trường hợp, một số CSS cơ bản bị bỏ qua trong các mã ví dụ ở đây vì việc sử dụng nó rõ ràng hoặc không liên quan cụ thể đến việc tạo kiểu cho trình phát video

kiểu dáng cơ bản

Video HTML và các điều khiển của nó đều được chứa trong một phần tử

.controls {
  width: 100%;
  height: 8.0971659919028340080971659919028%; /* of figure's height */
  position: relative;
}

________số 8

Bản thân bộ chứa điều khiển video cũng cần một số kiểu dáng để nó được thiết lập đúng cách

.controls {
  width: 100%;
  height: 8.0971659919028340080971659919028%; /* of figure's height */
  position: relative;
}

Chiều cao của lớp

.controls {
  width: 100%;
  height: 8.0971659919028340080971659919028%; /* of figure's height */
  position: relative;
}

.controls {
  width: 100%;
  height: 8.0971659919028340080971659919028%; /* of figure's height */
  position: relative;
}

.controls {
  width: 100%;
  height: 8.0971659919028340080971659919028%; /* of figure's height */
  position: relative;
}

Như đã đề cập trước đó, thuộc tính

.controls {
  width: 100%;
  height: 8.0971659919028340080971659919028%; /* of figure's height */
  position: relative;
}

.controls {
  width: 100%;
  height: 8.0971659919028340080971659919028%; /* of figure's height */
  position: relative;
}

Có một số thuộc tính cũng cần được đặt cho tất cả các thành phần trong điều khiển video

.controls {
  width: 100%;
  height: 8.0971659919028340080971659919028%; /* of figure's height */
  position: relative;
}

Tất cả các phần tử được thả nổi bên trái, vì chúng được căn chỉnh cạnh nhau và mỗi phần tử được đặt để có

.controls {
  width: 100%;
  height: 8.0971659919028340080971659919028%; /* of figure's height */
  position: relative;
}

.controls {
  width: 100%;
  height: 8.0971659919028340080971659919028%; /* of figure's height */
  position: relative;
}

.controls {
  width: 100%;
  height: 8.0971659919028340080971659919028%; /* of figure's height */
  position: relative;
}

Vùng chứa

.controls {
  width: 100%;
  height: 8.0971659919028340080971659919028%; /* of figure's height */
  position: relative;
}

.controls {
  width: 100%;
  height: 8.0971659919028340080971659919028%; /* of figure's height */
  position: relative;
}

<div id="video-controls" class="controls" data-state="hidden">
  <button id="playpause" type="button" data-state="play">Play/Pausebutton>
  <button id="stop" type="button" data-state="stop">Stopbutton>
  <div class="progress">
    <progress id="progress" value="0" min="0">
      <span id="progress-bar">span>
    progress>
  div>
  <button id="mute" type="button" data-state="mute">Mute/Unmutebutton>
  <button id="volinc" type="button" data-state="volup">Vol+button>
  <button id="voldec" type="button" data-state="voldown">Vol-button>
  <button id="fs" type="button" data-state="go-fullscreen">Fullscreenbutton>
div>

nút

Nhiệm vụ tạo kiểu chính đầu tiên cần giải quyết là làm cho các nút của điều khiển video thực sự trông giống và hoạt động như các nút thực

Mỗi nút có một số kiểu dáng cơ bản

<div id="video-controls" class="controls" data-state="hidden">
  <button id="playpause" type="button" data-state="play">Play/Pausebutton>
  <button id="stop" type="button" data-state="stop">Stopbutton>
  <div class="progress">
    <progress id="progress" value="0" min="0">
      <span id="progress-bar">span>
    progress>
  div>
  <button id="mute" type="button" data-state="mute">Mute/Unmutebutton>
  <button id="volinc" type="button" data-state="volup">Vol+button>
  <button id="voldec" type="button" data-state="voldown">Vol-button>
  <button id="fs" type="button" data-state="go-fullscreen">Fullscreenbutton>
div>

Theo mặc định, tất cả các phần tử của

.controls {
  width: 100%;
  height: 8.0971659919028340080971659919028%; /* of figure's height */
  position: relative;
}

Các trạng thái

.controls {
  width: 100%;
  height: 8.0971659919028340080971659919028%; /* of figure's height */
  position: relative;
}

.controls {
  width: 100%;
  height: 8.0971659919028340080971659919028%; /* of figure's height */
  position: relative;
}

<div id="video-controls" class="controls" data-state="hidden">
  <button id="playpause" type="button" data-state="play">Play/Pausebutton>
  <button id="stop" type="button" data-state="stop">Stopbutton>
  <div class="progress">
    <progress id="progress" value="0" min="0">
      <span id="progress-bar">span>
    progress>
  div>
  <button id="mute" type="button" data-state="mute">Mute/Unmutebutton>
  <button id="volinc" type="button" data-state="volup">Vol+button>
  <button id="voldec" type="button" data-state="voldown">Vol-button>
  <button id="fs" type="button" data-state="go-fullscreen">Fullscreenbutton>
div>

Để có được hình ảnh nút phù hợp, một bộ biểu tượng bộ điều khiển chung miễn phí đã được tải xuống từ web. Sau đó, mỗi hình ảnh được chuyển đổi thành chuỗi được mã hóa base64 (sử dụng bộ mã hóa hình ảnh base64 trực tuyến), vì hình ảnh khá nhỏ nên chuỗi được mã hóa kết quả khá ngắn

Vì một số nút có chức năng kép, e. g. phát/tạm dừng và tắt tiếng/bật tiếng, các nút này có các trạng thái khác nhau cần được tạo kiểu. Như đã đề cập trước đó, một biến

.controls {
  width: 100%;
  height: 8.0971659919028340080971659919028%; /* of figure's height */
  position: relative;
}

Ví dụ: nút phát/tạm dừng có các định nghĩa hình nền sau (toàn bộ chuỗi base64 đã được bỏ qua cho ngắn gọn)

<div id="video-controls" class="controls" data-state="hidden">
  <button id="playpause" type="button" data-state="play">Play/Pausebutton>
  <button id="stop" type="button" data-state="stop">Stopbutton>
  <div class="progress">
    <progress id="progress" value="0" min="0">
      <span id="progress-bar">span>
    progress>
  div>
  <button id="mute" type="button" data-state="mute">Mute/Unmutebutton>
  <button id="volinc" type="button" data-state="volup">Vol+button>
  <button id="voldec" type="button" data-state="voldown">Vol-button>
  <button id="fs" type="button" data-state="go-fullscreen">Fullscreenbutton>
div>

Khi thay đổi

.controls {
  width: 100%;
  height: 8.0971659919028340080971659919028%; /* of figure's height */
  position: relative;
}

Thanh tiến trình

Phần tử

.controls {
  width: 100%;
  height: 8.0971659919028340080971659919028%; /* of figure's height */
  position: relative;
}

.controls {
  width: 100%;
  height: 8.0971659919028340080971659919028%; /* of figure's height */
  position: relative;
}

Giống như các phần tử

.controls {
  width: 100%;
  height: 8.0971659919028340080971659919028%; /* of figure's height */
  position: relative;
}

.controls {
  width: 100%;
  height: 8.0971659919028340080971659919028%; /* of figure's height */
  position: relative;
}

.controls {
  width: 100%;
  height: 8.0971659919028340080971659919028%; /* of figure's height */
  position: relative;
}

Như đã đề cập trong bài viết trước, có một dự phòng được cung cấp cho các trình duyệt không hỗ trợ phần tử

.controls {
  width: 100%;
  height: 8.0971659919028340080971659919028%; /* of figure's height */
  position: relative;
}

figure {
  max-width: 64rem;
  width: 100%;
  max-height: 30.875rem;
  height: 100%;
  margin: 1.25rem auto;
  padding: 1.051%;
  background-color: #666;
}

Lớp

.controls {
  width: 100%;
  height: 8.0971659919028340080971659919028%; /* of figure's height */
  position: relative;
}

.controls {
  width: 100%;
  height: 8.0971659919028340080971659919028%; /* of figure's height */
  position: relative;
}

<div id="video-controls" class="controls" data-state="hidden">
  <button id="playpause" type="button" data-state="play">Play/Pausebutton>
  <button id="stop" type="button" data-state="stop">Stopbutton>
  <div class="progress">
    <progress id="progress" value="0" min="0">
      <span id="progress-bar">span>
    progress>
  div>
  <button id="mute" type="button" data-state="mute">Mute/Unmutebutton>
  <button id="volinc" type="button" data-state="volup">Vol+button>
  <button id="voldec" type="button" data-state="voldown">Vol-button>
  <button id="fs" type="button" data-state="go-fullscreen">Fullscreenbutton>
div>

Có một số thuộc tính dành riêng cho trình duyệt cần được đặt để đảm bảo rằng Firefox và Chrome sử dụng màu bắt buộc cho thanh tiến trình

figure {
  max-width: 64rem;
  width: 100%;
  max-height: 30.875rem;
  height: 100%;
  margin: 1.25rem auto;
  padding: 1.051%;
  background-color: #666;
}

Mặc dù các thuộc tính giống nhau được đặt thành cùng một giá trị nhưng các quy tắc này cần được xác định riêng, nếu không Chrome sẽ bỏ qua

JavaScript

Đó thực sự là kiểu dáng ngay lập tức;

Kiểm soát khả năng hiển thị

Thay đổi đầu tiên rất đơn giản.

.controls {
  width: 100%;
  height: 8.0971659919028340080971659919028%; /* of figure's height */
  position: relative;
}

figure {
  max-width: 64rem;
  width: 100%;
  max-height: 30.875rem;
  height: 100%;
  margin: 1.25rem auto;
  padding: 1.051%;
  background-color: #666;
}

Hỗ trợ thanh tiến trình

Cũng cần kiểm tra để thiết lập thanh tiến trình "giả" nếu trình duyệt không hỗ trợ phần tử

.controls {
  width: 100%;
  height: 8.0971659919028340080971659919028%; /* of figure's height */
  position: relative;
}

figure {
  max-width: 64rem;
  width: 100%;
  max-height: 30.875rem;
  height: 100%;
  margin: 1.25rem auto;
  padding: 1.051%;
  background-color: #666;
}

chức năng nút

Phần này xem xét JavaScript cần thiết để triển khai chức năng của nút

Phát/Tạm dừng và Tắt tiếng

Giờ đây, các nút thực sự trông giống như các nút và có hình ảnh cho biết chức năng của chúng, cần thực hiện một số thay đổi để các nút "chức năng kép" (chẳng hạn như nút phát/tạm dừng) ở đúng "trạng thái" và hiển thị . Để tạo điều kiện thuận lợi cho việc này, một hàm mới được định nghĩa có tên là

<div id="video-controls" class="controls" data-state="hidden">
  <button id="playpause" type="button" data-state="play">Play/Pausebutton>
  <button id="stop" type="button" data-state="stop">Stopbutton>
  <div class="progress">
    <progress id="progress" value="0" min="0">
      <span id="progress-bar">span>
    progress>
  div>
  <button id="mute" type="button" data-state="mute">Mute/Unmutebutton>
  <button id="volinc" type="button" data-state="volup">Vol+button>
  <button id="voldec" type="button" data-state="voldown">Vol-button>
  <button id="fs" type="button" data-state="go-fullscreen">Fullscreenbutton>
div>

figure {
  max-width: 64rem;
  width: 100%;
  max-height: 30.875rem;
  height: 100%;
  margin: 1.25rem auto;
  padding: 1.051%;
  background-color: #666;
}

Chức năng này sau đó được gọi bởi trình xử lý sự kiện có liên quan

figure {
  max-width: 64rem;
  width: 100%;
  max-height: 30.875rem;
  height: 100%;
  margin: 1.25rem auto;
  padding: 1.051%;
  background-color: #666;
}

Bạn có thể nhận thấy rằng có những trình xử lý mới trong đó các sự kiện

<div id="video-controls" class="controls" data-state="hidden">
  <button id="playpause" type="button" data-state="play">Play/Pausebutton>
  <button id="stop" type="button" data-state="stop">Stopbutton>
  <div class="progress">
    <progress id="progress" value="0" min="0">
      <span id="progress-bar">span>
    progress>
  div>
  <button id="mute" type="button" data-state="mute">Mute/Unmutebutton>
  <button id="volinc" type="button" data-state="volup">Vol+button>
  <button id="voldec" type="button" data-state="voldown">Vol-button>
  <button id="fs" type="button" data-state="go-fullscreen">Fullscreenbutton>
div>

<div id="video-controls" class="controls" data-state="hidden">
  <button id="playpause" type="button" data-state="play">Play/Pausebutton>
  <button id="stop" type="button" data-state="stop">Stopbutton>
  <div class="progress">
    <progress id="progress" value="0" min="0">
      <span id="progress-bar">span>
    progress>
  div>
  <button id="mute" type="button" data-state="mute">Mute/Unmutebutton>
  <button id="volinc" type="button" data-state="volup">Vol+button>
  <button id="voldec" type="button" data-state="voldown">Vol-button>
  <button id="fs" type="button" data-state="go-fullscreen">Fullscreenbutton>
div>

<div id="video-controls" class="controls" data-state="hidden">
  <button id="playpause" type="button" data-state="play">Play/Pausebutton>
  <button id="stop" type="button" data-state="stop">Stopbutton>
  <div class="progress">
    <progress id="progress" value="0" min="0">
      <span id="progress-bar">span>
    progress>
  div>
  <button id="mute" type="button" data-state="mute">Mute/Unmutebutton>
  <button id="volinc" type="button" data-state="volup">Vol+button>
  <button id="voldec" type="button" data-state="voldown">Vol-button>
  <button id="fs" type="button" data-state="go-fullscreen">Fullscreenbutton>
div>

<div id="video-controls" class="controls" data-state="hidden">
  <button id="playpause" type="button" data-state="play">Play/Pausebutton>
  <button id="stop" type="button" data-state="stop">Stopbutton>
  <div class="progress">
    <progress id="progress" value="0" min="0">
      <span id="progress-bar">span>
    progress>
  div>
  <button id="mute" type="button" data-state="mute">Mute/Unmutebutton>
  <button id="volinc" type="button" data-state="volup">Vol+button>
  <button id="voldec" type="button" data-state="voldown">Vol-button>
  <button id="fs" type="button" data-state="go-fullscreen">Fullscreenbutton>
div>

<div id="video-controls" class="controls" data-state="hidden">
  <button id="playpause" type="button" data-state="play">Play/Pausebutton>
  <button id="stop" type="button" data-state="stop">Stopbutton>
  <div class="progress">
    <progress id="progress" value="0" min="0">
      <span id="progress-bar">span>
    progress>
  div>
  <button id="mute" type="button" data-state="mute">Mute/Unmutebutton>
  <button id="volinc" type="button" data-state="volup">Vol+button>
  <button id="voldec" type="button" data-state="voldown">Vol-button>
  <button id="fs" type="button" data-state="go-fullscreen">Fullscreenbutton>
div>

<div id="video-controls" class="controls" data-state="hidden">
  <button id="playpause" type="button" data-state="play">Play/Pausebutton>
  <button id="stop" type="button" data-state="stop">Stopbutton>
  <div class="progress">
    <progress id="progress" value="0" min="0">
      <span id="progress-bar">span>
    progress>
  div>
  <button id="mute" type="button" data-state="mute">Mute/Unmutebutton>
  <button id="volinc" type="button" data-state="volup">Vol+button>
  <button id="voldec" type="button" data-state="voldown">Vol-button>
  <button id="fs" type="button" data-state="go-fullscreen">Fullscreenbutton>
div>

figure {
  max-width: 64rem;
  width: 100%;
  max-height: 30.875rem;
  height: 100%;
  margin: 1.25rem auto;
  padding: 1.051%;
  background-color: #666;
}

Âm lượng

Chức năng

<div id="video-controls" class="controls" data-state="hidden">
  <button id="playpause" type="button" data-state="play">Play/Pausebutton>
  <button id="stop" type="button" data-state="stop">Stopbutton>
  <div class="progress">
    <progress id="progress" value="0" min="0">
      <span id="progress-bar">span>
    progress>
  div>
  <button id="mute" type="button" data-state="mute">Mute/Unmutebutton>
  <button id="volinc" type="button" data-state="volup">Vol+button>
  <button id="voldec" type="button" data-state="voldown">Vol-button>
  <button id="fs" type="button" data-state="go-fullscreen">Fullscreenbutton>
div>

<div id="video-controls" class="controls" data-state="hidden">
  <button id="playpause" type="button" data-state="play">Play/Pausebutton>
  <button id="stop" type="button" data-state="stop">Stopbutton>
  <div class="progress">
    <progress id="progress" value="0" min="0">
      <span id="progress-bar">span>
    progress>
  div>
  <button id="mute" type="button" data-state="mute">Mute/Unmutebutton>
  <button id="volinc" type="button" data-state="volup">Vol+button>
  <button id="voldec" type="button" data-state="voldown">Vol-button>
  <button id="fs" type="button" data-state="go-fullscreen">Fullscreenbutton>
div>

figure {
  max-width: 64rem;
  width: 100%;
  max-height: 30.875rem;
  height: 100%;
  margin: 1.25rem auto;
  padding: 1.051%;
  background-color: #666;
}

Chức năng

<div id="video-controls" class="controls" data-state="hidden">
  <button id="playpause" type="button" data-state="play">Play/Pausebutton>
  <button id="stop" type="button" data-state="stop">Stopbutton>
  <div class="progress">
    <progress id="progress" value="0" min="0">
      <span id="progress-bar">span>
    progress>
  div>
  <button id="mute" type="button" data-state="mute">Mute/Unmutebutton>
  <button id="volinc" type="button" data-state="volup">Vol+button>
  <button id="voldec" type="button" data-state="voldown">Vol-button>
  <button id="fs" type="button" data-state="go-fullscreen">Fullscreenbutton>
div>

<div id="video-controls" class="controls" data-state="hidden">
  <button id="playpause" type="button" data-state="play">Play/Pausebutton>
  <button id="stop" type="button" data-state="stop">Stopbutton>
  <div class="progress">
    <progress id="progress" value="0" min="0">
      <span id="progress-bar">span>
    progress>
  div>
  <button id="mute" type="button" data-state="mute">Mute/Unmutebutton>
  <button id="volinc" type="button" data-state="volup">Vol+button>
  <button id="voldec" type="button" data-state="voldown">Vol-button>
  <button id="fs" type="button" data-state="go-fullscreen">Fullscreenbutton>
div>

<div id="video-controls" class="controls" data-state="hidden">
  <button id="playpause" type="button" data-state="play">Play/Pausebutton>
  <button id="stop" type="button" data-state="stop">Stopbutton>
  <div class="progress">
    <progress id="progress" value="0" min="0">
      <span id="progress-bar">span>
    progress>
  div>
  <button id="mute" type="button" data-state="mute">Mute/Unmutebutton>
  <button id="volinc" type="button" data-state="volup">Vol+button>
  <button id="voldec" type="button" data-state="voldown">Vol-button>
  <button id="fs" type="button" data-state="go-fullscreen">Fullscreenbutton>
div>

<div id="video-controls" class="controls" data-state="hidden">
  <button id="playpause" type="button" data-state="play">Play/Pausebutton>
  <button id="stop" type="button" data-state="stop">Stopbutton>
  <div class="progress">
    <progress id="progress" value="0" min="0">
      <span id="progress-bar">span>
    progress>
  div>
  <button id="mute" type="button" data-state="mute">Mute/Unmutebutton>
  <button id="volinc" type="button" data-state="volup">Vol+button>
  <button id="voldec" type="button" data-state="voldown">Vol-button>
  <button id="fs" type="button" data-state="go-fullscreen">Fullscreenbutton>
div>

figure {
  max-width: 64rem;
  width: 100%;
  max-height: 30.875rem;
  height: 100%;
  margin: 1.25rem auto;
  padding: 1.051%;
  background-color: #666;
}

Thanh tiến trình

Một thay đổi nhỏ cũng cần được thực hiện đối với trình xử lý nhấp chuột cho phần tử

.controls {
  width: 100%;
  height: 8.0971659919028340080971659919028%; /* of figure's height */
  position: relative;
}

.controls {
  width: 100%;
  height: 8.0971659919028340080971659919028%; /* of figure's height */
  position: relative;
}

<div id="video-controls" class="controls" data-state="hidden">
  <button id="playpause" type="button" data-state="play">Play/Pausebutton>
  <button id="stop" type="button" data-state="stop">Stopbutton>
  <div class="progress">
    <progress id="progress" value="0" min="0">
      <span id="progress-bar">span>
    progress>
  div>
  <button id="mute" type="button" data-state="mute">Mute/Unmutebutton>
  <button id="volinc" type="button" data-state="volup">Vol+button>
  <button id="voldec" type="button" data-state="voldown">Vol-button>
  <button id="fs" type="button" data-state="go-fullscreen">Fullscreenbutton>
div>

figure {
  max-width: 64rem;
  width: 100%;
  max-height: 30.875rem;
  height: 100%;
  margin: 1.25rem auto;
  padding: 1.051%;
  background-color: #666;
}

Toàn màn hình

Việc triển khai FullScreen không thay đổi

kiểu dáng đáp ứng

Giờ đây, trình phát đã có giao diện cơ bản được chăm sóc, một số thay đổi kiểu dáng khác - liên quan đến truy vấn phương tiện - cần được thực hiện để làm cho trình phát phản hồi nhanh

Trình phát hiện hoạt động khá tốt cho đến khi được hiển thị trên màn hình "trung bình" (e. g. 1024px/64em) hoặc nhỏ hơn. Trong trường hợp này, các lề và phần đệm trên phần tử

.controls {
  width: 100%;
  height: 8.0971659919028340080971659919028%; /* of figure's height */
  position: relative;
}

.controls {
  width: 100%;
  height: 8.0971659919028340080971659919028%; /* of figure's height */
  position: relative;
}

Điều này hoạt động đủ tốt cho đến khi nó được xem trên màn hình nhỏ hơn (680px/42. 5em), do đó, một điểm dừng khác được thực hiện tại đây. Vì chiều cao của phần tử lớp

.controls {
  width: 100%;
  height: 8.0971659919028340080971659919028%; /* of figure's height */
  position: relative;
}

<div id="video-controls" class="controls" data-state="hidden">
  <button id="playpause" type="button" data-state="play">Play/Pausebutton>
  <button id="stop" type="button" data-state="stop">Stopbutton>
  <div class="progress">
    <progress id="progress" value="0" min="0">
      <span id="progress-bar">span>
    progress>
  div>
  <button id="mute" type="button" data-state="mute">Mute/Unmutebutton>
  <button id="volinc" type="button" data-state="volup">Vol+button>
  <button id="voldec" type="button" data-state="voldown">Vol-button>
  <button id="fs" type="button" data-state="go-fullscreen">Fullscreenbutton>
div>

.controls {
  width: 100%;
  height: 8.0971659919028340080971659919028%; /* of figure's height */
  position: relative;
}

.controls {
  width: 100%;
  height: 8.0971659919028340080971659919028%; /* of figure's height */
  position: relative;
}

Hộp chứa

<div id="video-controls" class="controls" data-state="hidden">
  <button id="playpause" type="button" data-state="play">Play/Pausebutton>
  <button id="stop" type="button" data-state="stop">Stopbutton>
  <div class="progress">
    <progress id="progress" value="0" min="0">
      <span id="progress-bar">span>
    progress>
  div>
  <button id="mute" type="button" data-state="mute">Mute/Unmutebutton>
  <button id="volinc" type="button" data-state="volup">Vol+button>
  <button id="voldec" type="button" data-state="voldown">Vol-button>
  <button id="fs" type="button" data-state="go-fullscreen">Fullscreenbutton>
div>

<div id="video-controls" class="controls" data-state="hidden">
  <button id="playpause" type="button" data-state="play">Play/Pausebutton>
  <button id="stop" type="button" data-state="stop">Stopbutton>
  <div class="progress">
    <progress id="progress" value="0" min="0">
      <span id="progress-bar">span>
    progress>
  div>
  <button id="mute" type="button" data-state="mute">Mute/Unmutebutton>
  <button id="volinc" type="button" data-state="volup">Vol+button>
  <button id="voldec" type="button" data-state="voldown">Vol-button>
  <button id="fs" type="button" data-state="go-fullscreen">Fullscreenbutton>
div>