網頁

2016年10月15日

|

網頁播放 MP4 影片 連結 ( GoogleDrive 外連工具轉換器 應用)

Views:
在之前, 寫了一篇 "新一代 GoogleDrive 外連工具轉換器", 可以把 js / photo 回到 google drive, 用外連的方式, 掛到 blogspot 中. (算是成功)

接著, 有網友提問 : " Google Drive MP4 影片外連要怎麼成功使用 jwplayer ? "

測試了一天, 得出完整答案 : 可以 (是不是太行貨 😅 )

但是有一定的要求 ...
1) mp4 影片, 要用 H.264 方式儲存.
2) 用 "GoogleDrive 外連工具轉換器" 得出連結
3) Blogger 網頁, 用 HTML5 掛入. (IE8 或以下, 未能支援 HTML5 )
  a) jwplayer 用網上連繫方式載入 (即是需要成為註冊用戶, 網上產生連結文件)
  b) 其實用 HTML5 的 video tag 掛入也可以 (更是簡單)

先解決第 1 點,
用一些"影片轉換"軟件, 把影片用 H.264 方式壓制
( e.g. VidCoder https://vidcoder.codeplex.com/ )

第 2 步, 把 mp4 放上 google drive, 點出[分享], 用外連轉換器得出新的外連網址
(影片需要加入 &export=download 選項)

3a) 到 JW Player 主頁, 登記為註冊用戶 https://www.jwplayer.com/pricing/ ( FREE 版本已經可以)

登入後, 先在 VIDEO 裡, 加入影片連結 [ADD VIDEO URL] (外連轉換器得出新的外連網址)
按[Build Your Embed Code], 選擇 PLAYER & CONTENT (即 H.264 mp4 影片)
建議用 iframe 格式, 可以先按 [PREVIEW PAGE], 測試結果.
點下[ COPY EMBED CODE], 貼到網頁的 HTML 編輯即可.

3b) HTML5 video tag 更是簡單
網頁的 HTML 編輯裡, 貼上這個...
<video width="640" height="480" controls>
<source src="外連轉換器得出新的外連網址" type='video/mp4'/>
Your browser does not support the video tag.
</video>

16-Oct-2016 a.m. 修改網誌展示
原本, 這裡是由我的 Google Drive 直接連結播放.
但是, 考慮到"流量"問題, 現時只好放入參考圖片, 說明是可以正確展示.



問題 : 文件過大, 不能由 Direct download link 直接下載
以下圖片解釋了, 以前可用的 "&confirm=no_antivirus" 下載參數, 已經失效.
當滑鼠指向 [仍要下載]時, 可以看到紅色箭頭所示, "&confirm=VnuK", 這是一個一次性的下載參數, 每次不同, 現時無法自動完成.

10 則留言:

  1. 真的太強了,謝謝你花時間研究

    回覆刪除
  2. 有個問題 drive 系統只能針對小於 25 MB 的檔案掃描病毒。如果檔案較大,系統會顯示警告訊息,說明無法掃描該檔案。
    超過25MB 顯示 Google 雲端硬碟無法為這個檔案掃描病毒 https://drive.google.com/uc?id=0B2T8ocRjO6uXQUVQczU4akRIaHM&export=download
    出現這個就無法加入播放了,有可以解決的辦法嗎

    回覆刪除
    回覆
    1. 網誌裡, 已經加入說明. 現時未能找到可行方法.
      而且, Google Drive 有流量限制. 所以不建議大型文件, 不停下載, 超出流量.
      一旦超量, Google Drive 暫停連結, 以致 js 文件都失效時, 網頁裡多個 js 控制項停止運作, 得不償失. 😩

      刪除
    2. 你好, 已經找到新方式, 突破 25M 限制, 可參考新一篇網誌 "網頁直播 MP4 可超過 25M 影片限制 (GoogleDrive 外連工具轉換器 應用 V2)"
      http://freetongdiy.blogspot.hk/2016/10/mp4-25m-googledrive-v2.html

      刪除
  3. 請問一下之前在其他視頻網站上有看過把GoogleDrive上傳的mp4影片,改用JWPLAY播放器顯示,且每部影片基本上都超過25M的限制,也把有關GoogleDrive的連結部分隱藏掉。
    網站目前關閉了,也無法詢問他們站長,這是那時候看到的程式碼https://drive.google.com/open?id=0BxQZEbNSahbkMlhxLTBFdXdjZVE
    我對程式不了解,但我的網站需要這功能來隱藏GoogleDrive的網址.
    不知道站長對這方邊有無研究!?

    回覆刪除
    回覆
    1. JWPlayer 免費版, 也可以上載 MP4, 但有一定容量, 這個便沒有 Google link.
      看過那段程式碼, 看似是一個亂碼還原程式. 這裡只是核心部分, 還要跟網頁各個參數相連結, 才可使用. 單看這一段, 難以理解全部.
      "亂碼還原"也有不足之處, 在原碼中確是看不到 Google link, 一旦還原, 懂得的, 還是可以把原 link 找出棧來.

      刪除
    2. 感謝站長抽空回覆~
      因為網站的影片都是用GoogleDrive上傳影片將近有1TB,要通通改用JWPLAY上傳得花不少時間.
      那時候看除了可以隱藏Google link外.還可以在播放器上放網站的logo,彈幕等等...
      彈幕功能和播放器的界面也和免費版JWPLAY不同,也確定他們沒有花錢升級JWPLAY.
      原理有點像是這個網站http://api.dulbacloud.com/login.php
      點選嵌入後放上GoogleDrive link下面就會跑出一段已經轉換成JWPlayer的link了,不過光等他顯示播放器都要等1~2分鐘速度不理想所以放棄.

      刪除
    3. 找到一個, 看似可行的, 不妨試試.
      http://wpplayer.org/demo-video-player/

      刪除
    4. 嗨 站長~新年快樂喔!
      剛試了這個網站好像不行用了.
      之後找了一下,有看到一個https://github.com/lmly9193/JwPlayer-For-GoogleDrive-Video他有寫到透過JwPlayer撥放GoogleDrive裡的影片,似乎有完整的程式碼!??

      刪除
    5. 嗨 ~新年快樂!
      wpplayer 好像真的連不上, 可惜.
      那個 JwPlayer-For-GoogleDrive-Video, 他放出了整個 project, 但是沒有執行平台, 要是你自己找一個可運行 PHP 的機器才成.
      但是 Blogger 不可執行 PHP.

      刪除
😀

★ 謝謝留言,留下的一句話,已經是很好的推動力 !
★ 勾選右下角的「通知我 」可以由電郵收到留言回覆!
★ 留言與文章無關的主題時,請到頂列「留言版 GuestBook」暢所欲言。
★ 若發佈留言後,留言不見了。可能被系統錯誤判斷為垃圾留言,請不用擔心,我會盡快將留言恢復。
◎ 本留言區已經支援 Unicode Emoji,對應 Win10 的浮動鍵盤。歡迎貼上,增加效果。
◎ 支援 YouTube 超連結對應,支援 jpg , jpeg , gif , png 這4種圖片顯示格式。
◎ 文章介紹 2016 表情符號 V2 更新版 ( Unicode Emoji 格式 ) 顯示策劃