댓글 : HTML5는 프로그래밍없이 비디오를 직접 재생할 수있는 새로운 비디오 태그를 제공합니다. 플레이어를 사용자 정의하기 위해 몇 줄의 간단한 코드 만 작성하면됩니다.
웹 페이지 html<body>
<섹션>
<Video>
<소스 src = "비디오/소개 .mp4">
</video>
<avi>
<div>
<버튼 타입 = "버튼"> 재생 </button>
</div>
<div>
<div> </div>
</div>
<div> </div>
</nav>
</섹션>
</body>
CSS 스타일
몸{
텍스트 정렬 : 센터;
}
헤더, 섹션, 바닥 글, 제쳐두고, Nav, 기사, hgroup {
디스플레이 : 블록;
}
#피부{
너비 : 700px;
마진 : 10px 자동;
패딩 : 5px;
배경 : 빨간색;
테두리 : 4px 솔리드 블랙;
Border-Radius : 20px;
}
Nav {
마진 : 5px 0px;
}
#buttons {
플로트 : 왼쪽;
너비 : 70px;
높이 : 22px;
}
#DefaultBar {
위치 : 상대;
플로트 : 왼쪽;
너비 : 600px;
높이 : 14px;
패딩 : 4px;
국경 : 1px 솔리드 블랙;
배경 : 노란색;
}
/*ProgressBar는 DefaultBar*/
#progressbar {
위치 : 절대;
너비 : 0px; /*JavaScript의 제어 변경*/
높이 : 14px; /* 및 기본 바가 같은 높이*/
배경 : 파란색;
}
자바 스크립트 코드
함수 dofisrt ()
{
Barsize = 600; // PX 장치를 사용하지 않도록주의하고 VAR을 사용하지 않으면 글로벌 변수입니다.
myMovie = document.getElementById ( 'MyMovie');
PlayButton = document.getElementById ( 'PlayButton');
bar = document.getElementById ( 'DefaultBar');
ProgressBar = document.getElementById ( 'ProgressBar');
PlayButton.addeventListener ( 'Click', PlayorPause, False); // 세 번째 매개 변수는 항상 False입니다. 버블 링 단계의 이벤트 핸들러를 등록하십시오.
bar.addeventListener ( 'click', clickedbar, false);
}
// 영화 재생 및 중지를 제어합니다
함수 playorPause () {
if (! mymovie.paued &&! mymovie.ended) {
mymovie.pause ();
playbutton.innerhtml = 'play';
Window.ClearInterval (업데이트 바);
}또 다른{
mymovie.play ();
playbutton.innerhtml = 'pause';
updatedbar = setInterval (업데이트, 500);
}
}
// 진행률 표시 줄의 동적 표시를 제어합니다
함수 업데이트 () {
if (! mymovie.ended) {
var size = parseint (mymovie.currenttime*barsize/mymovie.duration);
ProgressBar.style.width = size+'px';
}또 다른{
ProgressBar.style.width = '0px';
playbutton.innerhtml = 'play';
Window.ClearInterval (업데이트 바);
}
}
// 마우스 진행률 막대 제어 방법을 클릭하십시오
함수 clickedbar (e) {
if (! mymovie.paued &&! mymovie.ended) {
var mousex = e.pagex-bar.offsetleft;
var newtime = mousex*mymovie.duration/barsize; // 새로운 시작 시간
mymovie.currentTime = NewTime;
ProgressBar.style.width = Mousex+'PX';
Window.ClearInterval (업데이트 바);
}
}
window.addeventListener ( 'load', dofisrt, false);
좋은 일, 나는 코드 부분을 차지했다