BGM 삽입

HTML4 미디어 재생 태그 : embed, object

HTML5 미디어 재생 태그 : audio, video

<audio src="bgm.mp3" controls="false" autoplay="true" loop="" preload="auto" type="audio/mp3"></audio></div>

<audio autoplay="autoplay" loop="loop" controls="controls">

<source src="bgm.mp3" type="audio/mpeg" />

</audio>

<audio autoplay controls>

<source src="bgm.mp3" type="audio/mp3">

<source src="bgm.ogg" type="audio/ogg">

 </audio>

audio 태그 옵션들 :
    - src : URL (소스의 URL)
    - height : 숫자 (높이 픽셀 값)
    - width : 숫자 (넓이 픽셀 값)
    - controls : "controls", "", - (비디오의 재생, 볼륨 등 제어기들을 표시, "controls"나 공백이나 태그 안에 값없이 controls만 적어줘도 적용됨)

- muted : "muted", "", - (음소거)

- poster : URL (로드되지 않고 있을 때 처음에 표시될 이미지의 URL / 동영상 파일을 재생할 수 없을 경우 보여지는 이미지 파일 지정)

- loop : "loop", "", - (반복 재생)

- autoplay : "autoplay", "", - (자동 재생)

- mediagroup : 문자열 (같은 아이디로 묶어준 비디오와 오디오 스트림들 끼리 동기화 시켜주는 그룹으로 취급)

