JS 는 비디오 재생 속 도 를 간단하게 제어 하 는 인 스 턴 스 코드 를 실현 합 니 다.
예전 에 한 가지 문 제 를 발 견 했 습 니 다.가끔 은 학습 영상 을 보면 동작 이 너무 느리다 고 생각 합 니 다.선생님 의 칠판 에 판 서 를 쓰 는 것 은 시간 을 낭비 합 니 다.적당 한 속도 로 재생 하면 학습 효율 도 향상 시 키 고 자신 도 편안하게 볼 수 있 습 니 다.그래서 저 는 아래 웹 페이지 를 써 서 Html+CSS+JavaScript 를 통 해 이 루어 지 는 것 을 배 웠 습 니 다.
제시:다음은 본 글 의 본문 내용 이 고 다음 사례 는 참고 할 수 있 습 니 다.
완제품 효과
구체 적 실현
1.HTML+CSS 간단 한 레이아웃 구현
코드 는 다음 과 같 습 니 다(예시).
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css" rel="external nofollow" >
<title> </title>
</head>
<body>
<div id="wrapper">
<video width="765" height="430" src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" controls class="flex"></video>
<div class="speed">
<div class="speed-bar">1x</div>
</div>
</div>
<script src="./index.js"></script>
</body>
</html>
*{
margin: 0;
padding: 0;
}
body{
min-height: 100vh;/* vh ， */
background: #4c4c4c url('https://unsplash.it/1500/900?image=1021');
background-size: cover;/* , , 、 */
/*margin: auto;/* margin:auto margin:0 auto ， */
display: flex;/* */
justify-content: center; /* X */
align-items: center; /* Y */ /* ： */
}
#wrapper{
width: 850px;
display: flex;
}
.speed{
flex: 1;/* , 1:1 ， vedio ， speed */
margin: 10px;
background-color: #fff;
border-radius: 50px;
display: flex;
overflow: hidden;/* ： ， */
align-items: flex-start;/* */
}
.speed-bar{
width: 100%;
height: 16.3%;
background:linear-gradient(-170deg,#2376ae 0%,#c16ecf 100%); /* */
display: flex; /* */
justify-content: center;
align-items: center;
color: #fff;
cursor: pointer;
}css 에 서 는 탄성 상자 사용 에 주의 하 시고 탄성 용 기 를 통 해 영상의 수평 수직 거 중 을 설정 하 였 습 니 다.
2.JS 구현 기능
코드 는 다음 과 같 습 니 다(예시).
//1. dom
//2. dom
//3. dom
//4.
// dom
var speed=document.querySelector('.speed')// ：getElementsByClassName class
var bar=document.querySelector('.speed-bar')
var video=document.querySelector('.flex')
speed.addEventListener('mousemove',function(e){ // （click、mouseover ）， 。 ， 。
//console.log(e);
var y=e.pageY-speed.offsetTop // offsetTop dom
var percent = y / speed.offsetHeight //offsetHeight dom
var min = 0.4 //
var max = 4
var playbackRate = percent * (max-min)+min //
var height = Math.round(percent * 100)+'%'//Math.abs()
bar.textContent = playbackRate.toFixed(2)+'×' // dom toFixed(x) x
video.playbackRate = playbackRate // video
bar.style.height = height //
})
// ： ： ， 1.조작 할 dom 구 조 를 가 져 오기
2.마우스 가 이 dom 에서 미 끄 러 지 는 거 리 를 가 져 옵 니 다.
3.이 dom 의 높이 변경
4.동 영상 재생 속도 변경
목표 가 있 으 면 우 리 는 하나씩 그것 을 실현 할 것 이다.
구체 적 으로 실현 하면 원 코드 를 직접 볼 수 있 는데 여기 서 리 셋 함수 와 마우스 제어 배속 원 리 를 중점적으로 제시 합 니 다.볼 수 있다
speed.addEventListener( " mousemove " ,function(e){)
이것 은 반전 함수 입 니 다.mousemove 가 발생 할 때 함수 function(e)tmousemove 를 실행 하 는 것 은 마우스 위 치 를 감청 하 는 역할 을 합 니 다.
JS 를 통 해 영상 재생 속 도 를 간단하게 제어 할 수 있 는 이 글 은 여기까지 소개 되 었 습 니 다.더 많은 관련 js 영상 재생 속도 내용 은 우리 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 조회 하 시기 바 랍 니 다.앞으로 많은 응원 부 탁 드 리 겠 습 니 다!
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
[2022.04.19] 자바스크립트 this - 생성자 함수와 이벤트리스너에서의 this18일에 this에 대해 공부하면서 적었던 일반적인 함수나 객체에서의 this가 아닌 오늘은 이벤트리스너와 생성자 함수 안에서의 this를 살펴보기로 했다. new 키워드를 붙여 함수를 생성자로 사용할 때 this는...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
