HTML 웹 페이지에 비디오를 삽입하는 방법 요약-HTML 튜토리얼-php.cn

이 글은 주로 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" src="http://www.php.cn/images/first.mp4" poster="http://www.php.cn/images/first.png" autoplay="autoplay"></video>

로그인 후 복사

(2) preload 속성

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

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

로그인 후 복사

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

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

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

(3) autoplay attribute

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

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

로그인 후 복사

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

(4) 루프 속성

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

로그인 후 복사

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

(5) 컨트롤 속성

<video width="658"
 height="444" src="http://www.php.cn/images/first.mp4" poster="http://www.php.cn/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.php.cn/images/first.png" autoplay="autoplay" preload="none" controls="controls"><source src="http://www.php.cn/images/first.ogv"
 /><source src="http://www.php.cn/images/first.ogg"
 /></video>

로그인 후 복사

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

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

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

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

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

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