audio/video Chapter 3 Part 1 이 서식 파일은 그룹 환경에서 교육 자료를 프레젠테이션할 때 시작 파일로 사용할 수 있습니다. 구역 구역을 추가하려면 슬라이드를 마우스 오른쪽 단추로 클릭하십시오. 구역을 사용하면 슬라이드를 쉽게 구성할 수 있으며, 여러 작성자가 원활하게 협력하여 슬라이드를 작성할 수 있습니다. 메모 설명을 제공하거나 청중에게 자세한 내용을 알릴 때 메모를 사용합니다. 프레젠테이션하는 동안 프레젠테이션 보기에서 이러한 메모를 볼 수 있습니다. 글꼴 크기에 주의(접근성, 가시성, 비디오 테이프 작성, 온라인 재생 등에 중요함) 배색 그래프, 차트 및 텍스트 상자에 특히 주의를 기울이십시오. 참석자가 흑백이나 회색조로 인쇄할 경우를 고려해야 합니다. 테스트로 인쇄하여 흑백이나 회색조로 인쇄해도 색에 문제가 없는지 확인하십시오. 그래픽, 테이블 및 그래프 간결하게 유지하십시오. 가능한 일관되고 혼란스럽지 않은 스타일과 색을 사용하는 것이 좋습니다. 모든 그래프와 표에 레이블을 추가합니다. Chapter 3 Part 1
웹브라우저와 멀티미디어 예전 방법: HTML 안에서는 <embed>나 <object> 태그를 사용하여야 했고 웹브라우저에는 플래시나 ActiveX를 설치 HTML5: <audio>와 <video> 태그가 추가
음악 삽입하기- <audio> 태그 속성: 필요시 추가/삭제 가능 src: 음원 파일 주소 autoplay: 문서가 열릴 때 자동 재생 controls: 제어기 표시 loop: 무한 반복 <audio src=“음원이름” autoplay controls loop>
음악 재생 <!doctype html> <html> <body> <img src="media/younha.jpg"> <br> <audio src="media/Younha-Waiting.mp3" autoplay controls> </body> </html>
음악 재생 - /practice/0320/audio.html 이미지와 음악 파일을 링크로 연결 <!doctype html> <html> <body> <img src=“http://cslab2.kku.ac.kr/~sunwoo/test/younha.jpg”> <p> <audio src=http://cslab2.kku.ac.kr/~sunwoo/test/Younha-Waiting.mp3> </body> </html>
실행 결과
웹브라우저와 Audio 형식 Browser MP3 Wav Ogg Internet Explorer YES NO Chrome Firefox Safari Opera
오디오 파일 형식 MP3 – 'MPEG-1 Audio Layer-3'의 약자로 MPEG기술의 음성 압축 기술 Wav - 윈도우에서 사용되는 표준 사운드 포맷 Ogg - mp3 대안으로 개발된 사운드 포맷으로 디지털 오디오 포맷의 특허권을 반대하고 보다 좋은 음질을 위하여 오픈소스로 개발되었음.
동영상 삽입하기 - <video> 태그 속성: 필요시 추가/삭제 가능 src: 동영상 파일 주소 autoplay: 문서가 열릴 때 자동 재생 controls: 제어기 표시 loop: 무한 반복 width, height: 동영상 크기 지정 <video src=“음원이름” autoplay controls loop width=값 height=값>
동영사 재생 - /practice/0320/video.html 동영상 파일을 링크로 연결 <!doctype html> <html> <body> <video src="http://cslab2.kku.ac.kr/~sunwoo/test/Wildlife.mp4" controls autoplay loop width=600 height=400> </body> </html>
결과
웹브라우저와 video 형식 Browser MP4 WebM Ogg Internet Explorer YES NO Chrome Firefox YES from Firefox 21 from Firefox 30 for Linux Safari Opera YES From Opera 25
video 형식 MP4 = MPEG 4 files with H264 video codec and AAC audio codec WebM = WebM files with VP8 video codec and Vorbis audio codec Ogg = Ogg files with Theora video codec and Vorbis audio codec
music box 예제 다음 링크를 클릭!!! HTML + CSS + Javascript로 만드는 music box http://cslab2.kku.ac.kr/~sunwoo/classroom/2017-1/web/top_secret/music_box.html
Q&A Have a nice day!!!