집 > 기사 > 웹 프론트엔드 > HTML5의 새로운 멀티미디어 태그에 대한 자세한 설명

HTML5의 새로운 멀티미디어 태그에 대한 자세한 설명

藏色散人앞으로: 2022-08-05 16:10:503114검색

이 기사에서는 HTML에서 일반적으로 사용되는 멀티미디어 태그와 HTML5의 새로운 멀티미디어 태그를 소개합니다. 도움이 필요한 친구들에게 도움이 되길 바랍니다!

HTML5 새로운 멀티미디어 태그

1: 비디오 39000f942b2545a5315c57fa3276f22039000f942b2545a5315c57fa3276f220

当前39000f942b2545a5315c57fa3276f220元素支持三种视频格式：尽量使用MP4格式

浏览器	MP4	WebM	Ogg
IE	YES	NO	NO
Chrome	YES	YES	YES
Firefox	YES 从Firefox21版本开始Linux系统从Firefox 30开始	YES	YES
Safari	YES	NO	NO
Opera	YES 从Opera25版本开始	YES	YES

<video controls="controls" autoplay="autoplay" muted="muted" width="500px" height="400px" loop="loop" poster="images/tudou.jpg" preload="none">
    <source src="medio/mov_bbb.mp4">
    <source src="medio/mov_bbb.ogg">
    您的浏览器暂不支持<video>标签播放视频</video>

视频39000f942b2545a5315c57fa3276f220——常见属性

属性	值	描述
autoplay	autoplay	视频就绪自动播放（谷歌浏览器需添加muted来解决自动播放问题）
controls	controls	向用户显示播放控件
width	pixels（像素）	设置播放器宽度
height	pixels（像素）	播放器高度
loop	loop	循环播放
src	url	视频url地址
poster	imageurl	加载等待的话面图片
muted	muted	静音播放

二：音频b97864c2e0ef2353a16c4d64c7734e92

현재 39000f942b2545a5315c57fa3276f220 요소는 세 가지 비디오 형식을 지원합니다. MP4 형식을 사용해 보세요BrowserMP4WebMOggIEYESNONOChromeYES YESYESFirefox 네 시작합니다 Firefox21 버전부터 Linux 시스템은 Firefox 30부터 시작YESYESSafariYESNONOOperaYES Opera25 버전부터 시작 YES 예

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>HTML5音频标签</title></head><body>
   <audio controls="controls" autoplay="autoplay" muted="muted" loop="loop">
   <source src="medio/music.mp3" type="audio/mpeg">
   您的浏览器不支持audio元素</audio>
   </body>
   </html>

video39000f942b2545a5315c57fa3276f220 - 공통 속성propertyvaluedescriptionautoplayautoplay동영상 자동 재생 가능 (Google Chrome을 음소거로 추가해야 합니다. 자동 재생 문제 해결) controlscontrols사용자에게 재생 컨트롤 표시width픽셀(픽셀) 플레이어 너비 설정height픽셀( 픽셀) 플레이어 heightlooplooploop

src

동영상 URL 주소
poster
imageurl

음소거됨

🎜음소거됨🎜🎜 음소거 재생🎜🎜🎜🎜🎜🎜2: 오디오 🎜🎜🎜🎜🎜🎜 Internet Explorer 9+ 🎜🎜YES🎜🎜🎜🎜Safari 5 +🎜🎜YES🎜🎜YES🎜🎜NO 🎜🎜🎜🎜오페라 10+🎜🎜예 🎜🎜YES🎜🎜YES🎜🎜🎜🎜rrreee🎜Google Chrome에서 오디오 및 비디오 자동 재생이 비활성화되었습니다.🎜🎜 🎜🎜🎜Properties🎜 🎜Value🎜🎜Description🎜🎜🎜🎜🎜🎜autoplay 🎜🎜autoplay🎜🎜Autoplay🎜🎜🎜🎜controls🎜 🎜controls🎜🎜사용자에게 재생 컨트롤 표시🎜🎜🎜🎜loop 🎜🎜loop🎜🎜Loop play🎜🎜🎜🎜 src🎜🎜url🎜🎜video url address🎜🎜🎜🎜muted🎜 🎜음소거🎜🎜음소거 재생🎜🎜🎜 🎜🎜🎜멀티미디어 태그 요약🎜🎜🎜🎜오디오 태그와 비디오 태그의 사용법은 기본적으로 동일합니다🎜 🎜브라우저 지원은 다양합니다. 🎜🎜Google Chrome은 오디오 및 비디오 자동 재생을 비활성화합니다🎜🎜비디오 태그에 muted 속성을 추가할 수 있습니다 비디오를 음소거하지만 오디오는 할 수 없습니다(JavaScript를 통해 해결 가능)🎜🎜비디오 태그가 핵심이며 자동 재생을 설정하는 경우가 많으며 제어 제어, 반복 및 크기 속성 설정에는 적용되지 않습니다🎜🎜🎜[관련 권장 사항: 🎜css 동영상 튜토리얼🎜]🎜

위 내용은 HTML5의 새로운 멀티미디어 태그에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：

이 기사는 jianshu.com에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제

이전 기사：html5의 doctype 선언은 무엇입니까다음 기사：html5의 doctype 선언은 무엇입니까