HTML5 비디오 재생 데모_html5 튜토리얼 기술에서 비디오를 표시하는 방법은 무엇입니까?

오늘날 대부분의 비디오는 Flash와 같은 플러그인을 통해 표시됩니다. 그러나 모든 브라우저에 동일한 플러그인이 있는 것은 아닙니다.

HTML5는 video 요소를 통해 비디오를 포함하는 표준 방법을 지정합니다.
HTML5에서 비디오 요소는 현재 세 가지 형식의 비디오 파일을 지원합니다.
1.Ogg = Theora 비디오 인코딩 및 Vorbis 오디오 인코딩이 포함된 Ogg 파일
2.MPEG4 = H.264 비디오가 포함된 MPEG 4 파일 인코딩 및 AAC 오디오 인코딩
3.WebM = VP8 비디오 인코딩 및 Vorbis 오디오 인코딩이 포함된 WebM 파일

그럼 HTML5에서 비디오를 표시하는 방법은 무엇입니까? 예시는 다음과 같습니다.

코드 복사

코드는 다음과 같습니다.

이제 video 요소의 각 속성에 대한 설명을 하겠습니다. 이름에서 알 수 있듯이 컨트롤에 대해서는 주로 설명하지 않겠습니다. , 하하, 동영상 재생, 볼륨, 일시정지 컨트롤입니다. 똑똑하다면, 비디오 요소 중간에 삽입된 한자는 사용자의 브라우저가 비디오 형식의 사용을 지원하지 않는다는 것을 상기시키는 것임을 알아야 합니다.

Safari 브라우저에 적합한지 확인하려면 동영상 파일이 MP4 형식이어야 합니다. ogg 형식의 비디오는 Firefox, Opera 및 Chrome 브라우저에 적합합니다. Internet Explorer 8은 비디오 요소를 지원하지 않습니다. IE 9에서는 MPEG4를 사용하는 비디오 요소가 지원됩니다.

물론, 우리 브라우저가 어떤 비디오 포맷을 지원하는지 확실하지 않다면 먼저 확인해 볼 수 있습니다. 관심이 있는 경우에는 다른 블로그 게시물에서 확인하실 수 있습니다. 귀찮게 하고 싶지 않다면 어떻게 해야 하나요? 이렇게 할 수 있습니다.

코드 복사

코드는 다음과 같습니다.

동영상 요소는 여러 소스 요소를 허용합니다. 소스 요소는 다양한 비디오 파일을 연결할 수 있습니다. 브라우저는 첫 번째로 인식되는 형식을 사용하므로 다양한 형식의 비디오를 몇 개만 더 준비하면 됩니다.
다음으로 여러 비디오 태그의 속성을 소개하겠습니다.
1.autoplay: 이 속성이 나타나면 비디오가 준비되면 자동으로 재생된다는 의미입니다. 사용법: autoplay="autoplay"
2. 컨트롤: 이 속성의 모양은 재생 버튼 등과 같은 컨트롤을 사용자에게 표시하는 것을 의미합니다. 사용법:controls="controls"
3.height: 높이 설정
4.width: 너비 설정
5.loop: 자동 재생, 사용법: loop="loop"
6.preload: 페이지가 로드되면 비디오가 로드되고 재생할 준비가 됩니다. 사용법: preload="auto"
auto - 전체 로드 페이지가 로드될 때 비디오
meta - 페이지가 로드된 후에만 메타데이터를 로드할 때
none - 페이지가 로드된 후에 비디오를 로드하지 않음
참고: 자동 재생이 사용되는 경우 사전 로드는 무시됩니다.
7.src: 재생할 영상의 URL