웹 페이지 (HTML)에 비디오 임베드

StackOverflow https://stackoverflow.com/questions/1200719

문제

웹 페이지에 비디오를 포함하고 싶습니다.
Flash는 수많은 플랫폼에서 사용할 수 없기 때문에 Flash를 사용하고 싶지 않습니다.
나는 아직 표준이 아니기 때문에 html5를 사용하는 것을 꺼려합니다 (표준이지만 대부분의 사람들은 그것을 지원하는 브라우저가 없습니다).

다른 방법이 있습니까? 아니면 html5를 고수하고 사람들에게 브라우저를 업그레이드하도록 지시하는 거대한 배너를 고수해야합니까?

도움이 되었습니까?

해결책

HTML5 비디오와 비 지원 브라우저를위한 폴백을 결합하는 몇 가지 방법이 있습니다. 몇 가지 특정 솔루션이 입증되었습니다.

한 가지 예입니다 모두를위한 비디오 HTML5를 준수하고 구형 브라우저에 대한 중첩 객체 태그에 대한 조건부 주석을 사용하는 Camen Design에 의해. 이는 표준 준수, 후진 호환 및 향후 증거 여야합니다.

다른 팁

HTML 5는 표준이 아닙니다. 초안입니다. 아마 언젠가는 표준이 될 것입니다. 아마도 먼저 변할 것입니다.

페이지에 비디오를 포함 시키려면 오늘날 Flash는 가장 잘 지원되는 옵션입니다. 플래시가없는 사람들 (또는 전용 비디오 플레이어에서 비디오를보고 싶어하는 사람들)을위한 옵션으로 일반 다운로드 가능한 버전에 대한 링크를 제공합니다.

사람들에게 브라우저를 업그레이드하라고 말하는 것은 큰 도움이되지 않습니다. 내가 아는 한, 안정적인 릴리스에서 비디오 지원이있는 유일한 브라우저는 Firefox입니다. 크롬은 개발 버전을 제외하고는 지원하지 않습니다. 나는 오페라가 지원으로 안정적인 빌드를 가져 왔다고 생각하지 않습니다. Microsoft는 확실히 인터넷 익스플로러에 추가하지 않았습니다. 사파리 나는 확실하지 않다.

플래시를 실제로 피하려면 HTML 4.01 객체를 사용할 수 있습니다.

<object data="myVideo.ogv" type="video/ogg">
  <!-- fallback content here -->
</object>

… 사용자가 설치된 비디오를 처리 할 수있는 플러그인이 있기를 바랍니다.

방금 만났습니다 코타도. OGG를 연주하는 Java 애플릿입니다. 나는 실제로 감사해야한다 데이비드 도워드 이를 위해 html5의 상태를 확인하면 나를 만나게되었습니다. Firefox는 다음과 같은 것을 사용하는 것을 제안합니다.

 <video src="my_ogg_video.ogg" controls width="320" height="240">  
   <object type="application/x-java-applet"  
           width="320" height="240">  
      <param name="archive" value="cortado.jar">  
      <param name="code" value="com.fluendo.player.Cortado.class">  
      <param name="url" value="my_ogg_video.ogg">  
      <p>You need to install Java to play this file.</p>  
   </object>  
 </video>

Java는 Flash보다 훨씬 더 많은 플랫폼에서 사용할 수 있으며,이 경우 HTML5로의 붕괴 일 경우.

(원천)

조금 늦었다는 것을 알고 있지만 VLC를 살펴 보셨습니까?

웹 사이트에 내장, Windows에서 실행되며 Mac OS & Linux가 무료이며 오픈 소스, 많은 비디오/오디오 형식을 지원합니다 ...

단점은 재생/일시 정지/세트 볼륨/... 함수가있는 멋진 GUI가 없다는 것입니다. 직접 만들어야합니다.

이 기사를 볼 수 있습니다. http://www.videolan.org/doc/play-howto/en/ch04.html#id310965

많은 대형 웹 사이트가 플래시를 사용하여 비디오를 재생한다고 생각하는 이유는 무엇입니까? 아마도 사용할 수 없기 때문일 것입니다 ... 물론 웹 페이지에 비디오 컨텐츠를 포함시키는 대안이 있지만 가용성이 문제가되면 Flash가 현재 가장 좋은 방법입니다.

XHTML+RDFA에 관심이 많기 때문에이 문제를 해결했으며 HTML5 브라우저를 차단하지 않고 HTML5 브라우저에서 XHTML 1.0 엄격한 문서에서 비디오를 재생하는 방법을 찾았습니다.

여기에 jQuery 플러그인을 게시했습니다. https://github.com/charlycoste/xhtml-video

그리고 여기에 데모 : http://demo.ccoste.fr/video

실제로 이것은 HTML5 태그를 사용하는 것보다 매우 강력하지만 적어도 ... 작동합니다!

솔루션은 JavaScript 및 Canvas에 의존하지만 사용하여 우아하게 저하 될 수 있습니다. <object> 태그 (이것이 내 jQuery 플러그인이하는 일입니다).

내가하는 일은 실제로 간단합니다.

  1. 새 비디오를 만듭니다 요소 (태그가 아님) 메모리에 있지만 i 추가하지 마십시오 DOM 문서에 :

    var video = document.createElement('video');

  2. 나는 새로운 것을 만듭니다 canvas 요소 기억하지만 나는 추가하지 마십시오 DOM 문서에 :

    var canvas = document.createElement('canvas');

  3. 나는 새로운 것을 만듭니다 img 요소 그리고 나는 그것을 추가한다 Dom에.

    // var parent = ... ;
// var width = ...;
// var height = ...;
var img = document.createElement('img');

img.setAttribute('width', width);
img.setAttribute('height', height);

parent.appendChild(img);

  4. 비디오가 재생 될 때 (video.play()), 캔버스에 각 프레임을 그립니다 (DOM에 추가되지 않기 때문에 표시되지 않음 - DOM이 유효한 XHTML 1.0 문서를 유지합니다)

    canvas.getContext("2d").drawImage(video, 0, 0, width, height);

  5. 마침내 나는 그것을 사용한다 toDataURL() 방법의 방법 canvas 프레임에 대한 base64 인코딩 된 이미지를 가져 오는 요소를 src 의 속성 img 요소.

    img.setAttribute('src', canvas.toDataURL());

이렇게하면 JavaScript 객체가 DOM에서 비디오를 재생하고 각 프레임을 img 돔 요소. 따라서 브라우저의 HTML5 기능을 사용하여 비디오를 재생할 수 있지만 HTML5 문서가 필요하지 않습니다.

브라우저에 HTML5 기능이 없거나 중고 코덱을 처리 할 수없는 경우 기본으로 돌아갑니다. <object> 동작 (일반적으로 ... 브라우저는 VLC와 같은 플러그인을 찾습니다 ...)

그리고 비디오를 재생할 방법이 없다면 (플러그인 없음) 내부에 제공된 대체 콘텐츠 <object> 태그가 사용됩니다.

성능 측면 : 소비 프로세스가 매우 높기 때문에 재생이 깜박일 수 있습니다.이를 피하기 위해 JPEG 압축을 사용하여 렌더링 품질을 줄일 수 있습니다. canvas.toDataURL('image/jpeg', quality) 어디 quality 0과 1 사이의 값입니다.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top