의견 :이 기사에서는 HTML5 Music Player의 오디오 태그 사용에 대한 자세한 개요를 제공합니다. HTML5를 좋아하는 친구는 그것을 참조 할 수 있습니다. 나는 그것이 당신에게 도움이되기를 바랍니다.
<Audio> 태그 속성 : SRC : Music URLPRELOAD : Preload AutoPlay : AutoPlay Loop : 루프 컨트롤 : 브라우저 자체 제어 막대
<audioid = "media"src = "http://www.abc.com/test.mp3"컨트롤> </audio>
<video> 태그 속성 : SRC : 비디오 포스터의 URL : 비디오 커버, 플레이 프리로드가 없을 때 표시되는 사진 : 예압 자동 재생 : 자동 재생 루프 : 루프 컨트롤 : 브라우저의 자체 제어 막대 너비 : 비디오 높이 : 비디오 높이
<videoid = "media"src = "http://www.abc.com/test.mp4"controlsheigt = "400px"> </video>
htmlvideoelement 및 htmlaudioelement 객체를 얻으십시오
// 오디오는 새로운 것을 통해 직접 객체를 생성 할 수 있습니다
Media = Newaudio ( "http://www.abc.com/test.mp3");
// 오디오와 비디오 모두 태그를 통해 객체를 얻을 수 있습니다.
미디어 = document.getElementById ( "미디어");
미디어 방법 및 속성 :
htmlvideoelement 및 htmlaudioelement는 모두 htmlmedialement에서 상속됩니다
// 오류 상태
미디어 .ERROR; // null : 정상
media.error.code; // 1. 사용자 종료 2. 네트워크 오류 3. 디코딩 오류 4. URL 무효
// 네트워크 상태
미디어 .currentsrc; // 현재 리소스의 URL을 반환합니다
media.src = value; // 현재 리소스의 URL을 반환하거나 설정합니다
Media.canplayType (유형); // 특정 형식의 리소스를 재생할 수 있습니다
media.networkstate; // 0. 이 요소는 초기화되지 않았습니다. 1. 정상이지만 네트워크를 사용하지 않음 2. 데이터가 다운로드됩니다. 3. 리소스를 찾을 수 없습니다.
media.load (); // SRC에서 지정된 리소스를 다시로드합니다
미디어 .Buffered; // 버퍼링 된 영역, 타이머로 돌아갑니다
미디어 .preload; // 없음 : 예압 메타 데이터가 아님 : 예비 리소스 정보 자동 :
// 준비 상태
Media.readystate; // 1 : HAD_NOTHING 2 : HADE_METADATA 3.HAVE_CURRENT_DATA 4.HAVE_FUTURE_DATA 5.have_enough_data
미디어. // 추구하고 있습니다
// 재생 상태
media.currenttime = value; // 현재 재생 위치, 할당은 위치를 변경할 수 있습니다
media.starttime; // 일반적으로 0, 스트리밍 미디어이거나 0부터 시작하지 않는 리소스 인 경우 0이 아닙니다.
미디어. // 현재 자원 길이 스트림은 무한을 반환합니다
미디어. // 일시 중지 여부
media.defaultplaybackrate = value; // 기본 재생 속도를 설정할 수 있습니다
media.playbackrate = value; // 현재 재생 속도는 설정 직후 즉시 변경됩니다.
Media.played; // 재생 가능한 영역으로 돌아가서 타이머,이 개체는 아래를 참조하십시오.
미디어. // 타이머를 찾을 수있는 지역으로 돌아갑니다
미디어. // 종료되었습니다
Media.autoplay; // 자동으로 재생됩니다
미디어. 루프; // 루프 재생 여부
media.play (); //놀다
media.pause (); //정지시키다
//제어
media.controls; // 기본 제어 막대가 있습니까?
media.volume = value; //용량
media.muted = value; //무음
// 타이머 (지역) 객체
타이머. 길이; // 면적 세그먼트 수
TIMERANGES.START (index) // 인덱스 섹션 영역의 시작 위치
TIMERANGES.end (index) // 인덱스 섹션 영역의 종료 위치
이벤트:
EventTester = function (e) {
media.addeventListener (e, function () {
console.log ((newDate ()). gettime (), e);
});
}
EventTester ( "loadStart"); // 클라이언트가 데이터 요청을 시작합니다
EventTester ( "진행"); // 클라이언트가 데이터를 요청하고 있습니다
EventTester ( "삭제"); // 지연된 다운로드
EventTester ( "Abort"); // 클라이언트는 다운로드를 적극적으로 종료합니다 (오류로 인해 발생하지 않음).
EventTester ( "오류"); // 데이터를 요청하는 동안 오류가 발생했습니다
EventTester ( "Stalled"); // 네트워크 속도를 중지합니다
Eventtester ( "Play"); // play ()와 자동 재생이 재생 될 때 트리거되었습니다
EventTester ( "일시 중지"); // pause () 트리거
EventTester ( "LoadedMetadata"); // 자원 길이를 성공적으로 얻습니다
EventTester ( "loadedData"); //
EventTester ( "대기"); // 오류가 아니라 데이터를 기다리고 있습니다
Eventtester ( "재생"); // 재생을 시작합니다
EventTester ( "Canplay"); // 재생할 수 있지만 중간에 로딩되어 일시 중지 될 수 있습니다.
EventTester ( "canplaythrough"); // 재생할 수 있고, 모든 노래가로드됩니다
EventTester ( "찾기"); //수색
Eventtester ( "Seeked"); // 검색이 완료되었습니다
EventTester ( "TimeUpdate"); // 재생 시간이 변경됩니다
EventTester ( "종료"); // 재생이 끝납니다
EventTester ( "RateChange"); // 재생 속도가 변경됩니다
EventTester ( "DurationChange"); // 리소스 길이가 변경됩니다
EventTester ( "VolumeChange"); // 볼륨 변경
혼자서 작성된 JS 단락 :
$ (function () {
var p = new Player ();
p.read ( "Play");
$ ( "#stop"). 클릭 (function () {
p.pause ();
});
$ ( "#start"). 클릭 (function () {
p.play ();
});
$ ( "#show"). 클릭 (function () {
경고 (p.duration ());
});
setInterval (function () {
$ ( "#currentTime"). text (p.currentTime ());
}, 1000);
});
함수 플레이어 () {};
player.prototype = {
상자 : 새 개체 (),
읽기 : function (id) {
this.box = document.getElementById (id);
},
재생 : function () {
this.box.play ();
},
일시 중지 : function () {
this.box.pause ();
},
src : function (url) {
this.box.src = url;
},
현재 시간 : function () {
return (this.box.currenttime/60) .tofixed (2);
}
};
player.prototype.duration = function () {
return (this.box.duration/60) .tofixed (2);
};