html5 媒體播放器

和一些專家討教html5播放器的問題，有些感觸和想法，所以做些記錄
首先問一下google可以找到w3c規範
http://www.w3schools.com/html/html5_video.asp

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video> 
你要用video tag時基本語法如上述。
 Your browser does not support the video tag.
這一句是說如果你的瀏覽器不支援時會看到這一條。
你也可以把這一條改成之前html的影音語法
 其他詳細說明，網頁寫得很詳細。

在下面寫支援html5的影音檔有mp4 、ogg、 webm三種，如果要用video tag可能伺服器要轉檔至少二種mp4 webm或mp4 ogv。mp4非開放格式所以有一些瀏覽器不支援，而webm和ogv則為自由軟體瀏覽器所支援。

 個人也實作了一下，把新北市的nhk和下課花露米轉檔一下(我找了三台電腦轉了二天)，ffmpeg實在太強了，sh一下，放著讓它轉就完成了轉檔（有人說四百多個檔案不容易）。
另外自己做一個偏心的事，就是當wmv轉mp4和ogv時，特別把ogv的參數調好些(因為個人作品優先支援自由軟體)，所以用firefox看會比較好些。由於原始是wmv檔，所以轉出來不會比原始檔好(除非拿出原版光碟慢慢轉)。改成hmtl5時網頁可以支援跨台和跨載具。


作品完成如下(限新北市IP連結）
 http://mail.wdps.ntpc.edu.tw/~es/esmovieshow/

　　

關閉ubuntu錯誤報告

記錄一下，關閉ubuntu錯誤報告。
ubuntu的錯誤報告，有時會讓人有點煩(雖是好意)，如何關掉？
參考網站
http://www.linuxidc.com/Linux/2012-07/65530.htm

去編輯 /etc/default/apport
把enabled=1改成enabled=0

如果用下指令方式
执行 sudo sed -i ‘s/enabled=1/enabled=0/’ /etc/default/apport && sudo service apport restart

moodle2中輸入分數

有學校老師向我提出他要在moodle中打數學考卷，要怎麼辦？看了很多文章，只說一個文字過濾器要打開，但我做了半天，可以輸入分數，但是無法顯示。在1/26日python聚會，趕快請出大神(展嘉和保太老師)，真的比google還神，順利解決問題。在此做個記錄，以免日後忘了，也感謝他們的付出。
1.要能輸入分數，在moodle中要把文字過濾器打開:
網站管理/插件/文字過濾/過濾器設定/ Tex標記法

 

2.檢查Tex標記法中的指令是否有效，最好在伺服器中要能找到指令，例如latex....，如何知道指今位置呢？可以用whereis問一下系統，如果指令找不到表示有些套件未安裝好，請安裝相關套件，在ubuntu下可以試著安裝texlive imagemagick

sudo apt-get install texlive imagemagick 

我的問題就這樣解決了，感謝二位大神老師。

教師使用操作相關錄影檔於下列網址:

http://media.wdps.ntpc.edu.tw/moodle/mod/resource/view.php?id=468

讓角色跟著滑桿跑

上光輝老師的課，想到讓角色跟著滑桿值跑的做法，做個記錄，方法很多，記錄二種

xampp in ezgoX 啟用xmlrpc

在xampp 中想啟用xmlrpc，預設值是未啟動的。
如果是在ubuntu下想啟動php支援xmlrpc

指令apt-get install php5-xmlrpc，
修改php.ini把;extension=php_xmlrpc.dll前面的;號拿掉
重新啟動apache

在xampp中做法就比較麻煩。
1. apt-get install php5-xmlrpc
2.找到xmlrpc.so(可能在/usr/lib/php5/20090626+lfs)拷貝到/opt/lampp/

lib/php/extensions/no-debug-non-zts-20090626

3.把xmlrpc.so改成可執行檔

chmod +x xmlrpc.so

4.移除系統的xmlrpc

apt-get purge php5-xmlrpc

5.修改/opt/lampp/etc/php.ini，增加一條extension="xmlrpc.so"同時確定extension=php_xmlrpc.dll這一條前面有;號

6.重新啟動lampp

這樣就可以看到xampp支援php5-xmlprc

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，但可以做到完全跨平台。個人功力不足，只能做到此，暫時解決問題。

錄音效卡聲音軟體-Audio Recorder for Linux

在Linux下如何把音效卡播出的聲音錄下來，在國教院時看紹裳主任demo，這招在教學上會有用，查了一下資料，原來軟體叫做Audio Recorder，爬了一下文。參考網址:
http://www.omgubuntu.co.uk/2011/03/audio-recorder-for-linux-easily-record-audio-streams-to-mp3/

https://launchpad.net/~osmoma/+archive/audio-recorder
做法加入套件來源庫

ubuntu 12.04

deb http://ppa.launchpad.net/osmoma/audio-recorder/ubuntu precise main 
deb-src http://ppa.launchpad.net/osmoma/audio-recorder/ubuntu precise main 

還要加入金鑰1024R/5139BD61
再做安裝sudo apt-get updatesudo apt-get install audio-recorder



ubuntu 12.10 13.04

sudo apt-add-repository ppa:osmoma/audio-recorder
sudo apt-get update && sudo apt-get install audio-recorder 

 

安裝好後在影音中就會多一個audio-recorder程式，這個程式可以很容易的把音效卡播出的聲音錄下來，

看是要存成什麼檔案格式就自己決定了。 

 

一不小心就把它中文化好了

中文化檔案

https://docs.google.com/open?id=0Bz6-J_NwALFBYUFkUHE0NlpYLUE

下載後用最高權限放到 /usr/share/locale/zh_TW/LC_MESSAGES/中

就會有中文了。