clipbucket新增html5 player

clipbucket是opensource的影音平台，可以支援高解析度影音。
在自建player自己遇到問題，爬文許久，得到一絲解答，在此做一記錄。
要支援hmtl5 video 需要有mp4或是ogv或是webm這幾個檔案，而mp4在clipbucket上只要影音解析度到一定標準時會自動把影片轉mp4，可是firefox和Opera瀏覽器不支援，所以必需要server轉ogv檔
在/includes/classes/conversion/ffmpeg.class.php的 1078行左右(
找到
                       if(file_exists(TEMP_DIR.'/output.tmp'))
                        {
                                $output = $output ? $output : join("", file(TEMP_DIR.'/output.tmp'));
                                unlink(TEMP_DIR.'/output.tmp');
                        }
之後)，加入下列
$ogvcommand = $this->ffmpeg." -i ".$this->input_file." -b 1200k -acodec libvorbis -vcodec libtheora -f ogg ".ereg_replace(".mp4",".ogv",$this->hq_output_file);
系統會把上傳的檔案有高解析度的影片，時會自動轉ogv檔。




自己新增一個player，可以參考：
http://docs.clip-bucket.com/adding-new-player

它有一定規定，可以下載其範例檔來改
http://www.longtailvideo.com/players/jw-flv-player/

其中檔至少頭要有（當然要多記也可）

  <?php
/*
 Player Name: JW Player v5
 Description: Jw player for clipbucket from longtail.com
 Author: Arslan Hassan
 ClipBucket Version: 2
 Plugin Version: 1.0 - JW 5
 Website: http://clip-bucket.com/
*/

?>

然後要有function，內容參考
http://docs.clip-bucket.com/adding-new-player

自己開始也看不懂內容，研究許多發現一點，是我們可以改的

找到return $swfobj->code;，這是函式回去的地方，在這之前加入我們需要的影音語法就好了

在html5 video影音語法是(請參考網頁http://www.w3schools.com/html5/html5_video.asp）

<video width="320" height="240" controls="controls">
  <source src="movie.mp4" type="video/mp4" />
  <source src="movie.ogg" type="video/ogg" />
 Your browser does not support the video tag.
</video>

由於firfox和 Opera不支援mp4所以我們的語法變成判斷系統是否有ogv檔，

有ogv檔用html5來播放，而mp4和flv檔用embed來播放。

至於有哪些變數可用可以用print_r($data)來看$data是一個陣列，裡面會傳回很多資料。

  $swfobj->title = $data['vdetails']['title'];
  $swfobj->description = $data['vdetails']['description'];
  $swfobj->username = $data['vdetails']['username'];
  $swfobj->views = $data['vdetails']['views'];
  $swfobj->datecreated = $data['vdetails']['datecreated'];
    $swfobj->width = $data['width'];
    $swfobj->height = $data['height'];
    $swfobj->filename = $data['vdetails']['file_name']; 

  if(file_exists('/webdata/web/video/files/videos/'.$swfobj->filename.".ogv")){
   //如果ogv檔存在就用html5播放
?>
   <video width="<?php echo $swfobj->width;?>" height="<?php echo $swfobj->height;?>" controls="controls">
     <source src="<?php echo BASEURL.'/files/videos/'.$swfobj->filename; ?>.mp4" type="video/mp4" />
     <source src="<?php echo BASEURL.'/files/videos/'.$swfobj->filename; ?>.ogv" type="video/ogg" />
     如果你看到不到影片請使用支援html5的瀏覽器，建議使用<a href="http://moztw.org/">Firefox</a>或是chrome瀏覽器.
   </video> 
   抬頭:<?php echo $swfobj->title;?><br>
   內容:<?php echo $swfobj->description;?><br>
   上傳者:<?php echo $swfobj->username;?><br>
   觀看次數:<?php echo $swfobj->views;?><br>
   影片日期:<?php echo $swfobj->datecreated;?><br>
   下載檔案:<a href="<?php echo BASEURL.'/files/videos/'.$swfobj->filename; ?>.ogv" target="_blank">ogv</a>/<a href="<?php echo BASEURL.'/files/videos/'.$swfobj->filename; ?>.mp4" target="_blank">mp4</a>
<?php
       
  }else{
   //embed播放
   if(file_exists('/webdata/web/video/files/videos/'.$swfobj->filename.".mp4")){
?>
<embed src="<?php echo BASEURL.'/files/videos/'.$swfobj->filename; ?>.mp4" width="<?php echo $swfobj->width;?>" height="<?php echo $swfobj->height;?>"></embed>
   抬頭:<?php echo $swfobj->title;?><br>
   內容:<?php echo $swfobj->description;?><br>
   上傳者:<?php echo $swfobj->username;?><br>
   觀看次數:<?php echo $swfobj->views;?><br>
   影片日期:<?php echo $swfobj->datecreated;?><br>

<?php

   }else{
?>
<embed src="<?php echo BASEURL.'/files/videos/'.$swfobj->filename; ?>.flv" width="<?php echo $swfobj->width;?>" height="<?php echo $swfobj->height;?>"></embed>
   抬頭:<?php echo $swfobj->title;?><br>
   內容:<?php echo $swfobj->description;?><br>
   上傳者:<?php echo $swfobj->username;?><br>
   觀看次數:<?php echo $swfobj->views;?><br>
   影片日期:<?php echo $swfobj->datecreated;?><br>
<!--
   <script type="text/javascript" src="<?php echo PLAYER_URL; ?>/es_player/jwplayer.js"></script>
<div class="player_container" id="container">
   <script type="text/javascript">
   jwplayer("container").setup({
   flashplayer: "<?php echo PLAYER_URL; ?>/es_player/player.swf",
   file: "<?php echo BASEURL."/files/videos/".$swfobj->filename; ?>.flv",
   height: "<?php echo $swfobj->height;?>",
   width: "<?php echo $swfobj->width;?>"
});
   </script>
-->
<?php   }  
  }
  

到這裡已經解決大部分問題，剩下一個問題，就是按下hq按鈕會沒有影片，個人覺得，hq按鈕已經不重要了，因為系統當初可能是為了讓使用者有高低解析度可以選擇而設定的，但因
swf的問題造成不支援flash的平台會不能播放，所以當採用html5後高低解析度問題已不必
要我採用的方是是到styles裡把它註解掉。
找到自己的styles(我用cbv2new所以是在/styles/cbv2new/layout)，
編輯watch_video.html，找到 <span id="hq" class="hq_button_cont">這一行，約在第17行。
把它用<!--註解掉，一直到</a>-->(18-20行註解掉）
這樣就不會有hq按鈕給使用者按。
大致ＯＫ，這樣沒有炫麗的player，但可以做到完全跨平台。個人功力不足，只能做到此，暫時解決問題。