jQuery 비디오 라이트 박스

라이트 박스를 만들고있어 플래시 및 비디오에 대한 지원이 추가되었습니다. 나는 비디오에 대한 요구 나 필요성을 결코 갖지 못했기 때문에, 솔직히 어디서부터 시작해야할지 모른다. 여러 브라우저에서 서로 다른 비디오 형식을 제공 할 수 있어야하지만이 방법에 접근하는 방법을 모릅니다. 나는 또한 비 현대적인 브라우저에서이 작업을하기를 희망하고 있습니다. 내가 찾은 자습서와 질문은 일반적으로 "이 플러그인을 사용해보십시오"라는 결과가 매우 모호합니다. 아마도 누군가는 브라우저 호환성이있는 비디오를로드하는 방법과 내가 지원해야하는 비디오 형식을 설명하는 방법으로 도움을 줄 수 있습니까? 또는 링크 :) 감사합니다!jQuery 비디오 라이트 박스

출처

2012-08-24 Aaron

당신은 또한 서버 측을 작성하고 있습니까? –

아니요 그냥 자바 스크립트 – Aaron

나는 똑같은 작업을 수행했다. 나는 Fancybox과 Video for Everybody의 조합을 사용했습니다.

기본적으로 HTML5 동영상을 지원하지 않는 브라우저에는 HTML5 video 태그가 포함 된 플래시 비디오 플레이어와 함께 사용됩니다. 임베디드 플래시 플레이어의 경우 JWPlayer을 사용했습니다.

그런 다음 <a href="#videoPlayer" class="video_link">Play Video</a>과 같은 것을 만들고 링크에서 Fancybox를 가리 킵니다. Voila, Fancybox (라이트 박스와 거의 동일한 기능)에 비디오가 있습니다.

브라우저 간 호환성을 위해 you should offer the file in MP4 (using H.264 codec) and WebM or Ogg입니다. HTML5 비디오를 지원하지 않는 이전 브라우저는 어쨌든 MP4 파일과 함께 플래시 플레이어 폴백을 사용합니다.

MP4 파일에서주의해야 할 점 중 하나는 파일 끝에 완전히 moov atom이 위치하므로 파일이 완전히 다운로드 될 때까지 파일을 재생할 수 없다는 것입니다. qt-faststart과 같은 도구를 사용하여 파일의 시작 부분으로 이동하면 완전히 다운로드되기 전에 재생이 시작됩니다.

예 :

<html> 
<head> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script> 
    <script type="text/javascript" src="/fancybox/jquery.fancybox-1.3.4.pack.js"></script> 
    <script type="text/javascript"> 
     $(document).ready(function() { 
      $("a.video_link").fancybox(); 
     }); 
    </script> 
</head> 
<body> 
    <a href="#videoPlayer" class="video_link">Play video</a> 
    <video width="640" height="360" controls id="videoPlayer"> 
     <source src="__VIDEO__.MP4" type="video/mp4" /> 
     <source src="__VIDEO__.OGV" type="video/ogg" /> 
     <object width="640" height="360" type="application/x-shockwave-flash" data="__FLASH__.SWF"> 
      <param name="movie" value="__FLASH__.SWF" /> 
      <param name="flashvars" value="controlbar=over&amp;image=__POSTER__.JPG&amp;file=__VIDEO__.MP4" /> 
      <img src="__VIDEO__.JPG" width="640" height="360" alt="__TITLE__" title="No video playback capabilities, please download the video below" /> 
     </object> 
    </video> 
</body> 
</html>

출처

2012-08-24 19:24:31 Travesty3

html5 호환성을 위해 모든 비디오를 여러 형식으로 수동으로 변환해야합니까? 이 단계를 자동화하는 방법이 있습니까? – Aaron

Dunno는 자동화에 대해,하지만 [Miro Video Converter] (http://www.mirovideoconverter.com/)를 사용했습니다. – Travesty3

jQuery 비디오 라이트 박스

답변

관련 문제