오늘 친구가 나에게 물었습니다. 내가 녹화한 MP4 비디오를 로컬에서는 재생할 수 있지만 진행률 표시줄만 표시되고 이미지는 표시되지 않는 html5의 비디오 멀티미디어 재생 태그를 사용하여 정상적으로 재생할 수 없는 이유는 무엇입니까? 당시에는 video 태그를 이용해 MP4 영상을 재생할 수 있는지도 궁금했는데, 결국 우리는 좋은 친구여서 문제를 직접 확인하러 갔다는 결론이 나왔습니다. 실제로는 영상 인코딩 문제입니다. 형식은 모두 MP4인데 HTML은 H.264 인코딩 형식만 지원하므로 인코딩을 다시 변환할 수밖에 없습니다.
모든 사람이 같은 문제에 직면하지 않도록 하기 위해 <video> 태그에 대한 HTML5에 대한 몇 가지 지식을 알려드리겠습니다.
<video>이 나타나기 때문에 이 두 가지 방법이 매우 불편합니다. let 멀티미디어 파일을 웹 페이지에서 쉽게 재생할 수 있습니다.
코드는 훨씬 적지만 기능은 매우 탄탄합니다. HTML5 Bar의 하이라이트!
<video> 태그가 지원하는 비디오 형식 및 인코딩 정보:
MP4 = H264 비디오 코덱 및 AAC를 사용하는 MPEG 4 파일오디오 코덱
WebM = WebM 파일은 VP8 비디오 코덱과 Vorbis 오디오 코덱을 사용합니다.
Ogg = Ogg 파일은 Theora 비디오 코덱과 Vorbis 오디오 코덱을 사용합니다.
위 정보를 통해 h264로 인코딩된 MP4 비디오(MPEG-LA 회사), VP8로 인코딩된 webm 형식 비디오(Google 회사) 및 Theora로 인코딩된 ogg 형식 비디오만 있음을 알 수 있습니다. (iTouch 개발)은 html5 <video> 태그를 지원할 수 있습니다.
예를 들어 IE 브라우저 및 이전 버전의 브라우저는 HTML5를 잘 지원하지 않습니다. 이러한 브라우저를 사용하여 동영상이 포함된 웹페이지를 열려면 어떻게 해야 합니까?
다음과 같은 코드를 작성할 수 있습니다:
이렇게 하면 HTML5를 지원하지 않는 브라우저에서는 "귀하의 브라우저는 이 영상 재생을 지원하지 않습니다!"라는 메시지가 뜹니다!
동영상 요소는 여러 소스 요소를 허용합니다. 소스 요소는 다양한 비디오 파일을 연결할 수 있습니다. 브라우저는 첫 번째로 인식되는 형식을 사용하므로 다양한 형식의 비디오를 몇 개만 더 준비하면 됩니다.
사용법:
<동영상 너비="500" 높이="250"controls="controls">
귀하의 브라우저가 이 비디오 형식을 지원하지 않습니다.
autoplay: 이 속성이 있으면 준비가 되면 동영상이 자동으로 재생됩니다. 사용법: autoplay="autoplay"
controls :이 속성이 발생하면 재생버튼 등과 같은 컨트롤이 사용자에게 표시된다는 의미입니다. 사용법:controls="controls"
높이: 설정 높이 너비: 너비 설정
loop: 자동 재생, 사용법: loop="loop"
preload: 페이지가 로드될 때 비디오가 로드됩니다. 재생 준비, 사용법: preload="auto" - 페이지가 로드될 때 전체 비디오를 로드합니다. preload="meta" - 페이지가 로드된 후에만 메타데이터를 로드합니다. 없음" - 페이지가 비디오를 로드할 때 로드되지 않습니다. <동영상 태그를 소개하겠습니다. 이미 이 태그에 대해 깊이 이해하고 계시리라 믿습니다! [관련 추천]
3.
브라우저에서 H5의 비디오 태그 호환성을 높이는 방법을 가르쳐주세요비디오 표시 표준을 자세히 설명합니다. HTML5위 내용은 H5 웹 페이지의 video 태그에 있는 MP4 동영상이 재생되지 않는 이유를 분석합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
