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

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

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

이 기사의 디렉토리:

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

1단계: 태그 사용

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

코드 복사코드는 다음과 같습니다.

<동영상>

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

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

코드 복사코드는 다음과 같습니다.

<비디오 제어 src="http://www.w3cschool.cc/try/demo_source/mov_bbb. mp4" >

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

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

코드 복사코드는 다음과 같습니다.

<비디오 제어 자동 재생= true src= "http://www.w3cschool.cc/try/demo_source/mov_bbb.mp4">

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

코드 복사코드는 다음과 같습니다.

<비디오 제어 preload= "auto" src="http://www.w3cschool.cc/try/demo_source/mov_bbb.mp4">

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

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

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

코드 복사

코드는 다음과 같습니다.<비디오 제어 preload=" auto" 포스터="http://img0.ph.126.net/I10JqUUJDmlEtE_XYl4hOg==/6608842237655242020.jpg" width="640" height="264" src="http ://www.w3cschool.cc/try/dem_source/mov_bbb.mp4">

일반적으로 말하면, 지원 과정에서 플레이어는 지정된 크기를 가지므로 플레이어의 길이와 너비를 설정하면 스타일 시트를 사용할 수 있습니다. 내부 또는 너비 높이 속성을 통해 설정할 수 있습니다. 플레이어의 너비와 높이는 비디오의 비율에 따라 설정되어야 합니다. 그렇지 않으면 플레이어의 너비와 높이가 비디오의 픽셀을 초과하면 비디오가 공백이 됩니다. 흐릿한 늘어나는 효과가 나타나므로 너비를 설정할 때 높을 때 주의해야 하지만 먼저 너비나 높이만 설정하여 관찰한 다음

과 같은 정확한 픽셀을 얻을 수 있습니다.

코드 복사

코드는 다음과 같습니다.<비디오 제어 preload="auto" width=300 포스터="http://img0.ph.126.net/I10JqUUJDmlEtE_XYl4hOg==/6608842237655242020.jpg" src="http://www.w3cschool.cc/try/demo_source/mov_bbb.mp4">

너비를 설정한 후 브라우저 디버깅 도구에서 적응 높이가 165인 것을 확인하고 이때 높이를 165로 설정했습니다.

복사 코드

코드는 다음과 같습니다.

<비디오 제어 preload="auto" width=300 height=165 Poster="http://img0.ph .126.net/I10JqUUJDmlEtE_XYl4hOg==/6608842237655242020.jpg" src="http://www.w3cschool.cc/try/demo_source/mov_bbb.mp4">

요약: 이 네 단계를 통해 플레이어의 기본 설정과 사용을 완료할 수 있습니다. 가장 중요한 것은 플레이어의 일부 속성과 응용 프로그램을 JS를 통해 제어해야 한다는 것입니다.