이 글은 주로 HTML 웹페이지에 동영상을 삽입하는 방법을 요약해서 소개하고 있으니 필요하신 분들은 참고하시면 됩니다
이제 페이지에서 동영상 태그를 사용하려면 세 가지 상황을 고려해야 합니다. Ogg Theora 또는 VP8(만약 아무 문제가 없다면)(Opera, Mozilla, Chrome)은 H.264(Safari, IE 9, Chrome)를 지원하지만 지원하지 않습니다(IE6, 7, 8). 자, 이제 비디오 태그의 사용, 비디오 개체에서 사용할 수 있는 미디어 속성 및 메서드, 미디어 이벤트를 포함하여 기술 수준에서 HTML 5 비디오를 이해해 보겠습니다.
비디오 태그 사용
비디오 태그에는 src, 포스터, 프리로드, 자동 재생, 루프, 컨트롤, 너비, 높이 등과 같은 여러 속성과 내부에서 사용되는 태그
(1) src 속성과 포스터 속성
src 속성이 어떤 용도로 사용되는지 짐작할 수 있습니다. 태그와 마찬가지로 이 속성은 동영상의 주소를 지정하는 데 사용됩니다. 포스터 속성은 현재 비디오 데이터가 유효하지 않을 때 표시할 그림(미리보기 그림)을 지정하는 데 사용됩니다. 잘못된 비디오 데이터는 비디오가 로드 중이거나 비디오 주소가 정확하지 않을 수 있음을 의미할 수 있습니다.
<video width="658" height="444" src="//m.sbmmt.com/images/first.mp4" poster="//m.sbmmt.com/images/first.png" autoplay="autoplay"></video>
(2) preload 속성
이 속성은 이름으로도 이해할 수 있습니다. 이 속성은 동영상이 미리 로드되는지 여부를 정의하는 데 사용됩니다. 속성에는 없음, 메타데이터 및 자동이라는 세 가지 선택적 값이 있습니다. 이 속성을 사용하지 않는 경우 기본값은 auto입니다.
<video width="658" height="444" src="//m.sbmmt.com/images/first.mp4" poster="//m.sbmmt.com/images/first.png" autoplay="autoplay" preload="none"></video>
없음: 사전 로드가 없습니다. 이 속성 값을 사용하면 페이지 작성자가 사용자가 이 비디오를 기대하지 않는다고 믿거나 HTTP 요청을 줄일 수 있습니다.
메타데이터: 부분적으로 사전 로드됨. 이 속성 값을 사용한다는 것은 페이지 작성자가 사용자가 이 비디오를 기대하지 않는다고 생각하지만 사용자에게 일부 메타데이터(크기, 첫 번째 프레임, 트랙 목록, 재생 시간 등 포함)를 제공한다는 의미입니다.
자동: 모두 사전 로드되어 있습니다.
(3) autoplay attribute
은 이름을 보면 용도를 알 수 있는 또 다른 속성입니다. Autoplay 속성은 비디오의 자동 재생 여부를 설정하는 데 사용됩니다. 이는 Boolean 속성입니다. 표시되면 자동재생을 의미하며, 제거되면 자동재생이 되지 않는다는 의미입니다.
<video width="658" height="444" src="//m.sbmmt.com/images/first.mp4" poster="//m.sbmmt.com/images/first.png" autoplay="autoplay" preload="none"></video>
HTML의 부울 속성 값은 참과 거짓이 아니라는 점에 유의하세요. 올바른 사용법은 태그에서 이 속성을 사용하여 true를 나타내는 것입니다. 이때 속성에는 값이 없거나 해당 값이 해당 이름과 같습니다(여기서 자동 재생은 또는 ); 태그에 이 속성을 사용하지 않는 것은 false를 의미합니다(여기서 자동 재생되지 않는 것은 입니다).
(4) 루프 속성
<video width="658" height="444" src="//m.sbmmt.com/images/first.mp4" poster="//m.sbmmt.com/images/first.png" autoplay="autoplay" loop="loop"></video>
은 한눈에 알 수 있습니다. 루프 재생 여부를 지정하는 데 사용되는 부울 속성이기도 합니다.
(5) 컨트롤 속성
<video width="658" height="444" src="//m.sbmmt.com/images/first.mp4" poster="//m.sbmmt.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="//m.sbmmt.com/images/first.png" autoplay="autoplay" preload="none" controls="controls"><source src="//m.sbmmt.com/images/first.ogv" /><source src="//m.sbmmt.com/images/first.ogg" /></video>
Source 태그는 미디어에 대해 여러 선택 가능 항목을 지정하는 데 사용됩니다(오디오 태그에도 이 태그가 포함될 수 있으므로 여기서는 비디오 대신 미디어가 사용됩니다)(브라우저에서는 1) 파일 주소이며 미디어 태그가 src 속성을 사용하지 않는 경우에만 사용할 수 있습니다.
브라우저는 태그에 지정된 동영상이 소스 태그 순서대로 재생 가능한지 확인합니다(동영상 형식이 지원되지 않거나, 동영상이 존재하지 않는 경우 등일 수 있음). 다음 것으로 교체하세요. 이 방법은 주로 다른 브라우저와 호환되는 데 사용됩니다. Source 태그 자체는 아무 의미가 없으며 단독으로 나타날 수 없습니다.
이 태그에는 src, type 및 media의 세 가지 속성이 포함되어 있습니다.
src 속성: 비디오 태그와 동일하게 미디어의 주소를 지정하는 데 사용됩니다.
Type 속성: src 속성으로 지정된 미디어 유형을 설명하는 데 사용되며, 미디어를 가져오기 전에 브라우저가 이 미디어 형식 범주를 지원하는지 여부를 결정하는 데 도움이 됩니다.
Media 속성: 미디어가 사용되는 미디어를 설명하는 데 사용됩니다. 설정하지 않으면 기본값은 all이며 모든 미디어가 지원됨을 나타냅니다.
