html5의 비디오(video) 요소 분석

본 글에서 공유한 내용은 HTML5의 비디오(동영상) 요소에 대한 내용으로, 참고할만한 가치가 있으니 도움이 필요한 분들에게 도움이 되었으면 좋겠습니다.

html5 비디오 배경 사용하기

지금까지는 웹 페이지에 비디오를 표시하는 것을 목표로 하는 표준이 없었습니다. 오늘날 대부분의 비디오는 Flash와 같은 플러그인을 통해 표시됩니다. 그러나 모든 브라우저에 동일한 플러그인이 있는 것은 아닙니다. HTML5는 비디오 요소를 통해 비디오를 포함하는 표준 방법을 지정합니다.

브라우저에서 지원되는 비디오 형식

현재 비디오 요소는 Ogg, MPEG4 및 WebM의 세 가지 비디오 형식을 지원합니다. 이 세 가지 형식에 대한 브라우저 지원은 다음과 같습니다.

Formats	IE	Firefox	Opera	Chrome	Safari
Ogg	아니요	3.5+	10.5+	5.0+	아니요
MPEG 4	9.0+	아니요	아니요	5.0+	3.0+
WebM	아니요	4.0+	10.6+	6.0 +	No

Ogg 형식은 Theora 비디오 인코딩과 Vorbis 오디오 인코딩이 적용된 Ogg 파일이고, MPEG4 형식은 H.264 비디오 인코딩과 AAC 오디오 인코딩이 적용된 MPEG 4 파일입니다. mp4 형식이 이 형식에 속하며 WebM 형식은 VP8 비디오 인코딩과 Vorbis 오디오 인코딩이 적용된 WebM 파일입니다.

비디오 요소를 사용하여 비디오 재생 구현

비디오 요소의 컨트롤 속성은 재생, 일시 정지 및 볼륨 컨트롤을 추가하는 데 사용됩니다.

<video controls=" controls">
<source src="../videoAudio/1.mp4" type="audio/mp4"></source>
<source src="../videoAudio/1.ogg" type="audio/ogg"></source>
该浏览器不支持该格式的视频播放
</video>

Dom을 사용하여 비디오를 작동합니다.

사용자 정의 버튼을 사용하여 컨트롤 속성의 재생, 일시 중지 및 비디오 크기 제어를 구현합니다.

<video id="view">
<source src="../videoAudio/1.mp4" type="audio/mp4"></source><!--播放多个格式的视频-->
<source src="../videoAudio/1.ogg" type="audio/ogg"></source>
该浏览器不支持视频格式
</video>
<button onclick="play()">停止/开始</button><button onclick="toSmall()">缩小</button> <button onclick="toBig()">放大</button>
<script>
var v =document.getElementById("view");
function play(){
if(v.paused){
v.play();//播放
} else{
v.pause();//停止
}
}
function toSmall(){
v.width=300;
v.height=300;
}
function toBig(){
v.width=500;
v.height=500;
}
</script>

비디오 형식 변환(MP4 형식을 ogg 형식으로 변환)

1. 먼저 ffmpeg를 다운로드하고 URL www.ffmpeg.org(오픈 소스 URL)를 입력한 후 windows 버전의 파일을 다운로드합니다.

2. ffmpeg 압축 파일의 압축을 풀고(예: ffmpeg-20180803-5aeb3b0-win32-static.zip) ffmpegbin 디렉터리(G: mydeveloperapplicationhbuilderhtml5ffmpeg-20180803-5aeb3b0-win32-staticbin)에 경로를 추가합니다. 환경변수 경로.

3. 환경 변수를 설정한 후 DOS 명령 형식에 ffmpeg를 입력하여 실행 가능한지 테스트합니다.

4 DOS 명령 창에서 mp4 비디오 파일이 있는 디렉터리로 전환하고 마지막으로 ffmpeg -i 1.mp4 -acodec libvorbis 1.ogg를 입력합니다(여기서는 1.mp4를 1.ogg로 바꿉니다).

5.ffmpeg 자세한 명령.

추천 관련 기사:

HTML5와 Internet+를 결합하여 3D 터널 구현(코드 포함)

H5의 캔버스, 드래그 앤 드롭 이벤트, 오디오 및 비디오의 코드 예시

위 내용은 html5의 비디오(video) 요소 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!