웹 프론트엔드 H5 튜토리얼 HTML5_html5 튜토리얼 팁을 사용하여 웹 페이지에 오디오 및 비디오 재생을 삽입하는 기본 방법

HTML5_html5 튜토리얼 팁을 사용하여 웹 페이지에 오디오 및 비디오 재생을 삽입하는 기본 방법

May 16, 2016 pm 03:45 PM
audio html5 video 동영상 오디오

플래시 없이 기본 오디오 및 비디오 지원을 포함한 HTML5 기능.

HTML5

동영상 삽입
다음은 웹페이지에 동영상 파일을 삽입하는 가장 간단한 방법입니다.

XML/HTML 코드클립보드에 콘텐츠 복사
  1. <동영상 src="foo.mp4" 너비="300" 높이="200" 제어>
  2. 귀하의 브라우저는 <video> 요소를 지원하지 않습니다.
  3. 동영상>
현재 HTML5 초안 사양에서는 브라우저가 비디오 태그에서 지원해야 하는 비디오 형식을 지정하지 않습니다. 그러나 가장 일반적으로 사용되는 비디오 형식은 다음과 같습니다.

Ogg: Thedora 비디오 인코더 및 Vorbis 오디오 인코더가 포함된 Ogg 파일입니다.

mpeg4: H.264 비디오 인코더 및 AAC 오디오 인코더가 포함된 MPEG4 파일.

미디어 유형 및 기타 속성과 함께 태그를 사용하여 미디어 파일을 지정할 수 있습니다. video 요소는 여러 소스 요소를 허용하며 브라우저는 첫 번째로 인식되는 형식인
를 사용합니다.

XML/HTML 코드
클립보드에 콘텐츠 복사
  1. >  
  2. <html>  
  3. <>  
  4.    <동영상  너비="300"  높이="200" 자동 재생 제어>  
  5.        <소스 src="/html5 /foo.ogg" 유형="동영상/ogg" /> ;  
  6.        <소스 src="/html5 /foo.mp4" 유형="video/mp4" /> ;  
  7.        귀하의 브라우저는 <video> 요소를 지원하지 않습니다.   
  8.    동영상>  
  9. >  
  10. html>  

동영상 属性规范
HTML5 동영상 标签可以使用多个属性控及各种控조제功能:

属性 描述
autoplay 如果指定这个布尔值属性,只要没有停止加载数据,视频就会立刻开始自动播放。
autobuffer 如果指定这个布尔值属性,即使没有设置自动播放,视频也会自动开始缓冲。
controls 如果指定这个属性,就允许用户控制视频播放,包括音量控制,快进,暂停或者恢复播放。
height 这个属性以 CSS 像素的形式指定视频显示区域的高度。
loop 如果指定这个布尔值属性,表示允许播放结束后自动回放。
preload 指定这个属性,视频会在载入页面时加载并准备就绪。如果指定自动播放则忽略。
poster 这是一个图像 URL,显示到用户播放或快进。
src 要嵌入的视频 URL。可选,可以在 video 块中使用 元素替代来指定要嵌入的视频。
width 这个属性以 CSS 像素的形式指定视频显示区域的宽度。

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

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

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

AI Clothes Remover

AI Clothes Remover

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

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai Generator

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

뜨거운 도구

메모장++7.3.1

메모장++7.3.1

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

SublimeText3 중국어 버전

SublimeText3 중국어 버전

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

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

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

HTML의 테이블 테두리 HTML의 테이블 테두리 Sep 04, 2024 pm 04:49 PM

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

HTML의 중첩 테이블 HTML의 중첩 테이블 Sep 04, 2024 pm 04:49 PM

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

HTML 여백-왼쪽 HTML 여백-왼쪽 Sep 04, 2024 pm 04:48 PM

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

Klipsch, 8K 지원, 12개의 스피커 및 공간 보정 기능을 갖춘 Flexus Core 300 플래그십 사운드바 공개 Klipsch, 8K 지원, 12개의 스피커 및 공간 보정 기능을 갖춘 Flexus Core 300 플래그십 사운드바 공개 Sep 05, 2024 am 10:16 AM

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

HTML 테이블 레이아웃 HTML 테이블 레이아웃 Sep 04, 2024 pm 04:54 PM

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

HTML 정렬 목록 HTML 정렬 목록 Sep 04, 2024 pm 04:43 PM

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

HTML에서 텍스트 이동 HTML에서 텍스트 이동 Sep 04, 2024 pm 04:45 PM

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

HTML 입력 자리 표시자 HTML 입력 자리 표시자 Sep 04, 2024 pm 04:54 PM

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

See all articles