HTML5 비디오 태그(플레이어) 학습 노트(1): 시작하기_html5 튜토리얼 기술

저는 최근 HTML5에서 비디오 태그(플레이어)를 사용하는 방법을 연구하고 있습니다. 다음은 여러분의 검토와 기록을 용이하게 하기 위한 몇 가지 연구 노트입니다. 이 문서는 첫 번째 문서이며 이 태그를 사용할 때 수행할 작업을 소개합니다. 초기화하세요.

실제로 w3cschool에 있는 튜토리얼이 가장 간단하고 상세하기 때문에 몇 가지 더 직접적인 응용 프로그램을 소개합니다.

이 기사의 디렉토리:

1. 태그 사용
2. 필요한 매개변수 추가
3. 자동으로 재생 또는 로드
4.

1단계: 태그 사용

사용 방법은 매우 간단합니다. 코드 한 줄이면 됩니다.

2단계: 동영상 재생 경로, 컨트롤 바 표시 여부 등 필요한 매개변수 추가

동영상을 재생하려면 동영상의 주소가 있어야 합니다. 이는 태그에 src 속성을 설정한다는 의미입니다. 처음에 사용자 정의 컨트롤 바를 만들 수 없다면 브라우저의 기본 컨트롤 바를 사용하여 컨트롤을 추가하면 다음과 같이 됩니다:

3단계: 동영상을 자동으로 재생하거나 로드하도록 허용

플레이어를 사용할 때 자주 해야 할 일 중 하나는 페이지가 로드되자마자 동영상 재생을 시작하는 것입니다. 그런 다음 동영상이 자동으로 재생되도록 설정하는 것, 즉 autoplay 속성을 설정해야 합니다.

일부 사용자 습관에 따라 자동 재생이 필요하지 않은 경우도 있지만 사용자가 동영상을 빠르게 보려면 동영상을 자동으로 로드해야 하며, 그런 다음 preload 속성을 설정해야 한다는 점에 유의해야 합니다. 완료되었습니다. 이 동영상을 로드하는 대신 첫 번째 부분만 로드됩니다.

4단계: 플레이어를 더욱 표준화

플레이어를 더욱 표준화한다는 것은 무엇을 의미하나요? 즉, 컨트롤바(이전에 소개한 바 있음)와 재생을 시작하기 전 보이는 화면, 그리고 플레이어의 크기를 지정하는 부분이 있습니다.

플레이어에서 동영상을 로딩하면 처음에 초기화 화면이 나오는데, 동영상 시작 부분에 볼 수 있는 영상에 대한 사진을 설정해야 하는 경우가 종종 있습니다(때때로 시청자의 관심을 끌기 위해, 영상과 관련이 거의 없는 사진이거나, 네트워크 문제로 인해 영상이 로딩되기 전에 시청자에게 검은색 화면이 표시되지 않는 경우에도 이와 같은 설정을 해줘야 합니다. 즉, 포스터 속성을 설정합니다. 사용 가능:

코드 복사

코드 복사