크롬(Chrome) 버전 18을 쓰다가 19로 버전업 하면서 기존에 잘 되던 embed 태그가 제대로 동작하지 않았다.
embed 태그에서 mp3 파일을 재생하기 위해서는 type 을 지정해줘야 하는데, 이것이 워낙 여러 종류가 있다보니 헷갈리는데,
현재, IE 와 크롬에서 mp3 재생을 위해 가장 무난하게 사용할 수 있는 태그는 아래와 같다.
<embed type="video/x-ms-wmv" src="링크주소" width="400" height="120" autostart="0"></embed>
type="video/x-ms-wmv" 로 지정해서 사용하는 것이다.
mp3 재생을 위해서는 일반적으로 type="application/x-mplayer2" 로 지정하라고 알려져 있지만,
여기서 이런 타입(type)을 지정하는 이유는, 플러그인 설치가 간단하고 크롬에서도 잘 동작하기 때문이다.
또한, 크롬의 경우에는 type="audio/mpeg" 같은 태그를 이용하기도 하는데, 이렇게 지정할 경우 별 문제없이 실행은 잘 되지만, autostart="0" 이 먹히지 않아서 페이지를 열자마자 바로 실행되어 버리는 문제가 발생한다.
이럴경우, 여러개의 mp3 를 로드하면 동시에 여러 소리가 한꺼번에 들리게 되는 문제가 발생한다.
테스트 결과 type="video/x-ms-wmv" 로 지정해주면, autostart="0" 이 제대로 동작하였다.
크롬 버전 18 까지는 플러그인 설치만 하면 별 문제없이 잘 써왔는데, 이번에 버전 19로 업데이트 한 이후에는 플러그인 설치를 시도해도 계속 오류가 발생했다.
type 을 application/x-mplayer2 로 지정할 경우 퀵타임 플레이어(QuickTime Player)를 설치하도록 유도하는등 이상하게 동작하였고, 막상 플러그인을 퀵타임 플레이어로 설치해도 계속 오류가 날 뿐이었다.
결국 다시 원점으로 돌아와서 type="x-ms-wmv" 를 사용하되, 플러그인 설치시 발생하는 오류를 해결하는 방법을 찾게 되었다.
P.S. (2012.12.18)
윈도우7 에서 크롬 버전23 으로 접속한 결과, 설치 방법에 다소 변화가 생긴듯 하여 아래의 참조 링크 추가
(Chrome,win7) Windows Media Player HTML5 Extension for Chrome 설치하기(웹 미디어 재생기 설치)(embed 태그)
IE9 에서는 embed 태그 실행시 위와같이 브라우저 하단에 플러그인을 추가할것인지를 묻는 알림창이 뜬다.
우측의 '허용' 버튼을 누르면 별다른 문제없이 실행된다.
IE8 에서는 브라우저 상단에 노란색 알림창이 뜨는데, 역시 '허용' 또는 '실행' 을 실행하면 별 문제없이 embed 태그를 그대로 사용할 수 있다.
크롬에서는 약간 문제가 다르다.
크롬 버전 18 까지는 IE 브라우저에서와 같이 알림창이 뜨면 '플러그인 설치' 버튼을 클릭해서 설치하면 별다른 문제없이 잘 실행되었다.
그러나, 이번에 버전 19로 업데이트 한 이후에는 플러그인을 설치해도 embed 태그가 정상작동 하지 않고 계속 오류가 발생했다.
우선, 크롬(버전 19)에서 플러그인을 설치한 화면을 보겠다.
크롬을 업데이트 하면, 기존에 플러그인을 설치했어도 다시 설치하도록 위와같이 알림 메세지가 뜬다.
'플러그인 설치' 버튼을 눌러 설치를 진행했다.
플러그인 다운로드가 완료된후 자동으로 실행이 된다.
여기서 '실행' 버튼을 클릭.
위 화면은 플러그인을 제거한후 재설치 과정에서 나타난 화면이다.
사용자에 따라서 이 화면이 나오지 않을 수 있다.
라이센스에 동의하고 설치 진행(Next).
제거하려면 제일 하단의 'Remove' 버튼을 누르고, 아니라면 Change 나 Repair 을 눌러 계속 진행한다.
Next 클릭.
설치가 완료 되었다.
그러나, 플러그인 설치 후에도 여전히 에러가 발생한다.
재미있는 점은, mp3 파일의 링크를 클릭하면 화면이 이동하면서 재생이 되기는 되었다.
하지만, 지금 하려는 작업은 새로운 화면으로 이동해서 재생시키는 것이 아니라 embed 태그를 이용해 바로 재생하는 것이다.
이런저런 정보를 찾아보다가, 결국 원점으로 되돌아 와서, 상단 메세지에 나온 대로 다시 진행을 해보았다.
플러그인 설치를 요청하는 알림메세지 우측에 '설치에 문제가 있습니까?' 라는 링크가 보일 것이다.
이 링크를 클릭한다.
링크를 클릭하면, 구글에서 제공하는 Windows Media Player 플러그인 관련 도움말 페이지로 이동한다.
중간쯤에 보면, http://www.interoperabilitybridges.com/wmp-extension-for-chrome 라는 링크가 보인다.
이 링크를 클릭한다.
링크를 클릭해서 이동한 페이지에 보면, 중간쯤에 'Install the Extension' 이 보일 것이다.
이 링크를 클릭한다.
크롬 브라우저 하단에 플러그인 설치를 진행할 것인지 묻는 알림창이 뜬다.
확인창이 뜨면 '추가' 를 눌러 설치한다.
설치를 완료한후 크롬 브라우저 우측의 스패너 모양의 아이콘(환경설정 아이콘)을 클릭해서,
도구 -> 확장 프로그램
메뉴를 클릭한다.
확장 프로그램에 HTML5 용 Windows Media Player Extension 1.0 이 설치되어 있는 것을 확인할 수 있다.
embed 태그가 있던 페이지를 열어보니, 미디어 플레이어가 정상적으로 실행되는 것을 확인할 수 있다.
크롬이 버전 19로 업데이트 하면서, HTML5 관련한 부분에 수정이 이루어진것 같다.
그 때문에, 기존에 별 문제없이 간단한 플러그인 설치로 사용했던 embed 태그가 제대로 동작하지 않았고, 플러그인 설치 또한 정상적으로 되지 않는 문제가 발생하고 있는것 같다.
아무튼, 이렇게 다소 복잡한 과정을 거쳐서 설치해야 하게 되면, 크롬을 사용하는 일반 사용자들은 모르거나 혹은 귀찮아 하게 될것 같은데, 이런 부분에서는 이번 업데이트가 상당히 아쉽다.
덧글
플러그인 설치하지 않고 가능한 것으로 알고 있는데 혹시 사용해보셨나요?
해결책을 제시하기는 했는데, 사용자 입장에서 플러그인을 설치하는 방법일 뿐이기 때문에, 홈페이지를 만드는 사람이나 블로그 포스팅을 하는 사람 입장에서의 해결책은 아닙니다.
홈페이지 코딩을 직접 하는 사람이라면, 플러그인 업데이트 하는 방법을 자세히 안내하고 링크를 제공하거나 또는 IE 냐 파이어폭스냐 분석해서 그에 맞는 태그를 처리하면 되겠지만, 블로거 입장에서는 스크립트를 사용할 수 없기 때문에 난감한 상황이 되었습니다.
잘 참고하겠습니다
감사합니다
잘 참고하였습니다. 다만 아쉬운 점이 위와 같이 적용하면
윈도우 익스플로어에서는 보이지가 않네요..ㅠㅜ...