網頁

2016年10月22日

網頁直播 MP4 (Google Drive 影片) 可超過 25M 影片限制

上回網友提問, 網頁嵌入MP4影片, 有 25M 大小限制.
過大時不能直接播放, 需要按下確定鍵才可以繼續.
當時無法解決.

今日找到了一段可用的方法, 用的是 <iframe> 掛入方式.
<iframe src="https://drive.google.com/file/d/0B9w7kASMsnuxUDXXXXXXXXX/preview" width="640" height="480"></iframe>
非常簡單的結構,
src= 就是 Google Drive MP4 文件[分享]連結的前段部分
加入 " /preview " 結尾, 指示是影片瀏覽
加上 "height=" & "width=" 設定 iframe 框架大小 (可自行設定)

1) 一個已經設定分享的MP4, 打開它或按下預覽.
 2) 右上方點下[更多], 點選[在新視窗開啟]
 3) 右上方點下[更多], 點選[嵌入項目]
 4) 複製整段 iframe 編碼, 貼到網誌 HTML 編輯位置裡.

加入網頁後, 它看似自動跟 YouTube 的 HTML5 播放器自動掛上, 如下圖所示...
上框是一個 2G 大小的 MP4, 它會顯示"處理中", 等一段長時間後, 會得到正確的展現.
而下框是一個 77M 的 MP4, 很快便看到結果.
(因"流量限制"這裡不帶出連結展示, 只列出實況圖片.)


2016年10月15日

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

在之前, 寫了一篇 "新一代 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", 這是一個一次性的下載參數, 每次不同, 現時無法自動完成.

2016年10月1日

新一代 GoogleDrive 外連工具轉換器


已經知到 Google Drive 的文件外連功能. 會在 2016年8月份 關閉.
"Google Drive的網絡託管服務即將關閉"
而我的 Blogspot 也用了不少的 javascript 外連文件. 所以要搬家了.

一開始我把所有的 js 文件, 放到 Onedrive, 而且運行順利.
還有把它一一分享, 可惜, 並不是每位網友都可以使用. (新舊註冊用戶有不同權限)

今天已經是 10月份, 確實了 googledrive.com/host/[doc id] 的方式已經失效.
測試中, 發現 GoogleDrive 遇還有第二種外連方式, 而且有效.

下方是"外連工具轉換器", 以及它的使用步驟.
希望可以幫到需要使用 GoogleDrive 作為主力外連的網友. 謝

新一代而且有效的 GoogleDrive 外連工具轉換器
(在 Plogspot 裡, 如何使用 javascript 外連, 請參考其他的網上說明)

 
這個圖片是由 GoogleDrive 外連過來 (如果看不到,即外連失效),
另外, 下列的轉換程式, 它的 javascript 部份也是由 GoogleDrive 外連過來.
如果按下 [外連轉換]而沒有反應, 也是外連失效. 敬請留言報告一下.


GoogleDrive 公開鏈接:

GoogleDrive 文件類型:

轉換後的外鏈地址:

(進階設定) : |

步驟如下...
1) 上載 javascript 文件到 GoogleDrive. e.g. "googledrive_link.js"
2) 右鍵選取 [分享]

3) 它會列出一組 link, 按 [複製連結], 再按[完成]
4) 貼到 "外連工具轉換器" 的 "GoogleDrive 公開鏈接" 裡
5) "GoogleDrive文件類型" 是寫下文件名稱/程式功能, 方便而已, 沒有也不影響轉換功能
6) 按下 [外連轉換] 後 "轉換後的外鏈地址"便是 外連的完整地址, 可複製使用.



進階設定 說明...
外連多以 script 方式掛入網頁裡, 這個是 script 的 使用/不使用 選擇
文件的分享方式, 由 "&export=" 掛入, view 可用在圖片, 而 download 用在文件. e.g. doc; js ...
HTML編輯器不支援 [&] 這個標籤碼時, 可改用HTML編碼 [&amp;] 表示.
網頁裡直接嵌入MP4 影片