2014-04-01 2 views
1

여러 브라우저에서 HTML5 비디오를 사용하여 이미지 배너를 만들려고합니다. 대부분의 운영 체제에서 Chrome 및 Firefox에서 동영상을 사용할 수 있지만 IE9 이상에서는 작동하지 않는 것으로 나타났습니다. 배너가있는 페이지가 비디오 파일과 같은 폴더에 없습니다. 배너는 여러 페이지에 걸쳐 존재합니다.IE9 + 10에서 HTML5 비디오가 작동하지 않습니다.

내가 볼 수있는 문제는 IE9와 10이 비디오 HTML5 코드 내 플래시 대체 옵션을 볼 수없고 등록되지 않는다는 것입니다. IE9 또는 10을 사용하는 사용자가 플래시 버전을 보도록 유도하면서 다른 모든 브라우저를 일반 HTML5 버전으로 리디렉션하도록하는 일종의 if-else 문을 작성하려고했습니다. 이 배너는 IE8을 포함하여 아래 버전에서 작동합니다.

.htaccess 파일에 액세스 할 수 없습니다. 나는 이것을 다른 곳에서 수동으로 MIME 형식을 추가하기 위해 제안했다. (심지어 각 비디오 소스 줄 내에서 지정했다.) IE9 + 10에서 콘솔을보고 MIME 형식이 문제인지, 오류가 없는지 확인했다. 쪽으로. 동영상이 등장한 공간을 마우스 오른쪽 버튼으로 클릭하면 HTML5 동영상 옵션이 생겼지 만 Play를 클릭해도 아무런 효과가 없습니다.

누군가가 코드를 디버그하거나 작동 시키도록 도와 준다면 좋을 것입니다. 고맙습니다! 다음은 Chrome, Firefox 및 기타 브라우저에서 작동하는 HTML5 동영상 코드입니다.

<video autoplay loop> 
<source src="http://fulmar.mahopac.k12.ny.us/www/mcsd_FR/site/hosting/Fulmar%20Banner/Fulmar_Banner.mp4" type="video/mp4"> 
<source src="http://fulmar.mahopac.k12.ny.us/www/mcsd_FR/site/hosting/Fulmar%20Banner/Fulmar_Banner.ogv" type="video/ogg"> 
<source src="http://fulmar.mahopac.k12.ny.us/www/mcsd_FR/site/hosting/Fulmar%20Banner/FlashFulmar Slideshow.webmhd.webm" type="video/webm"> 
<object width="954" height="224" type="application/x-shockwave-flash" data="http://fulmar.mahopac.k12.ny.us/www/mcsd_FR/site/hosting/Fulmar%20Banner/Fulmar%20Banner.swf"> 
    <param name="movie" value="http://fulmar.mahopac.k12.ny.us/www/mcsd_FR/site/hosting/Fulmar%20Banner/Fulmar%20Banner.swf" /> 
</object> 
</video> 

편집 : mp4 파일의 코덱은 h.264 + AAC입니다.

+0

인코딩 된 mp4는 어떤 코덱입니까? 모든 브라우저가 동일한 코덱을 지원하는 것은 아닙니다. IE9는 h264 및 mp3/aac 만 지원합니다. ie10이 지원하는 것이 확실하지 않습니다. –

+0

_IE9 + _는 '

답변

1

IE는 비디오 소스 코덱의 제한된

IE 9 이상, 모든 다른 사람들이 지원하지 않는 것 MP3/AAC, VP8와 VP9 의문이다와 H264을 지원을 지원합니다.

MDN doc on media browser compatibility

그래서 당신은 각각의 브라우저를 지원하는 몇 가지 비디오 소스를 제공해야하지만 반드시 브라우저의 일부로서 각 브라우저에 대한 비디오는 그들의 지원에 중복 않습니다.

h264 aac/mp3로 비디오를 제공하면 IE, Safari 및 Chrome에서 재생해야합니다. Theora 또는 VP8이있는 비디오는 Firefox 및 Opera에서 재생해야합니까?

+0

소스 옵션으로 .h264 형식의 MP4가 있습니다. IE9 + 10에서는 작동하지 않습니다. 유형을 찾기 위해'video \ mp4' 이외의 것을 지정해야합니까? –

+0

사용중인 실제 코덱을 지정할 수 있습니다.따라서'type = "video/mp4"'를 넣는 대신'type = 'video/mp4; codecs = "avc1.42E01E, mp4a.40.2" ''로 표시되지만 나열된 실제 코덱은 비디오에서 사용하는 코덱으로 바꿉니다. –

1

신속하고 더러운 솔루션은 브라우저의 이전 버전 모방 IE을 강제하는 것입니다 :

<!-- Mimic Internet Explorer 8 --> 
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" > 
    <meta http-equiv="X-UA-Compatible" content="IE=8" > 

참고 그 다른 모든 요소 전에 헤더 에 넣어해야이 <meta 태그 (제목 요소 및 기타 메타 요소 제외).

+0

이 기능은 Internet Explorer를 버전 8 또는 모든 브라우저에만 적용합니까? –

+1

@ user2246272 Internet Explorer 만 –

관련 문제