programming javascript

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

Xin chào, cảm ơn vì một sản phẩm tuyệt vời như vậy. Tôi đang cố gắng thêm CSS để ẩn thanh tiến trình video và điều khiển âm thanh trên video trang chủ của tôi. Tuy nhiên nó không hoạt động. Tôi đang chèn mã này vào Cài đặt > Cài đặt bổ sung nhưng nó không hoạt động, vui lòng trợ giúp về âm thanh. -webkit-media-controls-dòng thời gian, video. -webkit-media-controls-timeline { hiển thị. không ai; . -webkit-media-điều khiển, video. -webkit-media-controls { hiển thị. không ai;

Tôi có một phần tử video html được áp dụng làm mã trong trường văn bản, tôi đã bỏ qua thuộc tính 'điều khiển'

Tôi cũng đã thêm một tập lệnh jquery trong bảng js toàn cầu của X-Theme Pro, để hiển thị và ẩn các điều khiển khi di chuột

$[tài liệu]. sẵn sàng [chức năng [] {

$[’#video-one’]. hover[function toggleControls[] {
if [this. hasAttribute[“controls”]] {
this. removeAttribute[“controls”]
} other {
this. setAttribute[“controls”, “controls”]
}
}]

}];

Tuy nhiên, tính năng này không hoạt động trên trang web.
Đây có phải là nơi chính xác để đặt mã js không?

Có cách nào để tôi có thể thêm mã js vào tệp js không?

Xin chào. Vâng, tôi đã tìm thấy câu hỏi này trên Google, nhưng tôi không hiểu mã nào là câu trả lời cũng như cách nó ảnh hưởng đến javascript mà tôi đang sử dụng. Tôi có thể thêm một vài dòng vào javascript mà tôi đang sử dụng để ẩn điều khiển không?

Dưới đây là javascript tôi đang sử dụng

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'];    
		}		
	}

HTML đi kèm với các yếu tố để nhúng đa phương tiện vào tài liệu —

8 và

9 — lần lượt đi kèm với các API riêng để kiểm soát phát lại, tìm kiếm, v.v. Bài viết này hướng dẫn bạn cách thực hiện các tác vụ phổ biến, chẳng hạn như tạo các điều khiển phát lại tùy chỉnh

điều kiện tiên quyết. Kiến thức cơ bản về JavaScript [xem các bước đầu tiên, khối xây dựng, đối tượng JavaScript], kiến thức cơ bản về Client-side APIsObjective. Để tìm hiểu cách sử dụng API trình duyệt để kiểm soát phát lại video và âm thanh

Các phần tử

8 và

9 cho phép chúng tôi nhúng video và âm thanh vào các trang web. Như chúng tôi đã trình bày trong Nội dung video và âm thanh, cách triển khai điển hình trông như thế này


  
  
  
    Your browser doesn't support HTML video. Here is a
    link to the video instead.

Đ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;
}

2] và lập trình của riêng bạn bằng HTML, CSS và JavaScript. Trong phần tiếp theo, chúng ta sẽ xem xét các công cụ cơ bản có sẵn để thực hiện việc này

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;
}

4 cung cấp các tính năng cho phép bạn điều khiển trình phát video và âm thanh theo chương trình — ví dụ:

.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;
}

6, v.v. Giao diện này có sẵn cho cả phần tử

9 và

8, vì các tính năng bạn muốn triển khai gần như giống hệt nhau. Hãy xem qua một ví dụ, thêm các tính năng khi chúng tôi thực hiện

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;

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ử

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

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

.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

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

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

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ử

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
```
  
    
    
    
  
  
    
    
    
      
      00:00
    
    
    
  
```
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 [

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

70 để nhập phông chữ web tùy chỉnh. Đây là phông chữ biểu tượng — tất cả các ký tự trong bảng chữ cái tương đương với các biểu tượng phổ biến mà bạn có thể muốn sử dụng trong một ứng dụng

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

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'];    
		}		
	}

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

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
```
  
    
    
    
  
  
    
    
    
      
      00:00
    
    
    
  
```
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ư

77 và

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

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

79 bên ngoài có

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ó

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ử

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

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à

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

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;

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à

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

Ở đâ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ử

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ố

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

Tiếp theo, chèn đoạn mã sau vào cuối mã của bạn
```
  
    
    
    
  
  
    
    
    
      
      00:00
    
    
    
  
```
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

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

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

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

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


  
  
  
    Your browser doesn't support HTML video. Here is a
    link to the video instead.

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

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

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;
}

Dừng video

Tiếp theo, hãy thêm chức năng để xử lý dừng video. Thêm các dòng


  
  
  
    Your browser doesn't support HTML video. Here is a
    link to the video instead.

93 sau bên dưới dòng trước đó bạn đã thêm

.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;
}

Sự kiện


  
  
  
    Your browser doesn't support HTML video. Here is a
    link to the video instead.

94 là hiển nhiên — chúng tôi muốn dừng video bằng cách chạy chức năng


  
  
  
    Your browser doesn't support HTML video. Here is a
    link to the video instead.

