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

Các phần tử

<div class="player">
  <video controls>
    <source src="video/sintel-short.mp4" type="video/mp4" />
    <source src="video/sintel-short.webm" type="video/webm" />
    
  video>
  <div class="controls">
    <button class="play" data-icon="P" aria-label="play pause toggle">button>
    <button class="stop" data-icon="S" aria-label="stop">button>
    <div class="timer">
      <div>div>
      <span aria-label="timer">00:00span>
    div>
    <button class="rwd" data-icon="B" aria-label="rewind">button>
    <button class="fwd" data-icon="F" aria-label="fast forward">button>
  div>
div>

<div class="player">
  <video controls>
    <source src="video/sintel-short.mp4" type="video/mp4" />
    <source src="video/sintel-short.webm" type="video/webm" />
    
  video>
  <div class="controls">
    <button class="play" data-icon="P" aria-label="play pause toggle">button>
    <button class="stop" data-icon="S" aria-label="stop">button>
    <div class="timer">
      <div>div>
      <span aria-label="timer">00:00span>
    div>
    <button class="rwd" data-icon="B" aria-label="rewind">button>
    <button class="fwd" data-icon="F" aria-label="fast forward">button>
  div>
div>

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

Điều này tạo ra một trình phát video bên trong trình duyệt như vậy

Bạn có thể xem lại chức năng của tất cả các tính năng HTML trong bài viết được liên kết ở trên; . Nếu bạn không chỉ định điều này, bạn sẽ không có điều khiển phát lại

Điều này không hữu ích ngay lập tức để phát lại video, nhưng nó có lợi thế. Một vấn đề lớn với các điều khiển trình duyệt gốc là chúng khác nhau trong mỗi trình duyệt — không tốt cho việc hỗ trợ nhiều trình duyệt. Một vấn đề lớn khác là các điều khiển gốc trong hầu hết các trình duyệt không thể truy cập bằng bàn phím

