> 웹 프론트엔드 > H5 튜토리얼 > HTML5 멀티미디어 오디오 및 비디오에 대한 자세한 소개(2)

HTML5 멀티미디어 오디오 및 비디오에 대한 자세한 소개(2)

黄舟
풀어 주다: 2017-05-19 16:55:38
원래의
1978명이 탐색했습니다.

앞서 오디오와 비디오의 가장 기본적인 사용법을 배웠습니다. 오디오와 비디오의 재생을 보다 유연하게 제어하려면 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