우리 회사는 웹 페이지에 인라인으로 표시 할 수있는 많은 온라인 자습서/교육 비디오를 제공하기 시작했습니다. 인라인보기를 위해 대다수의 사용자를 수용 할 수있는 간단한 크로스 브라우저 솔루션이 필요합니다.크로스 브라우저 호환 인라인 비디오 솔루션
내가 읽은 한 가지 해결책은 (매우 간단하지는 않지만) 각 비디오의 플래시, mp4 및 avi 버전을 만들고 자바 스크립트 플러그인이 브라우저가 가장 잘 작동하는지 확인하도록하는 것입니다.
당신은 어떤 JQuery와 플러그인을 확인해 봤어 체크 아웃 무료로 들어 http://www.sublimevideo.net/
체크 아웃? 밖에는 여러 브라우저가 있습니다. 확인할 수 있습니다 http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/
모든 브라우저에서 비디오를 재생 해 보았습니다. 이를 수행하는 가장 좋은 방법은 플래시 폴백을 사용하여 html5 동영상 태그를 설정하는 것입니다. 이것은 실제로 어떤 자바 스크립트도 필요하지 않습니다. 이 사이트 : http://camendesign.com/code/video_for_everybody이 작업 방법에 대한 훌륭한 설명을 제공합니다.
당신은 기본적으로는 다음과 같습니다 뭔가를 설정하려는거야 :<video width="640" height="360" controls>
<!-- MP4 must be first for iPad! -->
<source src="__VIDEO__.MP4" type="video/mp4" /><!-- Safari/iOS video -->
<source src="__VIDEO__.OGV" type="video/ogg" /><!-- Firefox/Opera/Chrome10 -->
<!-- fallback to Flash: -->
<object width="640" height="360" type="application/x-shockwave-flash" data="__FLASH__.SWF">
<!-- Firefox uses the `data` attribute above, IE/Safari uses the param below -->
<param name="movie" value="__FLASH__.SWF" />
<param name="flashvars" value="controlbar=over&image=__POSTER__.JPG&file=__VIDEO__.MP4" />
<!-- fallback image. note the title field below, put the title of the video there -->
<img src="__VIDEO__.JPG" width="640" height="360" alt="__TITLE__"
title="No video playback capabilities, please download the video below" />
</object>
</video>
비디오 태그를 사용하면 최신 브라우저에서 비디오 파일을 표시하는 데 사용할 수있는 HTML5 태그입니다. 그러나 각 형식에서 올바르게 표시하려면 여러 가지 형식이 필요합니다. 예를 들어 파이어 폭스는 webm과 ogg 포맷을, 사파리는 h264와 mp4 포맷만을 사용한다. 이에 대한 훌륭한 기사가 있습니다 : http://diveintohtml5.ep.io/video.html. 비디오를 모든 형식으로 변환하기 위해 다운로드 할 수있는 간단한 변환기 소프트웨어는 http://www.mirovideoconverter.com/에서 찾을 수 있습니다. 다른 브라우저 (특히 IE)는 html5 동영상 태그를 사용하지 않으므로 동영상 태그를 사용하여 수행 할 작업을 모르는 경우 자동으로 다시 사용하도록 플래시 형식을 포함시켜야합니다.
결국 호환 가능한 표준의 부족으로 인해 브라우저 및 플랫폼 (iOS 모바일)에서 작동하도록 동영상 파일을 적어도 3-4 가지 형식으로 만들어야합니다. 서버가 이러한 포맷에 올바른 MIME 유형을 사용하는지 확인하는 것도 중요합니다. 그것은 끔찍하지만 지금은 유일한 방법입니다.
지금까지 가장 좋은 해결책 :
http://www.videojs.com/을 구현하는 방법 :
머리 :
<link href="http://vjs.zencdn.net/c/video-js.css" rel="stylesheet">
<script src="http://vjs.zencdn.net/c/video.js"></script>
몸 :
<div class="vid">
<video id="vid01" class="video-js vjs-default-skin" controls="controls" preload="none" width="640px" height="264px"
poster="../../Content/YourInitialPicture.jpg">
<source src="../../Content/YourVideo.mp4" type='video/mp4'/> <!-- IE/Safari -->
<source src="../../Content/YourVideo.webm" type='video/webm'/> <!-- Mozilla FF -->
<source src="../../Content/YourVideo.ogg" type='video/ogg'/> <!-- Chrome/Opera -->
<track kind="captions" src="../../Content/YourVideoCaption.vtt" srclang="en" label="English" />
</video>
<script>
var myPlayer = _V_("vid01");
</script>
</div>
복사/당신의 <body></body>에 코드 위에 붙여 src="../../"
이러한 무료 컨벤 셔너를 비디오에 사용할 수 있습니다.
을!
좋은 해결책. 또한 첫 번째 제안 된 비디오 변환기는 매우 좋습니다. – Alex
나에게 도움이되는 정보 : YouTube에 비디오를 업로드 한 다음 MP4로 다운로드했으며 video 태그가있는 여러 브라우저에서 작동하는 것으로 보입니다.
ffmpeg는 mp4로만 변환하려는 경우 사용할 수 있습니다. – Octopus
나는 이것을 꽤 오랫동안 연구 해왔고, 나는 똑같은 일을 시도하고있다. 그래서 이것은 다른 누군가에게 도움이되기를 희망한다. 나는 crossbrowsertesting.com을 사용해 왔고 문자 그대로 거의 모든 브라우저에서 이것을 테스트했습니다. 현재 Opera, Chrome, Firefox 3.5 이상, IE8 이상, iPhone 3GS, iPhone 4, iPhone 4, iPhone 5, iPhone 5s, iPad 1 이상, Android 2.3 이상, Windows Phone 8에서 사용할 수있는 솔루션은
동적으로 변경 소스
동적 비디오가 매우 어렵고, 플래시 사용하면 DOM/페이지에서 비디오를 제거하고 플래시 동적 인식하지 않기 때문에 플래시 업데이트 할 수 있도록 다시 추가해야합니다 폴백 변경 Flash vars에 대한 업데이트. 자바 스크립트를 사용하여 동적으로 변경하려면 모든 <source> 요소를 완전히 제거하고 canPlayType을 사용하여 자바 스크립트에 또는 return을 설정하고 플래시를 동적으로 업데이트하는 것을 잊지 마세요. var mp4. 또한 video.load()으로 전화하지 않는 한 소스를 변경했다고 등록하지 않는 브라우저도 있습니다. 발생한 .load() 문제는 먼저 video.pause()으로 전화하여 해결할 수 있습니다. 비디오 요소를 제거하고 추가하면 제거 된 비디오를 계속 버퍼링하지만 브라우저는 느려질 수 있지만 there's a workaround.
크로스 브라우저
가 지금까지 실제 크로스 브라우저 부분으로, 나뿐만 아니라 Video For Everybody에 도착를 지원합니다. 이미 MediaelementJS Wordpress 플러그인을 사용해 보았습니다.이 플러그인은 해결 된 것보다 더 많은 문제를 일으켰습니다. 나는이 문제가 Wordpress 플러그인과 실제 라이브러리가 아닌 것으로 의심합니다. 가능한 경우 JavaScript없이 작동하는 것을 찾으려고합니다.
<video width="300" height="150" controls="controls" poster="http://sandbox.thewikies.com/vfe-generator/images/big-buck-bunny_poster.jpg" class="responsive">
<source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.ogv" type="video/ogg" />
<source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" type="video/mp4" />
<source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.webm" type="video/webm" />
<source src="http://alex-watson.net/wp-content/uploads/2014/07/big_buck_bunny.iphone.mp4" type="video/mp4" />
<source src="http://alex-watson.net/wp-content/uploads/2014/07/big_buck_bunny.iphone3g.mp4" type="video/mp4" />
<object type="application/x-shockwave-flash" data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" width="561" height="297">
<param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" />
<param name="allowFullScreen" value="true" />
<param name="wmode" value="transparent" />
<param name="flashVars" value="config={'playlist':['http://sandbox.thewikies.com/vfe-generator/images/big-buck-bunny_poster.jpg',{'url':'http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4','autoPlay':false}]}" />
<img alt="No Video" src="http://sandbox.thewikies.com/vfe-generator/images/big-buck-bunny_poster.jpg" width="561" height="297" title="No video playback capabilities, please download the video below" />
</object>
<strong>Download video:</strong> <a href="video.mp4">MP4 format</a> | <a href="video.ogv">Ogg format</a> | <a href="video.webm">WebM format</a>
</video>
주의 사항 : 지금까지 내가 가지고 올 한 것은이 일반 HTML은
<source>로 OGG 퍼팅까지 종료 첫 번째로 MP4가 발생하면 비디오는 <source>입니다.video/ogv.iphone.mp4 파일이있는 것이다 만 4+ 아이폰이다, video/ogg해야한다 H.264 Baseline 3 Video 및 AAC 오디오가 포함 된 MPEG-4 비디오를 재생할 수 있습니다. 해당 형식으로 찾은 최고의 트랜스 코더는 핸드 브레이크입니다. iPhone & iPod Touch 프리셋은 iPhone 4+에서 작동하지만 iPhone 3GS를 작동 시키려면 프리셋을 사용해야합니다. video.iphone3g.mp4으로 추가되었습니다.<source> 요소의 media 속성을 사용하면 미디어 쿼리를 사용하여 모바일 장치를 타겟팅 할 수 있지만 현재는 오래된 Apple 및 Android 장치가이를 지원하지 않습니다.
향후 html5의 표준이 될 비디오 형식이 있습니까? –
애플이 WebM 포맷을 지원한다면, 가까운 장래에 IE9가 WebM을 지원한다고 믿지만, 독점적 인 H264 포맷과 밀접하게 관련되어 있기 때문에 그렇게 할 것이라는 것은 의심 스럽다. –