HTML 웹페이지에 비디오를 삽입하는 방법

이제 페이지에서 비디오 태그를 사용하려면 Ogg Theora 또는 VP8을 지원하는 상황(아무 일도 일어나지 않는 경우)(Opera, Mozilla, Chrome)과 H. 264(Safari, IE 9, Chrome)는 지원되지 않습니다(IE6, 7, 8). 자, 이제 비디오 태그의 사용, 미디어 속성 및 비디오 개체에서 사용할 수 있는 메서드, 미디어 이벤트를 포함하여 기술 수준에서 HTML 5 비디오를 이해해 보겠습니다.

비디오 태그 사용

비디오 태그에는 src, 포스터, 프리로드, 자동 재생, 루프, 컨트롤, 너비, 높이 등과 같은 여러 속성과 내부에서 사용되는 태그 가 포함되어 있습니다. Video 태그에는 태그 외에도 지정된 동영상을 재생할 수 없을 때 반환되는 콘텐츠가 포함될 수도 있습니다.

(1) src 속성과 포스터 속성

src 속성이 어떤 용도로 사용되는지 짐작할 수 있습니다. 태그와 마찬가지로 이 속성은 동영상의 주소를 지정하는 데 사용됩니다. 포스터 속성은 현재 비디오 데이터가 유효하지 않을 때 표시할 사진(미리보기 사진)을 지정하는 데 사용됩니다. 잘못된 비디오 데이터는 비디오가 로드 중이거나 비디오 주소가 정확하지 않을 수 있음을 의미할 수 있습니다.

<video width="658"
 height="444"  poster="http://www.youname.com/images/first.png" autoplay="autoplay"></video>

(2) preload 속성

이 속성은 이름으로도 이해할 수 있습니다. 이 속성은 동영상이 미리 로드되는지 여부를 정의하는 데 사용됩니다. 속성에는 없음, 메타데이터 및 자동이라는 세 가지 선택적 값이 있습니다. 이 속성을 사용하지 않는 경우 기본값은 auto입니다.

<video width="658"
 height="444" src="http://www.youname.com/images/first.mp4" poster="http://www.youname.com/images/first.png" autoplay="autoplay" preload="none"></video>

None: 사전 로드가 없습니다. 이 속성 값을 사용하면 페이지 작성자가 사용자가 이 비디오를 기대하지 않는다고 믿거나 HTTP 요청을 줄일 수 있습니다.

메타데이터: 부분적으로 사전 로드됨. 이 속성 값을 사용한다는 것은 페이지 작성자가 사용자가 이 비디오를 기대하지 않는다고 생각하지만 사용자에게 일부 메타데이터(크기, 첫 번째 프레임, 트랙 목록, 재생 시간 등 포함)를 제공한다는 의미입니다.

자동: 모두 사전 로드되어 있습니다.

(3) autoplay attribute

은 이름을 보면 용도를 알 수 있는 또 다른 속성입니다. Autoplay 속성은 비디오의 자동 재생 여부를 설정하는 데 사용됩니다. 이는 Boolean 속성입니다. 표시되면 자동 재생을 의미하며, 제거되면 자동 재생이 되지 않음을 의미합니다.

<video width="658"
 height="444" src="http://www.youname.com/images/first.mp4" poster="http://www.youname.com/images/first.png" autoplay="autoplay" preload="none"></video>

HTML의 부울 속성 값은 참과 거짓이 아니라는 점에 유의하세요. 올바른 사용법은 태그에서 이 속성을 사용하여 true를 나타내는 것입니다. 이때 속성에는 값이 없거나 해당 값이 해당 이름과 같습니다(여기서 자동 재생은 또는 ); 태그에 이 속성을 사용하지 않는 것은 false를 의미합니다(여기서 자동 재생되지 않는 것은 입니다).

(4) 루프 속성

<video width="658"
 height="444" src="http://www.youname.com/images/first.mp4" poster="http://www.youname.com/images/first.png" autoplay="autoplay" loop="loop"></video>

은 한눈에 알 수 있습니다. 루프 속성은 동영상을 반복 재생할지 여부를 지정하는 데 사용되는 속성이기도 합니다.

(5) 컨트롤 속성