- preload : "none", "metadta", "auto" ("none": 사용자가 비디오를 필요로하지 않을 것이라고 명시, 미리 다운로드 하지 않음 / "metadata": 사용자가 비디오를 필요로 하지 않을 것이지만 기본 정보, 즉 메타정보(크기, 첫 프레임, 비디오 길이, 등)만 가져온다. / "auto": 사용자가 비디오를 필요로하고 미리 다운로드를 한다.(기본값)

 - 출처(All-round programmer) : http://unikys.tistory.com/278

<object data="bgm.mp3" width="100%" height="50"></object>

<object data="bgm.mp3" type="audio/mp3">

<param name="AutoStart" value="true">

<param name="AutoRewind" value="true">

</object>

<object type="audio/x-mpeg" data="bgm.mp3" width="200" height="20"> : 크롬 실행 안됨 / 익스플로러11 및 엣지 실행됨

<param name="src" value="bgm.mp3"> src: 파일의 경로 지정

<param name="autoplay" value="true"> autoplay: 파일을 자동으로 플레이할지 선택(예:true, 아니오:false)

<param name="autostart" value="true"> autoplay와 동일(예:true, 아니오:false)

</object>

<object type="audio/x-mpeg" data="bgm.mp3" width="200" height="20" autoplay="true"> : 크롬 실행 안됨 / 익스플로러11 및 엣지 실행됨

 - 출처(지구별 안내서) : http://aboooks.tistory.com/209

<embed src="bgm.mp3" type="application/x-mplayer2" autostart=true width="200" height="20"></embed> : 크롬 실행 안됨 / 익스플로러11 및 엣지 실행됨

모바일웹에서 오디오 파일 재생하기

<audio src="demo.mp3" controls autoplay loop> 

HTML5 audio not supported

</audio>

* iOS계열에서는 자동재생 기능 제한

* controls 특성 : 브라우저에 기본 제공 재생 컨트롤을 표시하도록 지정함, 기본 제공 컨트롤의 기능과 모양은 브라우저마다 다를 수 있음

- 출처(작성자 보라) : https://blog.naver.com/tollu09/220834230244

HTML5 Video 태그 모바일에서 자동재생 안되는 경우, 안드로이드

HTML5의 Video 태그를 사용하여 미디어 파일을 재생시 autoplay 속성을 사용하여 자동 재생하는 것이 가능합니다. 하지만 모바일의 경우 자동재생이 되지 않을 수 있습니다. 왜 모바일에서만 자동재생 기능이 되지 않을까요?

이유는 모바일 브라우저에서 허용되기 않기 때문입니다. 만약 모바일 환경의 안드로이드폰이라면 자동 재생시 음소거를 설정해두세요. 음소거 영상의 경우에만 자동재생이 허용됩니다. 즉 video 태그에 muted와 autoplay 속성이 동시에 필요합니다.

# HTML5 모바일폰 자동재생하기

아래 에제는 간단하게 모바일에서 재생 가능하도록 변경한 코드입니다.

<video autoplay muted>

<source src="test.mp4" type="video/mp4"><source/>

</video>

이 방법이 아니라면 자바스크립트를 추가하여 페이지 로딩 후 video 영상에 play() 이벤트 메소드를 실행하도록 하는 방법도 있습니다. 이 방법 역시 가능하나 단점이라면 스크립트가 동작 안하는 환경에서는 플레이가 되지 않을 것입니다.

 - 출처 : https://webisfree.com/2017-08-03/html5-video-태그-모바일에서-자동재생-안되는-경우-안드로이드

적용 사이트

해피브런치 : http://happybrunch.net/content_2.html

동영상 웹표준 소스

 - 출처 : 0ONEHAN : http://ssireky.cafe24.com/xe/index.php?mid=board&page=1&document_srl=392

 - 작성자 : 접신

 - 작성일 : 2015-October-15

동영상 웹표준 및 웹접근성(유효성검사시 embed 오류발생 웹표준 준수일때는 embed 삭제사용)

[wmv] 재생소스

<object classid="clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95" codebase="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=6,0,02,902" width="160" height="20">

<param name="src" value="test.wmv" />

<param name="controller" value="true" />

<param name="autoplay" value="false" />

<param name="autostart" value="0" /> 

<param name="pluginspage" value="http://www.apple.com/quicktime/download/" /> 

<!--[if !IE]>-->

<object type="audio/x-ms-wmv" data="test.wmv" width="160" height="20">

<param name="src" value="test.wmv" />

  <param name="controller" value="true" />

<param name="autoplay" value="false" />

<param name="autostart" value="0" />

  <param name="pluginurl" value="http://www.apple.com/quicktime/download/" />

<embed src="test.wmv" type="audio/x-ms-wmv" width="160" height="20" autostart="false" controller="true" ></embed>

<p>동영상 다운로드 링크</p>

</object>

<!--<![endif]-->

</object>

[mp3] 재생소스

<object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" codebase="http://www.apple.com/qtactivex/qtplugin.cab" width="160" height="20">

<param name="src" value="test.mp3" />

<param name="controller" value="true" />

<param name="autoplay" value="false" />

<param name="autostart" value="0" /> 

<param name="pluginspage" value="http://www.apple.com/quicktime/download/" /> 

<!--[if !IE]>-->

<object type="audio/x-mpeg" data="test.mp3" width="160" height="20">

  <param name="src" value="test.mp3" />

<param name="controller" value="true" />

  <param name="autoplay" value="false" />

<param name="autostart" value="0" />

  <param name="pluginurl" value="http://www.apple.com/quicktime/download/" />

<embed src="test.mp3" type="audio/x-mpeg" width="160" height="20" autostart="false" controller="true" ></embed>

<p>동영상 다운로드 링크</p>

</object>

<!--<![endif]-->

</object>

["type"은 다음의 목록에 따라 변경]

- au (type="audio/basic")

- wav (type="audio/wav" or "audio/x-wav")

- ra (type="audio/x-pn-realaudio") 

- mp3 (type="audio/x-mpeg")

- wma (type="audio/x-ms-wma") 

- wmv (type="audio/x-ms-wmv")

["class id" 와 "codebase"]

- Quicktime player :

■ classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" 

■ codebase=http://www.apple.com/qtactivex/qtplugin.cab

- Windows media player :

■ classid="clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95"

■ codebase="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=6,0,02,902"

- Real Audio :

■ id=RVOCX

■ classid="clsid:CFCDAA03-8BE4-11CF-B84B-0020AFBBCCFA"

- Flash Shockwave :

■ classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"

■ codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,22,0"