ClipBucket HTML5 Player

雖然可以參考clipbucket新增html5 player的作法修改 CBFolder/includes/functions.php
將以下資訊塞進 “return $swfobj->code;” 前面 (大約是3019行)

$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'];
echo ' 不能播放FLASH5嗎? 請按此處以 HTML5 播放';
?>

如果你看到不到影片請使用支援html5的瀏覽器,建議使用Firefox或是chrome瀏覽器.

抬頭:title;?>
內容:description;?>
上傳者:username;?>
觀看次數:views;?>
影片日期:datecreated;?>

但是依舊有其缺點在,由其是我想要搭配 Video.js Tests 一起使用
不管怎樣測試都無法秀出選擇畫質的部分
因此只好繞個圈啦~~利用這樣的方式來呈現
當使用者遭遇無法使用flash的時候就點選連結開新視窗以html5的方式播放

因此需要修改 CBFolder/player/cbplayer/cbplayer.html
在之前加入以下內容

var filename = hq_video_file.split("videos/")[1];
extIndex = filename.lastIndexOf('.');
filename = filename.substr(0, extIndex);
document.write("");
document.write("不能播放FLASH5嗎? 請按此處開新視窗以 HTML5 播放");

接著新在CBFolder中新增一個html5.php檔案
內容如下




  ClipBucket HTML5 Player
  
  
  
  
  


  


再依照實際需求修改~

並取得下列檔案與html5.php放置於同一目錄
video-js.min.css
jquery.min.js
video.js
video-quality.js
video-js.css
video-js.png
video-js.swf

This entry was posted in ClipBucket. Bookmark the permalink.