<video width="658"
 height="444" src="http://www.youname.com/images/first.mp4" poster="http://www.youname.com/images/first.png" autoplay="autoplay" preload="none" controls="controls"></video>

Controls 속성은 페이지 작성자가 재생 컨트롤러를 생성하기 위해 스크립트를 사용하지 않았으며 브라우저가 자체 재생 컨트롤 막대를 활성화해야 함을 브라우저에 나타내는 데 사용됩니다.

컨트롤 바에는 재생 및 일시 정지 제어, 재생 진행률 제어, 볼륨 제어 등이 포함되어야 합니다.

각 브라우저의 기본 재생 제어 표시줄은 인터페이스에서 다릅니다. 내 브라우저의 이상한 문제로 인해 Firefox와 Safari의 비디오 태그가 제대로 작동하지 않아서 온라인에서 이 두 가지의 스크린샷만 찾을 수 있습니다.

(6) width 속성과 height 속성

은 태그의 공통 속성이므로 당연합니다.

(7) source tag

<video width="658"
 height="444" poster="http://www.youname.com/images/first.png" autoplay="autoplay" preload="none" controls="controls"><source src="http://www.youname.com/images/first.ogv"
 /><source src="http://www.youname.com/images/first.ogg"
 /></video>

Source 태그는 미디어에 대해 선택 가능한 여러 항목을 지정하는 데 사용됩니다(오디오 태그에도 이 태그가 포함될 수 있으므로 여기에서는 비디오 대신 미디어가 사용됨)(브라우저에서는 하나만 선택할 수 있음) 끝) 파일 주소이며, 미디어 태그가 src 속성을 사용하지 않는 경우에만 사용할 수 있습니다.

브라우저는 태그에 지정된 동영상이 소스 태그 순서대로 재생 가능한지 확인합니다(동영상 형식이 지원되지 않거나, 동영상이 존재하지 않는 경우 등일 수 있음). 다음 것으로 교체하세요. 이 방법은 주로 다른 브라우저와 호환되는 데 사용됩니다. Source 태그 자체는 아무 의미가 없으며 단독으로 나타날 수 없습니다.

이 태그에는 src, type 및 media의 세 가지 속성이 포함되어 있습니다.

src 속성: 비디오 태그와 동일하게 미디어의 주소를 지정하는 데 사용됩니다.

Type 속성: src 속성으로 지정된 미디어 유형을 설명하는 데 사용되며, 미디어를 가져오기 전에 브라우저가 이 미디어 형식 범주를 지원하는지 여부를 결정하는 데 도움이 됩니다.

Media 속성: 미디어가 사용되는 미디어를 설명하는 데 사용됩니다. 설정하지 않으면 기본값은 all이며 모든 미디어가 지원됨을 나타냅니다.

(8) 전체 예

<video width="658"
 height="444" poster="http://www.youname.com/images/first.png" autoplay="autoplay" preload="none" controls="controls"><source src="http://www.youname.com/images/first.ogv"
 /><source src="http://www.youname.com/images/first.ogg"
 /></video>

이 코드는 페이지의 비디오를 정의합니다. 이 비디오의 미리 보기 이미지는 포스터의 속성 값이며 브라우저의 기본 미디어 제어 막대를 표시하고 비디오의 메타데이터를 미리 로드합니다. 너비 900픽셀, 높이 240픽셀의 루프를 재생합니다.

첫 번째로 선택한 비디오 주소는 첫 번째 소스 태그의 src 속성 값이고, 비디오 카테고리는 Ogg video, 비디오 코덱은 Theora, 오디오 코덱은 Vorbis, 재생 매체는 두 번째로 선택한 비디오 주소입니다. 자세한 내용은 없습니다. IE와 계속 호환되길 원한다면 마지막 소스 태그 뒤에 Flash 플레이어 태그 세트를 추가하거나 약간의 JavaScript 코드를 사용할 수 있습니다.

이 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

관련 읽기:

H5에서 그림 공백 해결 방법

HTML5 단일 페이지 제스처 슬라이딩 화면 전환 구현 방법

H5에서 달력 확인 기능 만드는 방법

위 내용은 HTML 웹페이지에 비디오를 삽입하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!