HTML5에서 오디오 및 비디오 태그 사용

이 글은 주로 HTML5의 오디오 및 비디오 태그 사용에 대해 소개합니다. 이제 공유해 보겠습니다. 도움이 필요한 친구들이 참고할 수 있습니다.

제가 최근에 만든 WeChat 공유 페이지에는 많은 의견이 있습니다. 재생 및 영상을 보면 많은 관련 메서드 속성이 이전에 터치된 적이 없으므로 지금 기록해 두세요!

1. 먼저 두 태그에 대한 기본 정보를 이해하세요.

두 태그의 기본 속성:

或SrcStartdate두 태그에 대한 기본 방법:

Property	Description
audioTracks	사용 가능한 오디오 트랙을 나타내는 AudioTrackList 개체를 반환합니다.
autoplay	로드가 완료된 후 즉시 오디오/비디오를 재생할지 여부를 설정하거나 반환합니다
버퍼됨	오디오/비디오의 버퍼링된 부분을 나타내는 TimeRanges 객체를 반환합니다.
controller	오디오/비디오의 현재 미디어 컨트롤러를 나타내는 MediaController 객체를 반환합니다.
controls	오디오/비디오의 현재 미디어 컨트롤러를 설정하거나 반환합니다. 비디오 디스플레이 컨트롤(예: 재생/일시 중지 등)
crossOrigin	오디오/비디오 세트의 CORS 설정 또는 반환
currentSrc	현재 오디오/비디오의 URL 반환
currentTime	오디오/비디오 위치에서 현재 재생 설정 또는 반환(초)
defaultMulated	오디오/비디오가 기본적으로 음소거되어 있는지 여부를 설정 또는 반환
defaultPlaybackRate	설정 또는 반환 오디오/비디오의 기본 재생 속도
duration	현재 오디오/비디오 길이(초) 반환
ended	오디오/비디오 재생이 종료되었는지 여부를 반환합니다.
error	오디오/비디오 오류 상태를 나타내는 MediaError 개체를 반환합니다.
loop	오디오/비디오 재생이 종료되어야 하는지 설정하거나 반환합니다. 재생
mediaGroup	오디오/비디오가 속한 그룹 설정 또는 반환(여러 오디오/비디오 요소를 연결하는 데 사용)
음소거	오디오/비디오 재생 여부 설정 또는 반환 음소거됨
networkState	오디오/비디오의 현재 네트워크 상태를 반환합니다.
paused	오디오/비디오의 일시 중지 여부를 설정 또는 반환합니다.
playbackRate	오디오 속도 설정 또는 반환 /video Playback
played	비디오 재생 부분의 오디오/TimeRanges 객체를 나타내는 반환
preload	페이지가 로드된 후 오디오/비디오를 로드해야 하는지 여부를 설정하거나 반환합니다
readyState	오디오/비디오의 현재 준비 상태를 반환합니다.
seekable	오디오/비디오의 주소 지정 가능한 부분을 나타내는 TimeRanges 객체를 반환합니다.
seeking	사용자가 오디오에서 찾고 있는지 여부를 반환합니다. /동영상
설정 또는 오디오/비디오 요소 현재 소스 반환
현재 시간 오프셋을 나타내기 위해 돌아갑니다. videoTracks	사용 가능한 비디오 트랙을 나타내는 VideoTrackList 개체를 반환합니다
volume	설정 또는 반환 오디오/비디오의 볼륨
Method	Description

addTextTrack()

오디오/비디오에 새 텍스트 트랙 추가

canPlayType()

브라우저가 지정된 오디오/비디오 유형을 재생할 수 있는지 감지

load()

오디오/비디오 요소 다시 로드

play()

오디오/비디오 재생 시작

Pause()

현재 재생 중인 오디오/비디오를 일시 중지합니다

두 태그의 이벤트:

Event	Description
abort	오디오/비디오 로딩이 중단된 경우
canplay	브라우저에서 오디오/비디오를 재생할 수 있는 경우
playthrough 가능	As 브라우저 버퍼링으로 인해 일시 정지 없이 재생이 가능한 경우
durationchange	오디오/비디오 길이가 변경된 경우
emptied	현재 재생 목록이 비어 있는 경우
ended	현재 재생목록이 종료되었습니다
error	오디오/비디오 로딩 중 오류가 발생한 경우
loadeddata	브라우저가 오디오/비디오의 현재 프레임을 로드했을 때
loadedmetadata	브라우저가 오디오/비디오의 메타데이터 로드
loadstart	브라우저가 오디오/비디오 검색을 시작할 때
pause	오디오/비디오가 일시 중지되었을 때
play	오디오/비디오가 시작되었거나 더 이상 일시정지 상태가 아닐 때
playing	오디오/비디오가 버퍼링으로 인해 일시정지되거나 중지된 후 준비가 되었을 때
진행	브라우저는 오디오/비디오를 다운로드할 때
ratechange	오디오/비디오의 재생 속도가 변경되었을 때
seeked	사용자가 오디오/비디오에서 새로운 위치로 이동/점프했을 때
seeking	사용자가 오디오/비디오에서 새로운 위치로 이동/점프하기 시작할 때
stalled	브라우저가 미디어 데이터를 가져오려고 하지만 데이터를 사용할 수 없는 경우
일시 중지	브라우저가 의도적으로 미디어 데이터를 가져오지 못하는 경우
timeupdate	현재 재생 위치가 변경된 경우
volumechange	볼륨이 변경된 경우
대기 중	동영상이 재생되는 경우 다음 프레임을 버퍼링해야 하기 때문에 중지됩니다

2. 프로젝트에서 사용: 비디오가 로드되지 않은 경우 여기의 이미지의 첫 번째 프레임이 배경에서 전송되는 것으로 나타났습니다. 비디오 태그에는 포스터 속성이 있습니다. 이는 특히 비디오 표지 이미지와 동일한 비디오의 첫 번째 프레임을 표시하는 데 사용됩니다. 포스터 속성은 비디오의 포스터 속성 값을 설정하거나 반환하는 데 사용됩니다. 이 속성은 비디오가 로드될 때 또는 사용자가 재생 버튼을 클릭하기 전에 표시되는 이미지를 설명합니다. 이 속성이 포함되지 않으면 비디오의 첫 번째 프레임이 대신 사용됩니다.

<p class="newsInfo" v-for=" item in newsFragment">
<p class="text">{{item.fragment_text_describe}}</p>
<p v-if="item.fragmentFile" v-for="items in item.fragmentFile">
<img v-if="items.fragment_type==1" :src="items.fragment_url" alt="">
<video v-else :poster="items.fileCover" controls :src="items.fragment_url"></video>
</p>
</p>

오디오 재생 시 브라우저가 이러한 유형의 오디오를 지원하지 않을 수 있으므로 판단해야 합니다. canPlayType() 메서드를 사용하여 브라우저가 지정된 오디오/비디오 유형을 재생할 수 있는지 확인하세요. canPlayType() 메서드는 다음 값 중 하나를 반환할 수 있습니다.
"아마도" - 브라우저가 이 오디오/비디오 유형을 지원할 가능성이 가장 높습니다.
"아마도" - 브라우저가 이 오디오/비디오 유형을 지원할 수 있습니다.

"" - (빈 문자열) 브라우저는 이 오디오/비디오 유형을 지원하지 않습니다

사용 구문:

audio.canPlayType("mp3"))

관련 권장 사항:

HTML5의 sessionStorage 개체에 대한 심층적인 이해

HTML5 비디오 태그 작업에 대한 자세한 비디오 설명

위 내용은 HTML5에서 오디오 및 비디오 태그 사용의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!