95 khi nhấp vào nút dừng. Tuy nhiên, chúng tôi cũng muốn dừng video khi phát xong - điều này được đánh dấu bằng sự kiện


  
  
  
    Your browser doesn't support HTML video. Here is a
    link to the video instead.

96 kích hoạt, vì vậy chúng tôi cũng thiết lập một trình nghe để chạy chức năng trên sự kiện đó kích hoạt quá

Tiếp theo, hãy xác định


  
  
  
    Your browser doesn't support HTML video. Here is a
    link to the video instead.

95 — thêm hàm sau vào bên dưới

không có phương thức


  
  
  
    Your browser doesn't support HTML video. Here is a
    link to the video instead.

99 trên API HTMLMediaElement — tương đươ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;
}

60 video và đặt 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;
}

61 của nó thành 0. Đặt

.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;
}

61 thành một giá trị [tính bằng giây] ngay lập tức chuyển phương tiện đến vị trí đó. Tất cả những gì còn lại phải làm sau đó là đặt biểu tượng được hiển thị thành biểu tượng "phát". Bất kể video bị tạm dừng hay đang phát khi nhấn nút dừng, bạn muốn video sẵn sàng phát sau đó

Tìm đi tìm lại

Có nhiều cách để bạn có thể triển khai chức năng tua lại và tua đi nhanh;

Trước hết, thêm hai dòng


  
  
  
    Your browser doesn't support HTML video. Here is a
    link to the video instead.

93 sau vào bên dưới những dòng trước đó

Bây giờ, với các chức năng xử lý sự kiện - hãy thêm đoạn mã sau vào bên dưới các chức năng trước đó của bạn để xác đị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;
}

64 và

.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;
}

Bạn sẽ nhận thấy rằng trước tiên, chúng tôi khởi tạo hai biến —

.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;
}

66 và

.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;
}

67 — sau này bạn sẽ biết chúng dùng để làm gì. Hãy bước qua

.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;
}

64 [chức năng của

.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;
}

65 hoàn toàn giống nhau, nhưng ngược lại]

Chúng tôi xóa bất kỳ lớp và khoảng nào được đặt trên chức năng tua đi nhanh — chúng tôi làm điều này bởi vì nếu chúng tôi nhấn nút
```
  
    
    
    
  
  
    
    
    
      
      00:00
    
    
    
  
```
00 sau khi nhấn nút
```
  
    
    
    
  
  
    
    
    
      
      00:00
    
    
    
  
```
01, chúng tôi muốn hủy mọi chức năng tua đi nhanh và thay thế bằng chức năng tua lại. Nếu chúng tôi cố gắng làm cả hai cùng một lúc, người chơi sẽ phá vỡ

Chúng tôi sử dụng câu lệnh

98 để kiểm tra xem lớp

03 đã được đặt trên nút

00 chưa, cho biết rằng nó đã được nhấn.

05 là một thuộc tính khá tiện dụng tồn tại trên mọi phần tử — nó chứa danh sách tất cả các lớp được đặt trên phần tử, cũng như các phương thức để thêm/xóa lớp, v.v. Chúng ta sử dụng phương thức

06 để kiểm tra xem danh sách có chứa lớp

03 hay không. Điều này trả về kết quả boolean

08/_______209

Nếu

03 đã được đặt trên nút

00, chúng tôi sẽ xóa nó bằng cách sử dụng

12, xóa khoảng thời gian đã được đặt khi nhấn nút lần đầu tiên [xem phần giải thích bên dưới] và sử dụng

.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 để hủy tua lại và bắt đầu phát video bình thường

Nếu nó chưa được đặt, chúng tôi thêm lớp

03 vào nút

00 bằng cách sử dụng

16, tạm dừng video bằng cách sử dụng

.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, sau đó đặt biến

.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;
}

67 bằng một cuộc gọi

19. Khi được gọi,

19 sẽ tạo một khoảng thời gian hoạt động, nghĩa là nó chạy hàm được cung cấp dưới dạng tham số đầu tiên sau mỗi x mili giây, trong đó x là giá trị của tham số thứ 2. Vì vậy, ở đây chúng tôi đang chạy chức năng

21 cứ sau 200 mili giây - chúng tôi sẽ sử dụng chức năng này để tua ngược video liên tục. Để dừng một

19 đang chạy, bạn phải gọi

23, đặt cho nó tên xác định của khoảng cần xóa, trong trường hợp này là tên biến

.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;
}

67 [xem lệnh gọi

23 trước đó trong hàm]

Cuối cùng, chúng ta cần xác định các hàm

21 và

27 được gọi trong các lệnh gọi

19. Thêm phần sau vào bên dưới hai chức năng trước đó của bạn

Một lần nữa, chúng ta sẽ chạy qua chức năng đầu tiên trong số các chức năng này vì chúng hoạt động gần như giống hệt nhau, nhưng ngược lại với nhau. Trong

21, chúng tôi thực hiện như sau — lưu ý rằng khi khoảng thời gian đang hoạt động, chức năng này sẽ được chạy sau mỗi 200 mili giây

Chúng tôi bắt đầu với một câu lệnh

