HTML5의 새로운 멀티미디어 태그에 대한 자세한 설명-H5 튜토리얼-php.cn

집

웹 프론트엔드

H5 튜토리얼

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

藏色散人

Aug 05, 2022 pm 04:10 PM

멀티미디어 태그

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

HTML5 새로운 멀티미디어 태그

1: 비디오 <video><video>

当前<video>元素支持三种视频格式：尽量使用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>

视频<video>——常见属性

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

二：音频<audio>

현재 <video> 요소는 세 가지 비디오 형식을 지원합니다. 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>

video<video> - 공통 속성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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

Undress AI Tool

무료로 이미지를 벗다

Undresser.AI Undress

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

AI Clothes Remover

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

Clothoff.io

AI 옷 제거제

Video Face Swap

완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

뜨거운 도구

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

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

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

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

뜨거운 주제

라라벨 튜토리얼

1602

PHP 튜토리얼

1506

276

Related knowledge

CSS 및 JavaScript를 HTML5 구조와 효과적으로 통합합니다. Jul 12, 2025 am 03:01 AM

HTML5, CSS 및 JavaScript는 시맨틱 태그, 합리적인 로딩 순서 및 디커플링 설계와 효율적으로 결합되어야합니다. 1. SEO 및 장벽이없는 액세스에 도움이되는 구조적 선명도 및 유지 보수성 향상과 같은 HTML5 시맨틱 태그를 사용하십시오. 2. CSS를 배치하고 외부 파일을 사용하고 모듈별로 분리하여 인라인 스타일과 지연된로드 문제를 피하십시오. 3. JavaScript는 정면에 도입되는 것이 권장되며 DEFER 또는 ASYNC를 사용하여 차단 렌더링을 피하기 위해 비동기 적으로로드합니다. 4. 데이터 사이의 강력한 의존성을 줄이고 데이터 속성 및 클래스 이름 제어 상태를 통해 동작을 구동하며 통합 이름 지정 사양을 통해 협업 효율성을 향상시킵니다. 이러한 방법은 페이지 성능을 효과적으로 최적화하고 팀과 협력 할 수 있습니다.

html5``vs` `요소를 설명합니다. Jul 12, 2025 am 03:09 AM

레이아웃에 적합한 블록 레벨 요소입니다. 텍스트 내용을 포장하는 데 적합한 인라인 요소입니다. 1. 선, 너비, 높이 및 여백을 독점적으로 차지할 수 있으며, 이는 종종 구조적 레이아웃에 사용됩니다. 2. 라인이 나지 않으며 크기는 내용에 의해 결정되며 로컬 텍스트 스타일 또는 동적 작업에 적합합니다. 3. 선택할 때 컨텐츠에 독립적 인 공간이 필요한지 여부에 따라 판단해야합니다. 4. 중첩 될 수 없으며 레이아웃에 적합하지 않습니다. 5. 구조적 선명도와 접근성을 향상시키기 위해 시맨틱 라벨을 사용하는 데 우선 순위가 부여됩니다.

HTML5 비디오 스트리밍 기술 및 고려 사항 Jul 14, 2025 am 02:41 AM

HTML5 동영상을 원활하게 재생하기위한 3 가지 점에 주목하십시오. 1. MP4, Webm 또는 OGG와 같은 적절한 비디오 형식을 선택하고 대상 사용자의 선택에 따라 여러 형식 또는 단일 형식을 제공합니다. 2. HLS.JS 또는 Dash.JS와 결합하여 HLS 또는 DASH와 같은 적응 형 비트 레이트 기술을 사용하여 자동 명확성 스위칭을 달성합니다. 3.로드 속도를 최적화하고 트래픽 소비를 줄이기 위해 사전로드 속성, 바이트 범위 요청, 압축 및 캐시와 같은 사전로드 정책 및 서버 구성을 합리적으로 설정합니다.

HTML5 양식으로 사용 가능한 새로운 입력 유형은 무엇입니까? Jul 12, 2025 am 03:07 AM

