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("<a href="&quot;html5.php?filename=&quot;" target="&quot;_blank&quot;" rel="noopener noreferrer">不能播放FLASH5嗎? 請按此處開新視窗以 HTML5 播放</a>");

var filename = hq_video_file.split("videos/")[1];

extIndex = filename.lastIndexOf('.');

filename = filename.substr(0, extIndex);

document.write("");

document.write("<a href=""html5.php?filename="" target=""_blank"" rel="noopener noreferrer">不能播放FLASH5嗎? 請按此處開新視窗以 HTML5 播放</a>");

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

<!DOCTYPE html>
<html>
<head>
  <title>ClipBucket HTML5 Player</title>
  <link rel='stylesheet' id='video-js' href='video-js.min.css' type='text/css' media='all' />
  <script type="text/javascript" src="jquery.min.js"></script>
  <script type="text/javascript" src="video.js"></script>
  <style>
    .vjs-quality-button {
      padding: 0 0.6em !important;
      width: auto !important;
    }
    .vjs-quality-button div {
      width: auto !important;
      background: none !important;
    }
  </style>
  <script type="text/javascript" src="video-quality.js"></script>
</head>
<body>
  <video id="vjs-test-multi-res-html5" height="360" width="661" class="video-js vjs-default-skin" controls preload="auto">
    <source data-res="480" src="files/videos/<?php echo $_GET["filename"];?>.mp4" type="video/mp4">
    <source data-res="240" src="files/videos/<?php echo $_GET["filename"];?>.mp4" type="video/mp4">
    <source data-res="480" src="files/videos/<?php echo $_GET["filename"];?>.webm" type="video/webm">
    <source data-res="240" src="files/videos/<?php echo $_GET["filename"];?>.webm" type="video/webm">
    <source data-res="480" src="files/videos/<?php echo $_GET["filename"];?>.ogv" type="video/ogg">
    <source data-res="240" src="files/videos/<?php echo $_GET["filename"];?>.ogv" type="video/ogg">
  </video>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>ClipBucket HTML5 Player</title>

<style>

.vjs-quality-button {

padding: 0 0.6em !important;

width: auto !important;

}

.vjs-quality-button div {

width: auto !important;

background: none !important;

}

</style>

</head>

<body>

<source data-res="480" src="files/videos/<?php echo $_GET["filename"];?>.mp4" type="video/mp4">

<source data-res="240" src="files/videos/<?php echo $_GET["filename"];?>.mp4" type="video/mp4">

<source data-res="480" src="files/videos/<?php echo $_GET["filename"];?>.webm" type="video/webm">

<source data-res="240" src="files/videos/<?php echo $_GET["filename"];?>.webm" type="video/webm">

<source data-res="480" src="files/videos/<?php echo $_GET["filename"];?>.ogv" type="video/ogg">

<source data-res="240" src="files/videos/<?php echo $_GET["filename"];?>.ogv" type="video/ogg">

</video>

</body>

</html>

再依照實際需求修改~

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

Categories