비디오: (유료 강의) 부트스트랩 4와 함께하는 웹 디자인 마스터 코스 - 강의 및 강사 소개 (Bootstrap 4 Web Design Tutorial) 2024
간단히 말하면, 두 가지 기본 미디어 요소 HTML5 용으로, 모두 불합리하게 사용하기 쉽습니다. video 요소의 이름이 지정되고 audio 요소의 이름이 지정됩니다.
화면에 실제 공간이 많이 필요하지 않은 오디오와 달리 비디오에는 화면 프레임이 필요하고 더 정교하고 더 많은 컨트롤이 필요합니다. 두 가지 마크 업 요소는 비슷하지만 요소의 기본 구조가 동일하더라도
controls >> Alternatives 여기서 src 속성은 재생하고 싶은 비디오 파일을 가리 킵니다. 재생할 비디오 객체 파일의 이름을 지정하며 유효한 URI 여야합니다. 예: src = "video. ogg ".
비디오의 컨트롤 속성 목록은 상당히 길고 복잡합니다.
자동 재생: 오브젝트 파일이로드되는 즉시 브라우저에서 비디오 재생을 시작하도록 지시합니다. 예: 자동 재생 또는 자동 재생 = "자동 재생"
-
-
height: 동영상이 표시 될 상자의 높이 (픽셀 단위)를 설정합니다. 예: height = "480".
-
loop: 브라우저가 처음으로 돌아가서 객체 파일의 끝까지 올 때 계속 재생하도록 지시합니다. 예: loop 또는 loop = "loop".
-
! - 3 ->
mediagroup: 여러 비디오 또는 미디어 요소 (수화 트랙 또는 SAP 트랙)의 재생을 동기화하는 데 사용됩니다. 동일한 mediagroup 값을 가진 모든 항목이 처리되는 문자열 값을 사용합니다. 예: mediagroup = "movie". -
음소거: 재생할 오디오 출력 상태를 설정합니다 (있는 경우). 재생이 시작되면 오디오가 음소거됩니다. 예: 음소거 또는 음소거 = "음소거"
-
포스터: 비디오 파일을 사용할 수없는 동안 표시 할 이미지를 지정합니다 (아직로드하지 않은 경우). 예: 포스터 = "poster. jpg".
-
preload: 브라우저에 객체 파일을 미리 불러 와야하는지 여부를 알려주고 만약 그렇다면 미리로드하는 방법을 알려줍니다. 값은 다음과 같습니다.
-
없음: 페이지가로드 될 때 비디오 파일의 일부를로드하지 않습니다.
-
metadata: 페이지가로드 될 때 비디오 메타 데이터 만로드합니다. 또한 재생을 설정하지만 아직 데이터가로드되어 있지 않습니다.
-
auto: 페이지가로드 될 때 전체 비디오 파일을로드합니다.
-
자동 실행이있는 경우 preload 속성이 무시됩니다.
너비: 비디오가 표시되는 상자의 너비를 픽셀 단위로 설정합니다. 예: width = "640".
-
-
다음 마크 업은 Wikipedia의 비디오 조각을 표시합니다.
브라우저가 HTML5 비디오를 지원하지 않으며 대체 재생이 제공됩니다.
그림은 제대로 구성된 HTML 파일 비디오의 재생이 끝난 직후에 Chrome에서 화면 상에 보이는 것과 같은 추가 텍스트와 정보가 나타납니다. "비디오의 컨트롤 막대는 오디오의 컨트롤 막대와 거의 동일합니다.
차이점은 비디오 컨트롤 막대에는 프레임이 있습니다 오른쪽 끝의 컨트롤. 비디오 재생을위한 대안은 오디오 피드백과 동일하게 작동하므로 선호하는 플레이어를 먼저 쌓아 HTML5 브라우저에서 사용할 수 있으면 사용할 수 있으면 스택하고 다른 플레이어는 선호하는 순서대로 쌓을 수 있습니다.