98 để kiểm tra xem liệu thời gian hiện tại có ít hơn 3 giây hay không, tôi. e. , nếu tua lại thêm ba giây nữa thì video đó sẽ quay lại phần đầu của video. Điều này sẽ gây ra hành vi lạ, vì vậy nếu đây là trường hợp chúng tôi dừng phát video bằng cách gọi


  
  
  
    Your browser doesn't support HTML video. Here is a
    link to the video instead.

95, xóa lớp

03 khỏi nút tua lại và xóa khoảng thời gian

.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;
}

67 để dừng chức năng tua lại. Nếu chúng ta không thực hiện bước cuối cùng này, video sẽ cứ tua đi tua lại mãi mãi

Nếu thời gian hiện tại không nằm trong vòng 3 giây kể từ khi bắt đầu video, thì chúng tôi sẽ xóa ba giây khỏi thời gian hiện tại bằng cách thực hiện
```
  
    
    
    
  
  
    
    
    
      
      00:00
    
    
    
  
```
34. Vì vậy, trên thực tế, chúng tôi đang tua lại video 3 giây, cứ sau 200 mili giây một lần

Cập nhật thời gian đã trôi qua

Phần cuối cùng của trình phát đa phương tiện của chúng tôi để triển khai là các màn hình đã trôi qua theo thời gian. Để làm điều này, chúng tôi sẽ chạy một chức năng để cập nhật thời gian hiển thị mỗi khi sự kiện

35 được kích hoạt trên phần tử

8. Tần suất mà sự kiện này kích hoạt tùy thuộc vào trình duyệt của bạn, sức mạnh của CPU, v.v. [xem bài đăng StackOverflow này]

Thêm dòng


  
  
  
    Your browser doesn't support HTML video. Here is a
    link to the video instead.

93 sau ngay bên dưới những dòng khác

Bây giờ để xác định hàm

38. Thêm phần sau vào cuối tệp của bạn

Đây là một chức năng khá dài, vì vậy hãy thực hiện từng bước

Trước hết, chúng tôi tìm ra số phút và giây trong giá trị

Sau đó, chúng tôi khởi tạo thêm hai biến -

40 và

41. Chúng tôi sử dụng

42 để làm cho mỗi giá trị dài 2 ký tự, ngay cả khi giá trị số chỉ là một chữ số

Giá trị thời gian thực tế để hiển thị được đặt thành ________ 240 cộng với ký tự dấu hai chấm cộng với ________ 241
Giá trị
```
  
    
    
    
  
  
    
    
    
      
      00:00
    
    
    
  
```
45 của bộ hẹn giờ được đặt thành giá trị thời gian, vì vậy giá trị này sẽ hiển thị trong giao diện người dùng

Độ dài chúng ta nê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 bên trong được tính bằng cách trước tiên tính chiều rộng của

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 [thuộc tính

48 của bất kỳ phần tử nào sẽ chứa chiều dài của nó], sau đó nhân nó với

39 chia cho tổng số

50 của phương tiện

Chúng tôi đặt chiều rộng của

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ằng với chiều dài thanh được tính toán, cộng với "px", do đó, nó sẽ được đặt thành số pixel đó

Sửa phát và tạm dừng

Còn một vấn đề cần khắc phục. Nếu nhấn các nút phát/tạm dừng hoặc dừng trong khi chức năng tua lại hoặc tua nhanh đang hoạt động, chúng sẽ không hoạt động. Chúng tôi có thể khắc phục bằng cách nào để họ hủy chức năng của nút ________ 200/________ 201 và phát/dừng video như bạn mong đợi?

Trước hết, hãy thêm các dòng sau vào hàm


  
  
  
    Your browser doesn't support HTML video. Here is a
    link to the video instead.

95 — bất kỳ đâu cũng được

Bây giờ, hãy thêm lại các dòng tương tự, ở phần đầu của hàm

96 [ngay trước phần đầu của câu lệnh

98]

Tại thời điểm này, bạn có thể xóa các dòng tương đương khỏi hàm

21 và

27, vì chức năng đó đã được triển khai trong hàm


  
  
  
    Your browser doesn't support HTML video. Here is a
    link to the video instead.

95 thay thế

Ghi chú. Bạn cũng có thể cải thiện hơn nữa hiệu quả của mã bằng cách tạo một hàm riêng chạy các dòng này, sau đó gọi hàm đó ở bất kỳ đâu cần thiết, thay vì lặp lại các dòng nhiều lần trong mã. Nhưng chúng tôi sẽ để điều đó cho bạn

Tôi nghĩ rằng chúng tôi đã dạy bạn đủ trong bài viết này. 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;
}

4 cung cấp vô số chức năng để tạo trình phát âm thanh và video đơn giản và đó chỉ là phần nổi của tảng băng chìm. Xem phần "Xem thêm" bên dưới để biết các liên kết đến chức năng thú vị và phức tạp hơn

Khám phá HTML

Khám phá CSS

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

Dừng video

Tìm đi tìm lại

Cập nhật thời gian đã trôi qua

Sửa phát và tạm dừng

Thuộc tính để bật điều khiển trên video là gì >

Bài Viết Liên Quan

Toplist mới

Bài mới nhất

Chủ Đề