HTML5 멀티미디어 오디오 및 비디오에 대한 자세한 소개(2)
앞서 오디오와 비디오의 가장 기본적인 사용법을 배웠습니다. 오디오와 비디오의 재생을 보다 유연하게 제어하려면 HTML5에서 제공하는 관련 속성, 메서드 및 이벤트를 배워야 합니다.
오디오 및 비디오 관련 속성
属性 | 描述 |
---|---|
src | 用于指定媒体资源的URL地址 |
autoplay | 资源加载后自动播放 |
buffered | 用于返回一个TimeRanges对象,确认浏览器已经缓存媒体文件。 |
controls | 提供用于播放的控制条 |
currentSrc | 返回媒体数据的URL地址 |
currentTime | 获取或设置当前的播放位置,单位为秒 |
defaultPlaybackRate | 返回默认播放速度 |
duration | 获取当前媒体的持续时间 |
loop | 设置或返回是否循环播放 |
muted | 设置或返回是否静音 |
networkState | 返回音频视频当前网络状态 |
paused | 检查视频是否已暂停 |
playbackRate | 设置或返回音频视频的当前播放速度 |
played | 返回TimeRanges对象。TimeRanges表示用户已经播放的音频视频范围 |
preload | 设置或返回是否自动加载音视频资源 |
readyState | 返回音频视频当前就绪状态 |
seekable | 返回TimeRanges对象,表明可以对当前媒体资源进行请求 |
seeking | 返回是否正在请求数据 |
valume | 设置或返回音量,值为0到1.0 |
오디오 및 비디오 관련 방법
方法 | 描述 |
---|---|
canPlayType() | 检测浏览器是否能播放指定的音频、视频 |
load() | 重新加载音频、视频元素 |
pause() | 停止当前播放的音频、视频 |
play() | 开始播放当前音频、视频 |
오디오 및 비디오 관련 이벤트
事件 | 描述 |
---|---|
canplay | 当浏览器能够开始播放指定的音视频时,发生此事件 |
canplaythrough | 当浏览器预计能够在不停下来进行缓冲的情况下持续播放指定的音频视频时,发生此事件 |
durationchange | 当音频、视频的时长数据发生变化时,发生此事件 |
loadeddata | 当当前帧数据已加载,但没有足够的数据来播放指定音频视频的下一帧时,会发生此事件 |
loadedmatadata | 当指定的音频视频的元数据已加载时,会发生此事件。元数据包括时长、尺寸(仅视频)以及文本轨道 |
loadstart | 当浏览器开始寻找指定的音频视频时,发生此事件 |
progress | 正在下载指定的音频视频时,发生此事件 |
abort | 音频视频终止加载时,发生此事件 |
ended | 音频视频播放完成后,发生此事件 |
error | 音频、视频加载错误时,发生此事件 |
pause | 音频视频暂停时,发生此事件 |
play | 开始播放时,发生此事件 |
playing | 因缓冲而暂停或停止后已就绪时触发此事件 |
ratechange | 音频视频播放速度发生改变时,发生此事件 |
seeked | 用户已移动、跳跃到音频视频中的新位置时,发生此事件 |
seeking | 用户开始移动、跳跃到新的音频视频播放位置时,发生此事件 |
stalled | 浏览器尝试获取媒体数据,但数据不可用时触发此事件 |
suspend | 浏览器刻意不加载媒体数据时触发此事件 |
timeupdate | 播放位置发生改变时触发此事件 |
volumechange | 音量发生改变时触发此事件 |
waiting | 视频由于需要缓冲而停止时触发此事件 |
[관련 추천]
1. html5 비디오 태그 테스트 애플리케이션 상세 설명
2 . HTML5에서 비디오 요소를 사용하여 비디오 플레이어 만들기
3. mp4가 재생되지 않는 비디오 태그의 문제점과 해결책 공유
4 . H5 비디오 태그가 사운드만 재생되고 비디오는 재생되지 않는 문제 해결
5. IIS의 MIME이 MP4 형식을 등록하지 않아 결과적으로 비디오 태그를 인식할 수 없는 문제에 대한 해결책
위 내용은 HTML5 멀티미디어 오디오 및 비디오에 대한 자세한 소개(2)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

핫 AI 도구

Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool
무료로 이미지를 벗다

Clothoff.io
AI 옷 제거제

AI Hentai Generator
AI Hentai를 무료로 생성하십시오.

인기 기사

뜨거운 도구

메모장++7.3.1
사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경

드림위버 CS6
시각적 웹 개발 도구

SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)

뜨거운 주제











HTML의 테이블 테두리 안내. 여기에서는 HTML의 테이블 테두리 예제를 사용하여 테이블 테두리를 정의하는 여러 가지 방법을 논의합니다.

HTML 여백-왼쪽 안내. 여기에서는 HTML margin-left에 대한 간략한 개요와 코드 구현과 함께 예제를 논의합니다.

HTML의 Nested Table에 대한 안내입니다. 여기에서는 각 예와 함께 테이블 내에 테이블을 만드는 방법을 설명합니다.

HTML 테이블 레이아웃 안내. 여기에서는 HTML 테이블 레이아웃의 값에 대해 예제 및 출력 n 세부 사항과 함께 논의합니다.

Klipsch Flexus Core 300은 시리즈의 최고 모델이며 회사의 사운드바 라인업에서 이미 사용 가능한 Flexus Core 200 위에 위치합니다. 클립쉬(Klipsch)에 따르면, 이 사운드바는 세계 최초의 사운드바입니다.

HTML 순서 목록에 대한 안내입니다. 여기서는 HTML Ordered 목록 및 유형에 대한 소개와 각각의 예에 대해서도 설명합니다.

HTML 입력 자리 표시자 안내. 여기서는 코드 및 출력과 함께 HTML 입력 자리 표시자의 예를 논의합니다.

HTML에서 텍스트 이동 안내. 여기서는 Marquee 태그가 구문과 함께 작동하는 방식과 구현할 예제에 대해 소개합니다.
