HTML5가 출시되기 전에는 Flash나 타사 도구를 사용하여 온라인 오디오 및 비디오를 구현했지만 이제 HTML5에서도 이 기능을 지원합니다. HTML5를 지원하는 브라우저에서는 플러그인을 설치하지 않고도 오디오와 비디오를 재생할 수 있습니다. 오디오 및 비디오에 대한 기본 지원은 HTML5에 엄청난 개발 잠재력을 부여합니다.
HTML에 오디오 임베딩(기존 방법): 이 방법을 구현할 수는 있지만 브라우저에서 Flash를 지원해야 하고 제어할 수 없어 구현하기가 매우 번거롭습니다.
<객체 높이=200 너비=200 데이터=2_1.swf ></object><embed src=2_1.mp4 type=>
즉, HTML5에는 호환성이라는 큰 문제가 있다는 뜻입니다. 오디오
HTML5에서 지원되는 오디오 형식: 동영상비디오 형식:
위에서 보면 HTML5는 몇 가지 형식을 지원하는 것으로 보이므로 HTML5를 사용할 때 오디오와 비디오가 표시되지 않는 경우 해당 형식이 지원되지 않는 문제일 것입니다. 참고: MP4에는 mpg4(xdiv), mpg4(xvid), avc(h264)의 3가지 인코딩이 있습니다. h264만 MP4 표준 인코딩으로 인식됩니다. (나도 여기에 속았습니다. 다른 형식에는 사운드만 있고 이미지는 없습니다.) 이런 종류의 문제가 발생하면 비디오 형식 변환기를 사용하여 형식을 변환하면 괜찮을 것입니다.
오디오는 구현하기가 매우 간단합니다. 여기의 도구 모음은 브라우저의 기본 도구 모음을 사용합니다.
<audio src=htmls/1.mp3controls=controls loop=loop preload=auto >브라우저가 비디오 요소를 지원하지 않습니다</audio>
동영상의 경우 브라우저 기본값을 사용할 수 있지만 비공개 사용자 정의는 불가능하므로 기술적인 측면에서 기능을 구현하기 위한 자체 도구를 만드는 방법을 배워야 합니다(오디오도 이 방법을 참조할 수 있음).
audioVideo.html
<!DOCTYPE html><html><head><meta charset=UTF-8><title>웹페이지에 비디오 배치</title><style type=text/css></style><script type=text/javascript src= js/ControlBar.js></script></head><body><audio src=htmls/1.mp3 Controls=controls loop=loop preload=auto >브라우저가 비디오 요소를 지원하지 않습니다</audio><video id=myPlayer width=600 height=400 src=htmls/2_1.mp4controls=controls loop=loop Poster=3.jpg>브라우저가 오디오 요소를 지원하지 않습니다 <!-- MP4에는 mpg4(xdiv),,mpg4(xvid), avc(h264), 3가지 인코딩이 있습니다. h264만이 MP4 표준 인코딩으로 인식됩니다.--></video><div id=progress></div><!-- 볼륨 제어--><input id=volume type=range min=0 max=1 step = 0.1 onchange=Volume(this)><!-- 속도 및 시간 진행 정보--><span id=rate>1</span>fps <span id=info></span><button onclick=Play(this) id=btn1>재생</button><button onclick=Fast()>빨리 감기</button><button onclick=Slow()>느리게 감기</button><button onclick=Prev() >뒤로</button><button onclick=Next()>앞으로</button><button onclick=Mute(this)>음소거</button></body></html>
디스플레이(html)와 기능 구현(js)을 분리하여 외부에서 가져옵니다.
ControlBar.js
//스크립트를 사용하여 브라우저 태그 지원 감지 var support = !!document.createElement(audio).canPlayType;if (!support) {alert(브라우저가 이 비디오의 재생을 지원하지 않습니다);}//전역 비디오 객체 정의 var e1 = null;window.addEventListener(load, function() {e1 = document.getElementById(myPlayer);});/*앞으로: 1분*/function Next() {e1.currentTime+=10; //currentTime 속성 설정, 10초 빨리 감기}/*되감기: 1분*/function Prev() {e1.currentTime-=10; //currentTime 속성 설정, 10초 뒤로 이동}/ *재생/일시 중지*/기능 재생(e) {if(e1.paused){e1.play();document.getElementById(btn1).innerHTML=pause}else{e1.pause();document.getElementById(btn1).innerHTML=play}}/*천천히 앞으로: 1보다 작거나 같으면 매번 0.2씩 느려지고, 1보다 크면 매번 1씩 감소합니다. */function 느림(){if(e1.playbackRate<=1){e1.playbackRate-=0.2;}else{e1.playbackRate-=1;}document.getElementById(rate).innerHTML=fps2fps(e1.playbackRate);}/ *느린 앞으로: 1보다 작거나 같으면 매번 0.2씩 느려지고, 1보다 크면 매번 1씩 감소합니다. */function Fast(){if(e1.playbackRate<1){e1.playbackRate+=0.2;}else{e1.playbackRate+=1;}document.getElementById(rate).innerHTML=fps2fps(e1.playbackRate);}함수 fps2fps(fps ){if(fps<1){반환 fps.toFixed(1);}else{return fps;}}/*음소거*/함수 음소거(e){if(e1.muted){e1.muted=false;e.innerHRML=X;document.getElementById(volume).value=e1.volume;}else{e1.muted=true;e.innerHRML= x;document.getElementById(volume).value=0;}}/*볼륨 조정*/function Volume(e){if(e1.muted==true){e1.muted=false;}e1.volume=e.value;}/* 진행 정보: 진행 표시줄을 제어하고 진행 시간을 표시합니다*/함수 Progress( ) {var p1=document.getElementById(진행);p1.style.width=(e1.currentTime/e1.duration)*720+px;document.getElementById(info).innerHTML=s2time(e1.currentTime)+/+s2time(e1 .duration);}함수 s2time(s){var m=parseFloat(s/60).toFixed(0);s=parseFloat(s%60).toFixed(0);return (m<10? 0+m:m)+:+(s<10?0+ 봄 여름 시즌);}/* 웹 페이지가 로드된 후 비디오 객체의 timeupdate 이벤트에 진행률 처리 함수를 추가합니다*/window.addEventListener(load,function(){e1.addEventListener(timeupdate,Progress);});/*Add Progress to the window.onload 이벤트 처리 함수 */window.addEventListener(load,Progress);구현된 기능: 재생, 일시 정지, 빨리 감기, 느리게 감기, 앞으로, 뒤로, 볼륨 조절, 진행률 표시줄 및 시간 표시. 오디오나 비디오의 속성과 방법을 통해 보다 복잡한 기능을 구현할 수 있음을 알 수 있습니다.
위의 내용은 이 기사의 전체 내용입니다. 모든 분들의 학습에 도움이 되기를 바랍니다. 또한 모든 분들이 VeVb Wulin Network를 지지해 주시길 바랍니다.