我的 Html5 Video 播放機


myVideo 哥的播放機



自製 HTML5 播放機 UI，可以調整播放速度、合併多個不同來源的 MP4 檔案合併時間軸接序播放，基於jQuery Plugin方式撰寫。



程式資訊：

Author：
         Feather Mountain(3WA羽山) http://3wa.tw
官網：
         http://3wa.tw/demo/htm/myVideo/
         https://github.com/shadowjohn/myVideo
程式名稱：
         mybox 哥的播放機
Donwload：
         myVideo-lastest.js     myVideo.css    
Key Word：
         Html5 Video Player Merge

功能參數說明：

參數或方法 名稱 測試
傳統用法 
  <head>
    <!--在 head 加入 -->
    <script src="http://sunnyriver.3wa.tw/inc/javascript/jquery/myVideo/myVideo-lastest.js"></script>
    <link href="http://sunnyriver.3wa.tw/inc/javascript/jquery/myVideo/myVideo.css" rel="stylesheet" type="text/css" />
    <script>
      $(document).ready(function(){
        $("#demo1").myVideo();
      });
    </script> 
  </head>
  <body>
    <video id="demo1" poster="http://sunnyriver.3wa.tw/demo/htm/myVideo/demo1/20200911_1599757205758_1599753607320.png">
      <source src="http://sunnyriver.3wa.tw/demo/htm/myVideo/demo1/20200911_1599757205758_1599753607320.mp4" type="video/mp4">
    </video>
  </body>
執行
基本參數： 
  {
    'width': '320px', /*調整寬*/
    'height':'240px', /*調整高*/
    'merge': false    /*不合併*/
  }
執行
參數說明： 
  {
    'width': '320px', /*調整寬*/
    'height':'240px', /*調整高*/
    'merge': true     /* 合併 */
  }
  
  //合併影片時，建議可以在 source 加一個參數，如 req_duration="471.388997"，如此可以加速載入速度
  //duration 建議事先用 ffprobe 查詢，語法：ffprobe 20200911_1599793208459_1599789604914.mp4 -show_streams -select_streams v:0 -of json ooxx.mp4
  
  <video id="demo1" poster="http://sunnyriver.3wa.tw/demo/htm/myVideo/demo1/20200911_1599757205758_1599753607320.png">    
    <source req_duration="16.684" src="https://images.all-free-download.com/footage_preview/mp4/deer_animal_food_eating_bushes_474.mp4">
    <source req_duration="10.544" src="https://images.all-free-download.com/footage_preview/mp4/bird_small_animal_feathers_river_679.mp4" type="video/mp4">
  </video>
執行

ChangeLog

* Fri Sep 11 2020 Feather Mountain <http://3wa.tw> 0.01
- First Initial.