|
1. 기본 지식 1. 사용법 <video src="./video/mv.mp4">video> 로그인 후 복사 참고 : 오디오 및 비디오 요소에는 시작 태그와 끝 태그가 모두 포함되어야 하며 사용할 수 없습니다. 2. 중요한 HTML 속성 컨트롤: control: 이 속성이 나타나면 재생 버튼과 같은 컨트롤이 사용자에게 표시됩니다. 각 브라우저의 재생 컨트롤은 다르지만 목적은 동일합니다. 시작과 끝을 제어하고, 새 위치로 이동하고, 볼륨을 조정할 수 있습니다. 자동 재생: 자동 재생: 경우 이 속성을 사용하면 비디오가 준비되는 즉시 재생됩니다. autoplay 속성이 설정되지 않은 경우 사용자가 재생 버튼을 클릭하면 오디오 파일이 재생되어야 합니다. loop: loop: (반복 재생) 오디오가 끝에 도달하면 처음부터 다시 재생을 시작하도록 브라우저에 지시합니다. preload: auto, mete, none: 브라우저에 오디오 다운로드 방법을 알려줍니다.
preload 속성이 설정되지 않은 경우 브라우저가 미리 다운로드 여부를 결정합니다. 브라우저마다 이를 다르게 처리합니다. 대부분의 브라우저는 기본값으로 auto를 사용하지만 Firefox의 기본값은 메타데이터입니다. 그러나 이 사전 로드 속성은 엄격하게 구현되어야 하는 규칙이 아니라 브라우저에 대한 제안일 뿐이라는 점도 참고하세요. 상황에 따라 브라우저는 귀하의 설정을 무시할 수 있습니다. (일부 오래된 브라우저에서는 preload 속성을 신경쓰지 않습니다.) 3. 일반적인 이벤트 이벤트 이름: 설명 oncanplay Strong>: 파일이 재생을 시작할 준비가 되었을 때(버퍼링이 시작하기에 충분할 때) 실행되는 스크립트입니다.Ontimeupdate: 재생 위치가 변경될 때(예: 사용자가 미디어의 다른 위치로 빨리 감는 경우) 실행되는 스크립트입니다. onended: 미디어가 끝에 도달했을 때 실행되는 스크립트입니다("시청해 주셔서 감사합니다"와 같은 메시지를 보낼 수 있음). 4. 자주 사용되는 메소드 메서드 이름: 설명 play(): 오디오/비디오 재생 시작 pause(): 현재 재생 중인 오디오/비디오를 일시 중지합니다 5. 일반적으로 사용되는 API 속성 속성 이름: 설명 기간: 현재 오디오/비디오의 길이(초)를 반환합니다. 일시중지됨: 오디오/비디오가 일시중지되는지 여부를 설정하거나 반환합니다. p>currentTime: 오디오/비디오의 현재 재생 위치를 설정하거나 반환합니다(초 단위). ended: 오디오/비디오 재생 여부를 반환합니다. 영상이 종료되었습니다 더 많은 속성, 이벤트 및 방법을 보려면 w3school을 참조하세요 2. 나만의 플레이어 만들기< /strong> 우리는 다음 기능을 달성하기 위해 재생 컨트롤(사용자 정의된 재생 컨트롤)의 동작을 제어하기 위해 JavaScript를 사용합니다:
1.재생 컨트롤< /p>
로그인 후 복사 위는 모두 HTML 코드입니다. .controls 클래스는 CSS 코드를 인용하는 재생 컨트롤 HTML입니다. <link rel="stylesheet" href="./css/font-awesome.css"><link rel="stylesheet" href="./css/player.css"> 로그인 후 복사 재생 버튼 등의 아이콘을 표시하기 위해 폰트 아이콘을 사용했습니다 2. 동영상 로딩 로딩 효과 처음에 동영상을 숨기고 배경 이미지를 설정한 후 동영상이 로드되면 동영상을 표시하고 재생할 수 있습니다. CSS: .player { width: 720px; height: 360px; margin: 0 auto; background: #000 url(../images/loading.gif) center/300px no-repeat; position: relative;}
video { display: none; height: 100%; margin: 0 auto;로그인 후 복사 3. 재생 기능 자바스크립트 코드 작성을 시작해 보겠습니다. . 먼저 사용할 DOM 요소를 가져옵니다. var video = document.querySelector("video");var isPlay = document.querySelector(".switch");var expand = document.querySelector(".expand");var progress = document.querySelector(".progress");var loaded = document.querySelector(".progress > .loaded");var currPlayTime = document.querySelector(".timer > .current");var totalTime = document.querySelector(".timer > .total");로그인 후 복사 동영상을 재생할 수 있게 되면 동영상을 표시합니다. //当视频可播放的时候video.oncanplay = function(){ //显示视频
this.style.display = "block"; //显示视频总时长
totalTime.innerHTML = getFormatTime(this.duration);
};로그인 후 복사 4.播放、暂停 点击播放按钮时显示暂停图标，在播放和暂停状态之间切换图标 //播放按钮控制isPlay.onclick = function(){ if(video.paused) {
video.play();
} else {
video.pause();
} this.classList.toggle("fa-pause");
};로그인 후 복사 5.总时长和当前播放时长显示 前面代码中其实已经设置了相关代码，此时我们只需要把获取到的毫秒数转换成我们需要的时间格式即可，提供getFormatTime()函数： function getFormatTime(time) { var time = time 0;
var h = parseInt(time/3600),
m = parseInt(time%3600/60),
s = parseInt(time%60);
h = h < 10 ? "0"+h : h;
m = m < 10 ? "0"+m : m;
s = s < 10 ? "0"+s : s;
return h+":"+m+":"+s;
}로그인 후 복사 6.播放进度条 //播放进度video.ontimeupdate = function(){ var currTime = this.currentTime, //当前播放时间
duration = this.duration; // 视频总时长
//百分比
var pre = currTime / duration * 100 + "%"; //显示进度条
loaded.style.width = pre;
//显示当前播放进度时间
currPlayTime.innerHTML = getFormatTime(currTime);
};로그인 후 복사 这样就可以实时显示进度条了，此时，我们还需要点击进度条进行跳跃播放，即我们点击任意时间点视频跳转到当前时间点播放： //跳跃播放progress.onclick = function(e){ var event = e window.event;
video.currentTime = (event.offsetX / this.offsetWidth) * video.duration;
};로그인 후 복사 7.全屏显示 这个功能可以使用HTML5提供的全局API：webkitRequestFullScreen实现，跟video无关： //全屏expand.onclick = function(){
video.webkitRequestFullScreen();
};로그인 후 복사 经测试在firefox、IE下全屏功能不可用，这样正常了，全屏API是针对webkit内核的。 |
위 내용은 HTML5 VideoAPI, 나만의 웹 비디오 플레이어 구축의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
