Rev. 2.73

최근 파이어폭스(3.6.3)에서 HTML5 Video 요소에 삽입된 ogv 포멧 동영상이 재생되지 않는 문제가 있어 삽질을 하다가 알아낸 사실입니다. 이 문제는 서버의 응답 헤더를 설정해서 해결할 수 있더군요. 예전에는 chunk로 응답해도 잘만 나오던 녀석이 이제는 Partial Content로 응답해 주어야 합니다. 아래는 PHP로 작성된 헤더 설정 코드입니다.

<?php
  $file = basename($_GET['file']);
  $range = 0;
  $size = filesize($file);
  $maxSpeed = 512;

  header('Keep-Alive: timeout=2, max=99');
  header('Connection: Keep-Alive');
  header('Content-Type: video/ogg'); 
  header("Accept-Ranges: bytes");
  if (isset($_SERVER['HTTP_RANGE'])) {
    list($a, $range) = explode("=", $_SERVER['HTTP_RANGE']);
    str_replace($range, "-", $range);
    $size2 = $size - 1;
    $new_length = $size - $range;
    header("HTTP/1.1 206 Partial Content");
    header("Content-Length: $new_length");
    header("Content-Range: bytes $range$size2/$size");
  } else {
    $size2 = $size - 1;
    header("Content-Range: bytes 0-$size2/$size");
    header("Content-Length: ".$size);
  }

  if ($size == 0 ) die('Zero byte file! Aborting download');
  set_magic_quotes_runtime(0); 
  $fp = fopen("$file", "rb");

  fseek($fp, $range);

  while(!feof($fp) and (connection_status() == 0)) {
    set_time_limit(0);
    print(fread($fp, 1024 * $maxSpeed));
    flush();
    ob_flush();
    sleep(1);
  }

  fclose($fp);
?>

Comments

Sean Christmann씨는 HTML5 Video, Canvas 요소를 이용하여 흥미로운 실험을 했습니다. Video요소에서 재생중인 동영상을 Canvas에 카피하여 이미지 데이터를 얻고 새로운 Canvas 요소에 다시 그리는 방법으로 아래와 같은 재미있는 결과물을 만들어 냈습니다. 아래 동영상을 클릭해 보세요. 클릭한 영역이 폭팔하는 효과를 볼 수 있습니다.

이를 응용하면 3D 공간에 동영상을 매핑하는 것도 가능하다고 합니다.

Comments

Kroc Camen씨는 비디오 요소를 사용함에 있어서 자바스크립트를 사용하지 않고 HTML 마크업만으로 크로스-브라우저에 대응하는 현실적인 방법을 제시했습니다. HTML5의 <video> 요소를 사용가능한 경우와 그렇지 않은 경우에는 QuickTime과 Flash 브라우저 플러그인을 이용하여 재생합니다. 테스트 페이지에 작성된 브라우저별 호환성 테이블을 보면 <video> 요소에 사용되는 미디어의 포맷이 브라우저별로 통일되어 있지 않기 때문에 MP4, OGG 두가지 포맷을 모두 준비해야하며, 하위 호환성을 위한 플래시 플래이어까지 갖추어야하는 노고가 뒤따릅니다. 위 예제는 아래와 같은 마크업으로 작성되어 있습니다.

<video width="640" height="360" poster="__POSTER__.JPG" controls>
  <source src="__VIDEO__.OGV" type="video/ogg" />
  <source src="__VIDEO__.MP4" type="video/mp4" />
  <!--[if gt IE 6]>
  <object width="640" height="375" classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"><!
  [endif]-->
  <!--[if !IE]><!-->
  <object width="640" height="375" type="video/quicktime" data="__VIDEO__.MP4">
  <!--<![endif]-->
  <param name="src" value="__VIDEO__.MP4" />
  <param name="showlogo" value="false" />
  <object width="640" height="384" type="application/x-shockwave-flash"
    data="__FLASH__.SWF?image=__POSTER__.JPG&amp;file=__VIDEO__.MP4">
    <param name="movie" value="__FLASH__.SWF?image=__POSTER__.JPG&amp;file=__VIDEO__.MP4" />
    <img src="__POSTER__.JPG" width="640" height="360" alt="__Title of video__"/>
  </object><!--[if gt IE 6]><!-->
  </object><!--<![endif]-->
</video>

덧. 착한 구글 크롬은 OGG와 MP4를 모두 지원하는군요!

Comments