html5intructedNewInpestHancePestEnhanceFormFunctionalityAndUceNectionAntiLityandUseExperienceImprovingValidation, andMobileKeyboardLayouts.1.EmailValidatesEmailAddressesandSupportsmultipleEntries.2.urlChecksBalidWebAddressAntRULTURL-TMITERGLUTGORL-DMITERGLUTGORL-TMITERGLUTGURLOPPORTS

HTML5 캔버스 및 게임 API를 사용하여 웹 게임 개발 Jul 14, 2025 am 03:08 AM

HTML5CANVAS는 웹 페이지에서 그래픽 및 애니메이션을 그리는 API로 GameApis와 결합하여 기능이 풍부한 웹 게임을 활성화합니다. 1. 요소를 설정하고 2D 컨텍스트를 얻습니다. 2. JavaScript를 사용하여 개체를 그리고 애니메이션 루프를 구현하십시오. 3. 게임을 제어하기위한 프로세스 사용자 입력; 4. Gamepad, Webaudio, Pointerlock 및 Fullscreen과 같은 API를 결합하여 대화식 경험을 향상시킵니다. 5. 성능을 최적화하고 리소스로드를 관리하여 원활한 작동을 보장합니다.

HTML5 지리적 위치 API로 사용자의 현재 위치에 액세스하는 방법은 무엇입니까? Jul 13, 2025 am 02:23 AM

사용자의 현재 위치를 얻으려면 html5 geolocationapi를 사용하십시오. 이 API는 사용자 승인 후 위도 및 경도와 같은 정보를 제공합니다. 핵심 메소드는 GetCurrentPosition ()이며 성공 및 오류 콜백을 처리해야합니다. 동시에 HTTPS 전제 조건, 사용자 인증 메커니즘 및 오류 코드 처리에주의하십시오. getCurrentPosition을 호출하여 위치를 한 번 가져 오면 실패하면 오류 콜백이 트리거됩니다. ② 사용자는이를 승인해야합니다. 그렇지 않으면 얻을 수 없으며 더 이상 프롬프트를받지 못할 수 있습니다. Orger 오류 처리는 거부, 시간 초과, 위치를 사용할 수없는 위치 등을 구별해야합니다. ④ 고정밀, 시간 초과 시간 설정 등을 활성화하고 세 번째 매개 변수를 통해 구성 할 수 있습니다. Online 온라인 환경은 HTTPS를 사용해야합니다. 그렇지 않으면 브라우저에 의해 제한 될 수 있습니다.

html5의 스크립트에 대한`async` 및`defer` 속성을 설명하십시오. Jul 13, 2025 am 03:06 AM

비동기와 연기의 차이점은 스크립트의 실행 타이밍입니다. Async를 사용하면 실행 순서를 보장하지 않고 스크립트를 병렬로 다운로드하고 다운로드 직후에 실행할 수 있습니다. HTML 파싱이 완료된 후 DEFER는 순서대로 스크립트를 실행합니다. 둘 다 HTML 파싱 차단을 피합니다. Async 사용은 코드 분석과 같은 독립형 스크립트에 적합합니다. 연기는 DOM에 액세스하거나 다른 스크립트에 의존 해야하는 시나리오에 적합합니다.

내 이미지가 HTML에 나타나지 않는 이유는 무엇입니까? Jul 28, 2025 am 02:08 AM

표시되지 않은 이미지는 일반적으로 잘못된 파일 경로, 잘못된 파일 이름 또는 확장자, HTML 구문 문제 또는 브라우저 캐시로 인해 발생합니다. 1. SRC 경로가 파일의 실제 위치와 일치하는지 확인하고 올바른 상대 경로를 사용하십시오. 2. 파일 이름 케이스 및 확장자가 정확히 일치하는지 확인하고 URL을 직접 입력하여 이미지를로드 할 수 있는지 확인하십시오. 3. IMG 태그 구문이 올바른지 확인하고 중복 문자가없고 Alt 속성 값이 적절한 지 확인하십시오. 4. 페이지를 강제로 새로 고치거나 캐시를 지우거나 시크릿 모드를 사용하여 캐시 간섭을 제거하십시오. 이 순서로 문제를 해결하면 대부분의 HTML 이미지 표시 문제를 해결할 수 있습니다.

See all articles