간단 사용방법은 아래와 같습니다. 비디오 영상을 별도의 데이터베이스를 통해서 삽입할 필요 없이, 외부 주소값을 불러와서 아래의 요소로 적용시킬 수 있습니다.
<video width="860px" autoplay><source src="영상주소" type="video/mp4"></video>
- Autoplay 부울(boolean) 속성. 이 값이 설정되면, 데이터 로딩이 완료되지 않더라도 재생 가능한 시점에 자동으로 재생이 시작됩니다.
- Buffered 미디어의 어느 시간대가 버퍼에 들어 있는지 확인할 수 있는 속성입니다. 이 속성은 TimeRanges 객체를 포함합니다.
- Controls 이 속성이 존재하면, 소리 조절(volume), 동영상 탐색(seek), 일시 정지(pause)/재시작(resume)을 할 수 있는 컨트롤러를 제공합니다.
- Height 비디오의 출력 영역 높이이며, CSS 픽셀 단위 입니다.
- Loop 부울(boolean) 속성, 이 값이 설정되면, 동영상 재생이 마친 후(동영상의 마지막에 도달하면) 자동으로 처음으로 돌아갑니다.
- Muted 비디오에 포함되어 있는 오디오의 기본 설정을 나타내는 부울 속성입니다. 설정하면 오디오가 나오지 않습니다. 기본 값은 false이며 이는 비디오가 재생되면 오디오도 같이 재생됨을 의미합니다.
- Played 재생된 동영상 영역을 나타내는 TimeRanges 객체 입니다.
- Preload 이 속성은 저작자가 생각하는 가장 좋은 사용자 경험이 어떠한 것인지 브라우저에 미리 정보를 알려주는 용도록 사용됩니다. 다음 값들 중 하나를 가질 수 있습니다.
- None 작자가 생각하기에 사용자가 비디오를 보지 않거나 서버가 최소한의 트래픽을 유지하고자 함을 의미합니다. 다시 말해서 비디오가 캐시되지 않아야 함을 의미합니다.
- Metadata 저작자가 생각하기에 사용자가 비디오를 보지 않을 수도 있지만 메타데이터(예를 들어서 길이)를 미리 가져오는 것은 합리적임을 의미합니다.
- Auto 사용자가 우선순위를 가지고 있음을 의미합니다. 다시 말해서 사용자가 이를 사용하지 않을 지라도 필요하다면 전체 비디오가 다운로드 될 수 있음을 의미합니다.
빈 문자열: auto 와 동일합니다.
스펙에서는 기본값으로 metadata를 권장하지만 설정하지 않았다면 각 브라우저가 정한 기본값을 설정하게 됩니다. - Poster 사용자가 동영상을 재생하거나 탐색하기 전까지 출력되는 포스터 프레임 주소입니다. 이 속성이 명시되지 않으면, 첫 번째 프레임이 사용 가능하게 될때까지 아무것도 출력되지 않다가, 가능하게 되면 첫 번째 프레임을 포스터 프레임으로 출력합니다.
- Src 삽입(embed)할 동영상의 주소(url)입니다. 이 속성은 선택 사항으로, 비디오 블록 내의 요소를 사용하여 삽입할 동영상을 명시할 수도 있습니다.
- Width 비디오의 출력 영역 너비이며, CSS 픽셀 단위입니다.
'Web Design > Programming' 카테고리의 다른 글
모던 JavaScript 튜토리얼 (0) | 2020.08.26 |
---|---|
어떤 사이트의 개발칼럼 (0) | 2020.08.26 |
프로그래밍 공부를 위한 사이트 PoiemaWeb(중급자용) (0) | 2020.07.14 |
소프트웨어의 제작과 배포 그리고 프로그래밍 (0) | 2020.04.19 |
HTTP → HTTPS 리다이렉션 전환(.htaccess) (0) | 2020.03.27 |
리디렉션(리다이렉션) 하는 자바스크립트 코드 (도메인 변경 또는 이벤트 페이지 이동) (1) | 2019.10.28 |
배경음악 다는 방법(티스토리 배경음악, 자동재생, Audio 태그) (0) | 2019.10.28 |
캡챠(captcha) 풀어주는 API 제공 사이트 (0) | 2019.10.14 |