Bạn có thể giải quyết cả hai vấn đề này bằng cách ẩn các điều khiển gốc (bằng cách xóa thuộc tính

.controls {
  visibility: hidden;
  opacity: 0.5;
  width: 400px;
  border-radius: 10px;
  position: absolute;
  bottom: 20px;
  left: 50%;
  margin-left: -200px;
  background-color: black;
  box-shadow: 3px 3px 5px black;
  transition: 1s all;
  display: flex;
}

.player:hover .controls,
.player:focus-within .controls {
  opacity: 1;
}

Một phần của thông số HTML, API

.controls {
  visibility: hidden;
  opacity: 0.5;
  width: 400px;
  border-radius: 10px;
  position: absolute;
  bottom: 20px;
  left: 50%;
  margin-left: -200px;
  background-color: black;
  box-shadow: 3px 3px 5px black;
  transition: 1s all;
  display: flex;
}

.player:hover .controls,
.player:focus-within .controls {
  opacity: 1;
}

.controls {
  visibility: hidden;
  opacity: 0.5;
  width: 400px;
  border-radius: 10px;
  position: absolute;
  bottom: 20px;
  left: 50%;
  margin-left: -200px;
  background-color: black;
  box-shadow: 3px 3px 5px black;
  transition: 1s all;
  display: flex;
}

.player:hover .controls,
.player:focus-within .controls {
  opacity: 1;
}

.controls {
  visibility: hidden;
  opacity: 0.5;
  width: 400px;
  border-radius: 10px;
  position: absolute;
  bottom: 20px;
  left: 50%;
  margin-left: -200px;
  background-color: black;
  box-shadow: 3px 3px 5px black;
  transition: 1s all;
  display: flex;
}

.player:hover .controls,
.player:focus-within .controls {
  opacity: 1;
}

<div class="player">
  <video controls>
    <source src="video/sintel-short.mp4" type="video/mp4" />
    <source src="video/sintel-short.webm" type="video/webm" />
    
  video>
  <div class="controls">
    <button class="play" data-icon="P" aria-label="play pause toggle">button>
    <button class="stop" data-icon="S" aria-label="stop">button>
    <div class="timer">
      <div>div>
      <span aria-label="timer">00:00span>
    div>
    <button class="rwd" data-icon="B" aria-label="rewind">button>
    <button class="fwd" data-icon="F" aria-label="fast forward">button>
  div>
div>

<div class="player">
  <video controls>
    <source src="video/sintel-short.mp4" type="video/mp4" />
    <source src="video/sintel-short.webm" type="video/webm" />
    
  video>
  <div class="controls">
    <button class="play" data-icon="P" aria-label="play pause toggle">button>
    <button class="stop" data-icon="S" aria-label="stop">button>
    <div class="timer">
      <div>div>
      <span aria-label="timer">00:00span>
    div>
    <button class="rwd" data-icon="B" aria-label="rewind">button>
    <button class="fwd" data-icon="F" aria-label="fast forward">button>
  div>
div>

Ví dụ hoàn thành của chúng ta sẽ trông (và hoạt động) giống như sau

Để bắt đầu với ví dụ này, hãy tải xuống media-player-start của chúng tôi. zip và giải nén nó vào một thư mục mới trên ổ cứng của bạn. Nếu bạn đã tải xuống repo ví dụ của chúng tôi, bạn sẽ tìm thấy nó trong

.controls {
  visibility: hidden;
  opacity: 0.5;
  width: 400px;
  border-radius: 10px;
  position: absolute;
  bottom: 20px;
  left: 50%;
  margin-left: -200px;
  background-color: black;
  box-shadow: 3px 3px 5px black;
  transition: 1s all;
  display: flex;
}

.player:hover .controls,
.player:focus-within .controls {
  opacity: 1;
}

Tại thời điểm này, nếu bạn tải HTML, bạn sẽ thấy trình phát video HTML hoàn toàn bình thường, với các điều khiển gốc được hiển thị

Khám phá HTML

Mở tệp chỉ mục HTML. Bạn sẽ thấy một số tính năng;

<div class="player">
  <video controls>
    <source src="video/sintel-short.mp4" type="video/mp4" />
    <source src="video/sintel-short.webm" type="video/webm" />
    
  video>
  <div class="controls">
    <button class="play" data-icon="P" aria-label="play pause toggle">button>
    <button class="stop" data-icon="S" aria-label="stop">button>
    <div class="timer">
      <div>div>
      <span aria-label="timer">00:00span>
    div>
    <button class="rwd" data-icon="B" aria-label="rewind">button>
    <button class="fwd" data-icon="F" aria-label="fast forward">button>
  div>
div>

• Toàn bộ trình phát được bao bọc trong một phần tử

  window.myVideo = hypeDocument.getElementById('ch4dance');
  	myVideo.addEventListener('timeupdate', syncTimelines);
  	myVideo.play();
  	function syncTimelines() {
  		videoTime = myVideo.currentTime;
  		hypeDocument.goToTimeInTimelineNamed(videoTime, 'Main Timeline');
  		
  		if (!myVideo.paused) {
  	    hypeDocument.continueTimelineNamed('Main Timeline');
  		}
  		else if (myVideo.paused) {
  		hypeDocument.pauseTimelineNamed('Main Timeline');    
  		}		
  	}

  50, vì vậy tất cả có thể được tạo kiểu thành một đơn vị nếu cần
• Phần tử

  <div class="player">
    <video controls>
      <source src="video/sintel-short.mp4" type="video/mp4" />
      <source src="video/sintel-short.webm" type="video/webm" />
      
    video>
    <div class="controls">
      <button class="play" data-icon="P" aria-label="play pause toggle">button>
      <button class="stop" data-icon="S" aria-label="stop">button>
      <div class="timer">
        <div>div>
        <span aria-label="timer">00:00span>
      div>
      <button class="rwd" data-icon="B" aria-label="rewind">button>
      <button class="fwd" data-icon="F" aria-label="fast forward">button>
    div>
  div>
  

  8 chứa hai phần tử

  window.myVideo = hypeDocument.getElementById('ch4dance');
  	myVideo.addEventListener('timeupdate', syncTimelines);
  	myVideo.play();
  	function syncTimelines() {
  		videoTime = myVideo.currentTime;
  		hypeDocument.goToTimeInTimelineNamed(videoTime, 'Main Timeline');
  		
  		if (!myVideo.paused) {
  	    hypeDocument.continueTimelineNamed('Main Timeline');
  		}
  		else if (myVideo.paused) {
  		hypeDocument.pauseTimelineNamed('Main Timeline');    
  		}		
  	}

  52 để có thể tải các định dạng khác nhau tùy thuộc vào trình duyệt xem trang web
• Các điều khiển HTML có lẽ là thú vị nhất
  • Chúng tôi có bốn

    window.myVideo = hypeDocument.getElementById('ch4dance');
    	myVideo.addEventListener('timeupdate', syncTimelines);
    	myVideo.play();
    	function syncTimelines() {
    		videoTime = myVideo.currentTime;
    		hypeDocument.goToTimeInTimelineNamed(videoTime, 'Main Timeline');
    		
    		if (!myVideo.paused) {
    	    hypeDocument.continueTimelineNamed('Main Timeline');
    		}
    		else if (myVideo.paused) {
    		hypeDocument.pauseTimelineNamed('Main Timeline');    
    		}		
    	}

    53 — phát/tạm dừng, dừng, tua lại và tua nhanh
  • Mỗi

    window.myVideo = hypeDocument.getElementById('ch4dance');
    	myVideo.addEventListener('timeupdate', syncTimelines);
    	myVideo.play();
    	function syncTimelines() {
    		videoTime = myVideo.currentTime;
    		hypeDocument.goToTimeInTimelineNamed(videoTime, 'Main Timeline');
    		
    		if (!myVideo.paused) {
    	    hypeDocument.continueTimelineNamed('Main Timeline');
    		}
    		else if (myVideo.paused) {
    		hypeDocument.pauseTimelineNamed('Main Timeline');    
    		}		
    	}

    53 có một tên

    window.myVideo = hypeDocument.getElementById('ch4dance');
    	myVideo.addEventListener('timeupdate', syncTimelines);
    	myVideo.play();
    	function syncTimelines() {
    		videoTime = myVideo.currentTime;
    		hypeDocument.goToTimeInTimelineNamed(videoTime, 'Main Timeline');
    		
    		if (!myVideo.paused) {
    	    hypeDocument.continueTimelineNamed('Main Timeline');
    		}
    		else if (myVideo.paused) {
    		hypeDocument.pauseTimelineNamed('Main Timeline');    
    		}		
    	}

    55, một thuộc tính

    window.myVideo = hypeDocument.getElementById('ch4dance');
    	myVideo.addEventListener('timeupdate', syncTimelines);
    	myVideo.play();
    	function syncTimelines() {
    		videoTime = myVideo.currentTime;
    		hypeDocument.goToTimeInTimelineNamed(videoTime, 'Main Timeline');
    		
    		if (!myVideo.paused) {
    	    hypeDocument.continueTimelineNamed('Main Timeline');
    		}
    		else if (myVideo.paused) {
    		hypeDocument.pauseTimelineNamed('Main Timeline');    
    		}		
    	}

    56 để xác định biểu tượng nào sẽ được hiển thị trên mỗi nút (chúng tôi sẽ chỉ ra cách thức hoạt động của biểu tượng này trong phần bên dưới) và một thuộc tính

    window.myVideo = hypeDocument.getElementById('ch4dance');
    	myVideo.addEventListener('timeupdate', syncTimelines);
    	myVideo.play();
    	function syncTimelines() {
    		videoTime = myVideo.currentTime;
    		hypeDocument.goToTimeInTimelineNamed(videoTime, 'Main Timeline');
    		
    		if (!myVideo.paused) {
    	    hypeDocument.continueTimelineNamed('Main Timeline');
    		}
    		else if (myVideo.paused) {
    		hypeDocument.pauseTimelineNamed('Main Timeline');    
    		}		
    	}

    57 để cung cấp mô tả dễ hiểu về từng nút, vì chúng tôi' . Nội dung của các thuộc tính

    window.myVideo = hypeDocument.getElementById('ch4dance');
    	myVideo.addEventListener('timeupdate', syncTimelines);
    	myVideo.play();
    	function syncTimelines() {
    		videoTime = myVideo.currentTime;
    		hypeDocument.goToTimeInTimelineNamed(videoTime, 'Main Timeline');
    		
    		if (!myVideo.paused) {
    	    hypeDocument.continueTimelineNamed('Main Timeline');
    		}
    		else if (myVideo.paused) {
    		hypeDocument.pauseTimelineNamed('Main Timeline');    
    		}		
    	}

    57 được trình đọc màn hình đọc ra khi người dùng của họ tập trung vào các phần tử chứa chúng
  • Ngoài ra còn có một bộ đếm thời gian

    window.myVideo = hypeDocument.getElementById('ch4dance');
    	myVideo.addEventListener('timeupdate', syncTimelines);
    	myVideo.play();
    	function syncTimelines() {
    		videoTime = myVideo.currentTime;
    		hypeDocument.goToTimeInTimelineNamed(videoTime, 'Main Timeline');
    		
    		if (!myVideo.paused) {
    	    hypeDocument.continueTimelineNamed('Main Timeline');
    		}
    		else if (myVideo.paused) {
    		hypeDocument.pauseTimelineNamed('Main Timeline');    
    		}		
    	}

    50, sẽ báo cáo thời gian đã trôi qua khi video đang phát. Để giải trí, chúng tôi đang cung cấp hai cơ chế báo cáo — một

    <div class="player">
      <video controls>
        <source src="video/sintel-short.mp4" type="video/mp4" />
        <source src="video/sintel-short.webm" type="video/webm" />
        
      video>
      <div class="controls">
        <button class="play" data-icon="P" aria-label="play pause toggle">button>
        <button class="stop" data-icon="S" aria-label="stop">button>
        <div class="timer">
          <div>div>
          <span aria-label="timer">00:00span>
        div>
        <button class="rwd" data-icon="B" aria-label="rewind">button>
        <button class="fwd" data-icon="F" aria-label="fast forward">button>
      div>
    div>
    

    50 chứa thời gian đã trôi qua tính bằng phút và giây và một

    window.myVideo = hypeDocument.getElementById('ch4dance');
    	myVideo.addEventListener('timeupdate', syncTimelines);
    	myVideo.play();
    	function syncTimelines() {
    		videoTime = myVideo.currentTime;
    		hypeDocument.goToTimeInTimelineNamed(videoTime, 'Main Timeline');
    		
    		if (!myVideo.paused) {
    	    hypeDocument.continueTimelineNamed('Main Timeline');
    		}
    		else if (myVideo.paused) {
    		hypeDocument.pauseTimelineNamed('Main Timeline');    
    		}		
    	}

    50 bổ sung mà chúng tôi sẽ sử dụng để tạo một thanh chỉ báo nằm ngang sẽ dài hơn khi thời gian trôi qua. Để biết được thành phẩm sẽ trông như thế nào, hãy xem phiên bản hoàn thiện của chúng tôi

Khám phá CSS

Bây giờ hãy mở tệp CSS và xem bên trong. CSS cho ví dụ này không quá phức tạp, nhưng chúng tôi sẽ đánh dấu những phần thú vị nhất ở đây. Trước hết, hãy chú ý kiểu dáng của

<div class="player">
  <video controls>
    <source src="video/sintel-short.mp4" type="video/mp4" />
    <source src="video/sintel-short.webm" type="video/webm" />
    
  video>
  <div class="controls">
    <button class="play" data-icon="P" aria-label="play pause toggle">button>
    <button class="stop" data-icon="S" aria-label="stop">button>
    <div class="timer">
      <div>div>
      <span aria-label="timer">00:00span>
    div>
    <button class="rwd" data-icon="B" aria-label="rewind">button>
    <button class="fwd" data-icon="F" aria-label="fast forward">button>
  div>
div>

.controls {
  visibility: hidden;
  opacity: 0.5;
  width: 400px;
  border-radius: 10px;
  position: absolute;
  bottom: 20px;
  left: 50%;
  margin-left: -200px;
  background-color: black;
  box-shadow: 3px 3px 5px black;
  transition: 1s all;
  display: flex;
}

.player:hover .controls,
.player:focus-within .controls {
  opacity: 1;
}

• Chúng tôi bắt đầu với

  <div class="player">
    <video controls>
      <source src="video/sintel-short.mp4" type="video/mp4" />
      <source src="video/sintel-short.webm" type="video/webm" />
      
    video>
    <div class="controls">
      <button class="play" data-icon="P" aria-label="play pause toggle">button>
      <button class="stop" data-icon="S" aria-label="stop">button>
      <div class="timer">
        <div>div>
        <span aria-label="timer">00:00span>
      div>
      <button class="rwd" data-icon="B" aria-label="rewind">button>
      <button class="fwd" data-icon="F" aria-label="fast forward">button>
    div>
  div>
  

  53 của các điều khiển tùy chỉnh được đặt thành

  <div class="player">
    <video controls>
      <source src="video/sintel-short.mp4" type="video/mp4" />
      <source src="video/sintel-short.webm" type="video/webm" />
      
    video>
    <div class="controls">
      <button class="play" data-icon="P" aria-label="play pause toggle">button>
      <button class="stop" data-icon="S" aria-label="stop">button>
      <div class="timer">
        <div>div>
        <span aria-label="timer">00:00span>
      div>
      <button class="rwd" data-icon="B" aria-label="rewind">button>
      <button class="fwd" data-icon="F" aria-label="fast forward">button>
    div>
  div>
  

  54. Trong JavaScript của chúng tôi sau này, chúng tôi sẽ đặt các điều khiển thành

  <div class="player">
    <video controls>
      <source src="video/sintel-short.mp4" type="video/mp4" />
      <source src="video/sintel-short.webm" type="video/webm" />
      
    video>
    <div class="controls">
      <button class="play" data-icon="P" aria-label="play pause toggle">button>
      <button class="stop" data-icon="S" aria-label="stop">button>
      <div class="timer">
        <div>div>
        <span aria-label="timer">00:00span>
      div>
      <button class="rwd" data-icon="B" aria-label="rewind">button>
      <button class="fwd" data-icon="F" aria-label="fast forward">button>
    div>
  div>
  

  55 và xóa thuộc tính

  .controls {
    visibility: hidden;
    opacity: 0.5;
    width: 400px;
    border-radius: 10px;
    position: absolute;
    bottom: 20px;
    left: 50%;
    margin-left: -200px;
    background-color: black;
    box-shadow: 3px 3px 5px black;
    transition: 1s all;
    display: flex;
  }
  
  .player:hover .controls,
  .player:focus-within .controls {
    opacity: 1;
  }
  

  2 khỏi phần tử

  <div class="player">
    <video controls>
      <source src="video/sintel-short.mp4" type="video/mp4" />
      <source src="video/sintel-short.webm" type="video/webm" />
      
    video>
    <div class="controls">
      <button class="play" data-icon="P" aria-label="play pause toggle">button>
      <button class="stop" data-icon="S" aria-label="stop">button>
      <div class="timer">
        <div>div>
        <span aria-label="timer">00:00span>
      div>
      <button class="rwd" data-icon="B" aria-label="rewind">button>
      <button class="fwd" data-icon="F" aria-label="fast forward">button>
    div>
  div>
  

  8. Điều này là để nếu JavaScript không tải vì lý do nào đó, người dùng vẫn có thể sử dụng video với các điều khiển gốc
• Chúng tôi cung cấp cho các điều khiển một

  <div class="player">
    <video controls>
      <source src="video/sintel-short.mp4" type="video/mp4" />
      <source src="video/sintel-short.webm" type="video/webm" />
      
    video>
    <div class="controls">
      <button class="play" data-icon="P" aria-label="play pause toggle">button>
      <button class="stop" data-icon="S" aria-label="stop">button>
      <div class="timer">
        <div>div>
        <span aria-label="timer">00:00span>
      div>
      <button class="rwd" data-icon="B" aria-label="rewind">button>
      <button class="fwd" data-icon="F" aria-label="fast forward">button>
    div>
  div>
  

  58 của 0. 5 theo mặc định, để chúng ít gây mất tập trung hơn khi bạn đang cố xem video. Chỉ khi bạn di chuột/tập trung vào trình phát, các điều khiển mới xuất hiện ở độ mờ hoàn toàn
• Chúng tôi bố trí các nút bên trong thanh điều khiển bằng Flexbox (

  <div class="player">
    <video controls>
      <source src="video/sintel-short.mp4" type="video/mp4" />
      <source src="video/sintel-short.webm" type="video/webm" />
      
    video>
    <div class="controls">
      <button class="play" data-icon="P" aria-label="play pause toggle">button>
      <button class="stop" data-icon="S" aria-label="stop">button>
      <div class="timer">
        <div>div>
        <span aria-label="timer">00:00span>
      div>
      <button class="rwd" data-icon="B" aria-label="rewind">button>
      <button class="fwd" data-icon="F" aria-label="fast forward">button>
    div>
  div>
  

  59. flex), để làm cho mọi thứ dễ dàng hơn

Tiếp theo, hãy xem các biểu tượng nút của chúng tôi

window.myVideo = hypeDocument.getElementById('ch4dance');
	myVideo.addEventListener('timeupdate', syncTimelines);
	myVideo.play();
	function syncTimelines() {
		videoTime = myVideo.currentTime;
		hypeDocument.goToTimeInTimelineNamed(videoTime, 'Main Timeline');
		
		if (!myVideo.paused) {
	    hypeDocument.continueTimelineNamed('Main Timeline');
		}
		else if (myVideo.paused) {
		hypeDocument.pauseTimelineNamed('Main Timeline');    
		}		
	}

Trước hết, ở đầu CSS, chúng tôi sử dụng khối

<div class="player">
  <video controls>
    <source src="video/sintel-short.mp4" type="video/mp4" />
    <source src="video/sintel-short.webm" type="video/webm" />
    
  video>
  <div class="controls">
    <button class="play" data-icon="P" aria-label="play pause toggle">button>
    <button class="stop" data-icon="S" aria-label="stop">button>
    <div class="timer">
      <div>div>
      <span aria-label="timer">00:00span>
    div>
    <button class="rwd" data-icon="B" aria-label="rewind">button>
    <button class="fwd" data-icon="F" aria-label="fast forward">button>
  div>
div>

Tiếp theo, chúng tôi sử dụng nội dung được tạo để hiển thị một biểu tượng trên mỗi nút

• Chúng tôi sử dụng bộ chọn

  <div class="player">
    <video controls>
      <source src="video/sintel-short.mp4" type="video/mp4" />
      <source src="video/sintel-short.webm" type="video/webm" />
      
    video>
    <div class="controls">
      <button class="play" data-icon="P" aria-label="play pause toggle">button>
      <button class="stop" data-icon="S" aria-label="stop">button>
      <div class="timer">
        <div>div>
        <span aria-label="timer">00:00span>
      div>
      <button class="rwd" data-icon="B" aria-label="rewind">button>
      <button class="fwd" data-icon="F" aria-label="fast forward">button>
    div>
  div>
  

  71 để hiển thị nội dung trước mỗi phần tử

  window.myVideo = hypeDocument.getElementById('ch4dance');
  	myVideo.addEventListener('timeupdate', syncTimelines);
  	myVideo.play();
  	function syncTimelines() {
  		videoTime = myVideo.currentTime;
  		hypeDocument.goToTimeInTimelineNamed(videoTime, 'Main Timeline');
  		
  		if (!myVideo.paused) {
  	    hypeDocument.continueTimelineNamed('Main Timeline');
  		}
  		else if (myVideo.paused) {
  		hypeDocument.pauseTimelineNamed('Main Timeline');    
  		}		
  	}

  53
• Chúng ta sử dụng thuộc tính

  <div class="player">
    <video controls>
      <source src="video/sintel-short.mp4" type="video/mp4" />
      <source src="video/sintel-short.webm" type="video/webm" />
      
    video>
    <div class="controls">
      <button class="play" data-icon="P" aria-label="play pause toggle">button>
      <button class="stop" data-icon="S" aria-label="stop">button>
      <div class="timer">
        <div>div>
        <span aria-label="timer">00:00span>
      div>
      <button class="rwd" data-icon="B" aria-label="rewind">button>
      <button class="fwd" data-icon="F" aria-label="fast forward">button>
    div>
  div>
  

  73 để thiết lập nội dung hiển thị trong từng trường hợp bằng với nội dung của thuộc tính

  window.myVideo = hypeDocument.getElementById('ch4dance');
  	myVideo.addEventListener('timeupdate', syncTimelines);
  	myVideo.play();
  	function syncTimelines() {
  		videoTime = myVideo.currentTime;
  		hypeDocument.goToTimeInTimelineNamed(videoTime, 'Main Timeline');
  		
  		if (!myVideo.paused) {
  	    hypeDocument.continueTimelineNamed('Main Timeline');
  		}
  		else if (myVideo.paused) {
  		hypeDocument.pauseTimelineNamed('Main Timeline');    
  		}		
  	}

  56. Trong trường hợp nút phát của chúng tôi,

  window.myVideo = hypeDocument.getElementById('ch4dance');
  	myVideo.addEventListener('timeupdate', syncTimelines);
  	myVideo.play();
  	function syncTimelines() {
  		videoTime = myVideo.currentTime;
  		hypeDocument.goToTimeInTimelineNamed(videoTime, 'Main Timeline');
  		
  		if (!myVideo.paused) {
  	    hypeDocument.continueTimelineNamed('Main Timeline');
  		}
  		else if (myVideo.paused) {
  		hypeDocument.pauseTimelineNamed('Main Timeline');    
  		}		
  	}

  56 chứa chữ "P" viết hoa
• Chúng tôi áp dụng phông chữ web tùy chỉnh cho các nút của mình bằng cách sử dụng

  <div class="player">
    <video controls>
      <source src="video/sintel-short.mp4" type="video/mp4" />
      <source src="video/sintel-short.webm" type="video/webm" />
      
    video>
    <div class="controls">
      <button class="play" data-icon="P" aria-label="play pause toggle">button>
      <button class="stop" data-icon="S" aria-label="stop">button>
      <div class="timer">
        <div>div>
        <span aria-label="timer">00:00span>
      div>
      <button class="rwd" data-icon="B" aria-label="rewind">button>
      <button class="fwd" data-icon="F" aria-label="fast forward">button>
    div>
  div>
  

  76. Trong phông chữ này, "P" thực sự là biểu tượng "phát", do đó, nút phát có biểu tượng "phát" được hiển thị trên đó

Phông chữ biểu tượng rất thú vị vì nhiều lý do — cắt giảm các yêu cầu HTTP vì bạn không cần tải xuống các biểu tượng đó dưới dạng tệp hình ảnh, khả năng mở rộng tuyệt vời và thực tế là bạn có thể sử dụng các thuộc tính văn bản để tạo kiểu cho chúng — như

<div class="player">
  <video controls>
    <source src="video/sintel-short.mp4" type="video/mp4" />
    <source src="video/sintel-short.webm" type="video/webm" />
    
  video>
  <div class="controls">
    <button class="play" data-icon="P" aria-label="play pause toggle">button>
    <button class="stop" data-icon="S" aria-label="stop">button>
    <div class="timer">
      <div>div>
      <span aria-label="timer">00:00span>
    div>
    <button class="rwd" data-icon="B" aria-label="rewind">button>
    <button class="fwd" data-icon="F" aria-label="fast forward">button>
  div>
div>

<div class="player">
  <video controls>
    <source src="video/sintel-short.mp4" type="video/mp4" />
    <source src="video/sintel-short.webm" type="video/webm" />
    
  video>
  <div class="controls">
    <button class="play" data-icon="P" aria-label="play pause toggle">button>
    <button class="stop" data-icon="S" aria-label="stop">button>
    <div class="timer">
      <div>div>
      <span aria-label="timer">00:00span>
    div>
    <button class="rwd" data-icon="B" aria-label="rewind">button>
    <button class="fwd" data-icon="F" aria-label="fast forward">button>
  div>
div>

Cuối cùng nhưng không kém phần quan trọng, hãy xem CSS cho bộ đếm thời gian

<div class="player">
  <video controls>
    <source src="video/sintel-short.mp4" type="video/mp4" />
    <source src="video/sintel-short.webm" type="video/webm" />
    
  video>
  <div class="controls">
    <button class="play" data-icon="P" aria-label="play pause toggle">button>
    <button class="stop" data-icon="S" aria-label="stop">button>
    <div class="timer">
      <div>div>
      <span aria-label="timer">00:00span>
    div>
    <button class="rwd" data-icon="B" aria-label="rewind">button>
    <button class="fwd" data-icon="F" aria-label="fast forward">button>
  div>
div>

• Chúng tôi đặt phần tử

  <div class="player">
    <video controls>
      <source src="video/sintel-short.mp4" type="video/mp4" />
      <source src="video/sintel-short.webm" type="video/webm" />
      
    video>
    <div class="controls">
      <button class="play" data-icon="P" aria-label="play pause toggle">button>
      <button class="stop" data-icon="S" aria-label="stop">button>
      <div class="timer">
        <div>div>
        <span aria-label="timer">00:00span>
      div>
      <button class="rwd" data-icon="B" aria-label="rewind">button>
      <button class="fwd" data-icon="F" aria-label="fast forward">button>
    div>
  div>
  

  79 bên ngoài có

  <div class="player">
    <video controls>
      <source src="video/sintel-short.mp4" type="video/mp4" />
      <source src="video/sintel-short.webm" type="video/webm" />
      
    video>
    <div class="controls">
      <button class="play" data-icon="P" aria-label="play pause toggle">button>
      <button class="stop" data-icon="S" aria-label="stop">button>
      <div class="timer">
        <div>div>
        <span aria-label="timer">00:00span>
      div>
      <button class="rwd" data-icon="B" aria-label="rewind">button>
      <button class="fwd" data-icon="F" aria-label="fast forward">button>
    div>
  div>
  

  80, vì vậy phần tử này chiếm phần lớn chiều rộng của thanh điều khiển. Chúng tôi cũng cung cấp cho nó

  <div class="player">
    <video controls>
      <source src="video/sintel-short.mp4" type="video/mp4" />
      <source src="video/sintel-short.webm" type="video/webm" />
      
    video>
    <div class="controls">
      <button class="play" data-icon="P" aria-label="play pause toggle">button>
      <button class="stop" data-icon="S" aria-label="stop">button>
      <div class="timer">
        <div>div>
        <span aria-label="timer">00:00span>
      div>
      <button class="rwd" data-icon="B" aria-label="rewind">button>
      <button class="fwd" data-icon="F" aria-label="fast forward">button>
    div>
  div>
  

  81

  <div class="player">
    <video controls>
      <source src="video/sintel-short.mp4" type="video/mp4" />
      <source src="video/sintel-short.webm" type="video/webm" />
      
    video>
    <div class="controls">
      <button class="play" data-icon="P" aria-label="play pause toggle">button>
      <button class="stop" data-icon="S" aria-label="stop">button>
      <div class="timer">
        <div>div>
        <span aria-label="timer">00:00span>
      div>
      <button class="rwd" data-icon="B" aria-label="rewind">button>
      <button class="fwd" data-icon="F" aria-label="fast forward">button>
    div>
  div>
  

  82, để chúng tôi có thể định vị các phần tử bên trong nó một cách thuận tiện theo ranh giới của nó chứ không phải ranh giới của phần tử

  <div class="player">
    <video controls>
      <source src="video/sintel-short.mp4" type="video/mp4" />
      <source src="video/sintel-short.webm" type="video/webm" />
      
    video>
    <div class="controls">
      <button class="play" data-icon="P" aria-label="play pause toggle">button>
      <button class="stop" data-icon="S" aria-label="stop">button>
      <div class="timer">
        <div>div>
        <span aria-label="timer">00:00span>
      div>
      <button class="rwd" data-icon="B" aria-label="rewind">button>
      <button class="fwd" data-icon="F" aria-label="fast forward">button>
    div>
  div>
  

  83

• window.myVideo = hypeDocument.getElementById('ch4dance');
  	myVideo.addEventListener('timeupdate', syncTimelines);
  	myVideo.play();
  	function syncTimelines() {
  		videoTime = myVideo.currentTime;
  		hypeDocument.goToTimeInTimelineNamed(videoTime, 'Main Timeline');
  		
  		if (!myVideo.paused) {
  	    hypeDocument.continueTimelineNamed('Main Timeline');
  		}
  		else if (myVideo.paused) {
  		hypeDocument.pauseTimelineNamed('Main Timeline');    
  		}		
  	}

  50 bên trong được định vị hoàn toàn để ngồi ngay trên đầu

  window.myVideo = hypeDocument.getElementById('ch4dance');
  	myVideo.addEventListener('timeupdate', syncTimelines);
  	myVideo.play();
  	function syncTimelines() {
  		videoTime = myVideo.currentTime;
  		hypeDocument.goToTimeInTimelineNamed(videoTime, 'Main Timeline');
  		
  		if (!myVideo.paused) {
  	    hypeDocument.continueTimelineNamed('Main Timeline');
  		}
  		else if (myVideo.paused) {
  		hypeDocument.pauseTimelineNamed('Main Timeline');    
  		}		
  	}

  50 bên ngoài. Nó cũng có chiều rộng ban đầu là 0, vì vậy bạn hoàn toàn không thể nhìn thấy nó. Khi video phát, chiều rộng sẽ được tăng lên thông qua JavaScript khi video trôi qua

• <div class="player">
    <video controls>
      <source src="video/sintel-short.mp4" type="video/mp4" />
      <source src="video/sintel-short.webm" type="video/webm" />
      
    video>
    <div class="controls">
      <button class="play" data-icon="P" aria-label="play pause toggle">button>
      <button class="stop" data-icon="S" aria-label="stop">button>
      <div class="timer">
        <div>div>
        <span aria-label="timer">00:00span>
      div>
      <button class="rwd" data-icon="B" aria-label="rewind">button>
      <button class="fwd" data-icon="F" aria-label="fast forward">button>
    div>
  div>
  

  50 cũng được định vị tuyệt đối để ngồi gần phía bên trái của thanh hẹn giờ
• Chúng tôi cũng cung cấp cho

  window.myVideo = hypeDocument.getElementById('ch4dance');
  	myVideo.addEventListener('timeupdate', syncTimelines);
  	myVideo.play();
  	function syncTimelines() {
  		videoTime = myVideo.currentTime;
  		hypeDocument.goToTimeInTimelineNamed(videoTime, 'Main Timeline');
  		
  		if (!myVideo.paused) {
  	    hypeDocument.continueTimelineNamed('Main Timeline');
  		}
  		else if (myVideo.paused) {
  		hypeDocument.pauseTimelineNamed('Main Timeline');    
  		}		
  	}

  50 và

  <div class="player">
    <video controls>
      <source src="video/sintel-short.mp4" type="video/mp4" />
      <source src="video/sintel-short.webm" type="video/webm" />
      
    video>
    <div class="controls">
      <button class="play" data-icon="P" aria-label="play pause toggle">button>
      <button class="stop" data-icon="S" aria-label="stop">button>
      <div class="timer">
        <div>div>
        <span aria-label="timer">00:00span>
      div>
      <button class="rwd" data-icon="B" aria-label="rewind">button>
      <button class="fwd" data-icon="F" aria-label="fast forward">button>
    div>
  div>
  

  50 bên trong của mình số lượng phù hợp là

  <div class="player">
    <video controls>
      <source src="video/sintel-short.mp4" type="video/mp4" />
      <source src="video/sintel-short.webm" type="video/webm" />
      
    video>
    <div class="controls">
      <button class="play" data-icon="P" aria-label="play pause toggle">button>
      <button class="stop" data-icon="S" aria-label="stop">button>
      <div class="timer">
        <div>div>
        <span aria-label="timer">00:00span>
      div>
      <button class="rwd" data-icon="B" aria-label="rewind">button>
      <button class="fwd" data-icon="F" aria-label="fast forward">button>
    div>
  div>
  

  89 để đồng hồ bấm giờ sẽ được hiển thị ở trên cùng và

  window.myVideo = hypeDocument.getElementById('ch4dance');
  	myVideo.addEventListener('timeupdate', syncTimelines);
  	myVideo.play();
  	function syncTimelines() {
  		videoTime = myVideo.currentTime;
  		hypeDocument.goToTimeInTimelineNamed(videoTime, 'Main Timeline');
  		
  		if (!myVideo.paused) {
  	    hypeDocument.continueTimelineNamed('Main Timeline');
  		}
  		else if (myVideo.paused) {
  		hypeDocument.pauseTimelineNamed('Main Timeline');    
  		}		
  	}

  50 bên trong bên dưới. Bằng cách này, chúng tôi đảm bảo rằng chúng tôi có thể xem tất cả thông tin — một hộp không che khuất một hộp khác

Chúng ta đã có giao diện HTML và CSS khá hoàn chỉnh rồi;

1. Tạo một tệp JavaScript mới trong cùng cấp thư mục với chỉ mục của bạn. tệp html. Gọi nó là

   <div class="player">
     <video controls>
       <source src="video/sintel-short.mp4" type="video/mp4" />
       <source src="video/sintel-short.webm" type="video/webm" />
       
     video>
     <div class="controls">
       <button class="play" data-icon="P" aria-label="play pause toggle">button>
       <button class="stop" data-icon="S" aria-label="stop">button>
       <div class="timer">
         <div>div>
         <span aria-label="timer">00:00span>
       div>
       <button class="rwd" data-icon="B" aria-label="rewind">button>
       <button class="fwd" data-icon="F" aria-label="fast forward">button>
     div>
   div>
   

   91
2. Ở đầu tệp này, hãy chèn đoạn mã sau

   <div class="player">
     <video controls>
       <source src="video/sintel-short.mp4" type="video/mp4" />
       <source src="video/sintel-short.webm" type="video/webm" />
       
     video>
     <div class="controls">
       <button class="play" data-icon="P" aria-label="play pause toggle">button>
       <button class="stop" data-icon="S" aria-label="stop">button>
       <div class="timer">
         <div>div>
         <span aria-label="timer">00:00span>
       div>
       <button class="rwd" data-icon="B" aria-label="rewind">button>
       <button class="fwd" data-icon="F" aria-label="fast forward">button>
     div>
   div>
   

   7
   Ở đây chúng tôi đang tạo các hằng số để giữ các tham chiếu đến tất cả các đối tượng mà chúng tôi muốn thao tác. Chúng tôi có ba nhóm
   • Phần tử

     <div class="player">
       <video controls>
         <source src="video/sintel-short.mp4" type="video/mp4" />
         <source src="video/sintel-short.webm" type="video/webm" />
         
       video>
       <div class="controls">
         <button class="play" data-icon="P" aria-label="play pause toggle">button>
         <button class="stop" data-icon="S" aria-label="stop">button>
         <div class="timer">
           <div>div>
           <span aria-label="timer">00:00span>
         div>
         <button class="rwd" data-icon="B" aria-label="rewind">button>
         <button class="fwd" data-icon="F" aria-label="fast forward">button>
       div>
     div>
     

     8 và thanh điều khiển
   • Các nút phát/tạm dừng, dừng, tua lại và tua nhanh
   • Lớp bọc hẹn giờ bên ngoài

     window.myVideo = hypeDocument.getElementById('ch4dance');
     	myVideo.addEventListener('timeupdate', syncTimelines);
     	myVideo.play();
     	function syncTimelines() {
     		videoTime = myVideo.currentTime;
     		hypeDocument.goToTimeInTimelineNamed(videoTime, 'Main Timeline');
     		
     		if (!myVideo.paused) {
     	    hypeDocument.continueTimelineNamed('Main Timeline');
     		}
     		else if (myVideo.paused) {
     		hypeDocument.pauseTimelineNamed('Main Timeline');    
     		}		
     	}

     50, màn hình đọc hẹn giờ kỹ thuật số

     <div class="player">
       <video controls>
         <source src="video/sintel-short.mp4" type="video/mp4" />
         <source src="video/sintel-short.webm" type="video/webm" />
         
       video>
       <div class="controls">
         <button class="play" data-icon="P" aria-label="play pause toggle">button>
         <button class="stop" data-icon="S" aria-label="stop">button>
         <div class="timer">
           <div>div>
           <span aria-label="timer">00:00span>
         div>
         <button class="rwd" data-icon="B" aria-label="rewind">button>
         <button class="fwd" data-icon="F" aria-label="fast forward">button>
       div>
     div>
     

     50 và bên trong

     window.myVideo = hypeDocument.getElementById('ch4dance');
     	myVideo.addEventListener('timeupdate', syncTimelines);
     	myVideo.play();
     	function syncTimelines() {
     		videoTime = myVideo.currentTime;
     		hypeDocument.goToTimeInTimelineNamed(videoTime, 'Main Timeline');
     		
     		if (!myVideo.paused) {
     	    hypeDocument.continueTimelineNamed('Main Timeline');
     		}
     		else if (myVideo.paused) {
     		hypeDocument.pauseTimelineNamed('Main Timeline');    
     		}		
     	}

     50 sẽ rộng hơn khi thời gian trôi qua
3. Tiếp theo, chèn đoạn mã sau vào cuối mã của bạn

   <div class="player">
     <video controls>
       <source src="video/sintel-short.mp4" type="video/mp4" />
       <source src="video/sintel-short.webm" type="video/webm" />
       
     video>
     <div class="controls">
       <button class="play" data-icon="P" aria-label="play pause toggle">button>
       <button class="stop" data-icon="S" aria-label="stop">button>
       <div class="timer">
         <div>div>
         <span aria-label="timer">00:00span>
       div>
       <button class="rwd" data-icon="B" aria-label="rewind">button>
       <button class="fwd" data-icon="F" aria-label="fast forward">button>
     div>
   div>
   

   8
   Hai dòng này xóa các điều khiển trình duyệt mặc định khỏi video và hiển thị các điều khiển tùy chỉnh

Phát và tạm dừng video

Hãy triển khai điều khiển có lẽ là quan trọng nhất — nút phát/tạm dừng

1. Trước hết, hãy thêm đoạn mã sau vào cuối mã của bạn để hàm

   <div class="player">
     <video controls>
       <source src="video/sintel-short.mp4" type="video/mp4" />
       <source src="video/sintel-short.webm" type="video/webm" />
       
     video>
     <div class="controls">
       <button class="play" data-icon="P" aria-label="play pause toggle">button>
       <button class="stop" data-icon="S" aria-label="stop">button>
       <div class="timer">
         <div>div>
         <span aria-label="timer">00:00span>
       div>
       <button class="rwd" data-icon="B" aria-label="rewind">button>
       <button class="fwd" data-icon="F" aria-label="fast forward">button>
     div>
   div>
   

   96 được gọi khi nhấp vào nút phát

   <div class="player">
     <video controls>
       <source src="video/sintel-short.mp4" type="video/mp4" />
       <source src="video/sintel-short.webm" type="video/webm" />
       
     video>
     <div class="controls">
       <button class="play" data-icon="P" aria-label="play pause toggle">button>
       <button class="stop" data-icon="S" aria-label="stop">button>
       <div class="timer">
         <div>div>
         <span aria-label="timer">00:00span>
       div>
       <button class="rwd" data-icon="B" aria-label="rewind">button>
       <button class="fwd" data-icon="F" aria-label="fast forward">button>
     div>
   div>
   

   9

2. Bây giờ để xác định

   <div class="player">
     <video controls>
       <source src="video/sintel-short.mp4" type="video/mp4" />
       <source src="video/sintel-short.webm" type="video/webm" />
       
     video>
     <div class="controls">
       <button class="play" data-icon="P" aria-label="play pause toggle">button>
       <button class="stop" data-icon="S" aria-label="stop">button>
       <div class="timer">
         <div>div>
         <span aria-label="timer">00:00span>
       div>
       <button class="rwd" data-icon="B" aria-label="rewind">button>
       <button class="fwd" data-icon="F" aria-label="fast forward">button>
     div>
   div>
   

   96 - thêm phần sau, một lần nữa vào cuối mã của bạn

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

   9
   Ở đây chúng tôi sử dụng câu lệnh

   <div class="player">
     <video controls>
       <source src="video/sintel-short.mp4" type="video/mp4" />
       <source src="video/sintel-short.webm" type="video/webm" />
       
     video>
     <div class="controls">
       <button class="play" data-icon="P" aria-label="play pause toggle">button>
       <button class="stop" data-icon="S" aria-label="stop">button>
       <div class="timer">
         <div>div>
         <span aria-label="timer">00:00span>
       div>
       <button class="rwd" data-icon="B" aria-label="rewind">button>
       <button class="fwd" data-icon="F" aria-label="fast forward">button>
     div>
   div>
   

   98 để kiểm tra xem video có bị tạm dừng hay không. Thuộc tính

   <div class="player">
     <video controls>
       <source src="video/sintel-short.mp4" type="video/mp4" />
       <source src="video/sintel-short.webm" type="video/webm" />
       
     video>
     <div class="controls">
       <button class="play" data-icon="P" aria-label="play pause toggle">button>
       <button class="stop" data-icon="S" aria-label="stop">button>
       <div class="timer">
         <div>div>
         <span aria-label="timer">00:00span>
       div>
       <button class="rwd" data-icon="B" aria-label="rewind">button>
       <button class="fwd" data-icon="F" aria-label="fast forward">button>
     div>
   div>
   

   99 trả về true nếu phương tiện bị tạm dừng, tức là bất kỳ lúc nào video không phát, kể cả khi video được đặt ở thời lượng 0 sau lần tải đầu tiên. Nếu nó bị tạm dừng, chúng tôi đặt giá trị thuộc tính

   window.myVideo = hypeDocument.getElementById('ch4dance');
   	myVideo.addEventListener('timeupdate', syncTimelines);
   	myVideo.play();
   	function syncTimelines() {
   		videoTime = myVideo.currentTime;
   		hypeDocument.goToTimeInTimelineNamed(videoTime, 'Main Timeline');
   		
   		if (!myVideo.paused) {
   	    hypeDocument.continueTimelineNamed('Main Timeline');
   		}
   		else if (myVideo.paused) {
   		hypeDocument.pauseTimelineNamed('Main Timeline');    
   		}		
   	}

   56 trên nút phát thành "u", là biểu tượng "bị tạm dừng" và gọi phương thức

   .controls {
     visibility: hidden;
     opacity: 0.5;
     width: 400px;
     border-radius: 10px;
     position: absolute;
     bottom: 20px;
     left: 50%;
     margin-left: -200px;
     background-color: black;
     box-shadow: 3px 3px 5px black;
     transition: 1s all;
     display: flex;
   }
   
   .player:hover .controls,
   .player:focus-within .controls {
     opacity: 1;
   }
   

   5 để phát phương tiện. Ở lần nhấp thứ hai, nút này sẽ được bật lại — biểu tượng "phát" sẽ hiển thị lại và video sẽ bị tạm dừng với

   .controls {
     visibility: hidden;
     opacity: 0.5;
     width: 400px;
     border-radius: 10px;
     position: absolute;
     bottom: 20px;
     left: 50%;
     margin-left: -200px;
     background-color: black;
     box-shadow: 3px 3px 5px black;
     transition: 1s all;
     display: flex;
   }
   
   .player:hover .controls,
   .player:focus-within .controls {
     opacity: 1;
   }
   

   6