Video.js – 基本播放以及字幕

水平居中、高度固定的播放器

以下為完成意義圖

字幕

要讓影片加上字幕只須加上 <track> 即可,例如這樣

不過還需要注意字幕格式

原始的字幕

這個字幕是不能直接使用,必須做以下修改

  • 開頭加上 WEBVTT
  • 將時間小數點的逗號改為小數點

自訂字幕格式

設定靠左對齊、黃色字

CSS

Facebook OAuth v3.1 臉書登入 – 使用 PHP SDK

流程

  1. 下載 PHP SDK php-graph-sdk (v5)
  2. 將下載的 php-graph-sdk-5.x.zip 檔內的 src\Facebook 解壓縮到網站內
  3. 準備兩個網站路徑:登入、OAuth
  4. https://developers.facebook.com/apps 選擇臉書登入 app
    1. 設定 → 進階:升級 API 版本到 v3.1

    2. 產品 → 設定:將預計的 OAuth 路徑填入 有效的 OAuth 重新導向 URI
  5. 準備產生臉書登入連結及處理 OAuth 資訊到取得臉書個人資料 id, name, email

PHP 程式碼

這裡只列出 Facebook OAuth class 的程式碼,前面還有一個 index.php 處理網站入口,例如後面說的 session 錯誤就是寫在 index.php 內

$UserInfo 如此即可得到該登入使用者在 Facebook 的基本資料 id, name, email

無法載入網址: 這個網址的網域未包含在應用程式的網域中。若要載入這個網址,請在應用程式設定的「應用程式網域」欄位中新增應用程式的所有的網域及子網域。

請使用 Facebook 提供 SDK ,注意流程即可避免此問題

Facebook SDK returned an error: Cross-site request forgery validation failed. Required param “state” missing from persistent data.

PHP 必須開啟 session_start();

為什麼 Facebook 使用 PHP 不是使用 Javascript ?

因為 Facebook 的 js 寫的很爛只能跑在「較新版」的 Chrome 例如 v62 ,而 Google 可以跑在 Chrome v44 所以使用 PHP 沒有 js 相容性問題

Let’s Encrypt – *.hoyo.idv.tw 通配網域證書

參考

取得 certbot-auto 及執行

 

編輯 DNS

重新啟動 DNS

驗證

Enter 繼續執行,沒問題出現以下畫面就代表證書建立完成

更新證書

必須從頭執行一次,意思就是重新驗證 DNS 後才能產生新的證書,無法像單一網址一樣使用 renew 指令更新

Hoyo 是收到 20 天前到期通知信才進行更新,還沒去找自動更新方法

Hoyo 教你串金流 – 綠界

Hoyo 提供原廠都沒有的測試工具

下載綠界串接文件

需要下載 「全方位金流 API 技術文件」以及「PHP SDK」

撰寫文件時為 2018-6-29 , API 文件版本 5.1.17

流程

雖然金流 API 文件第 2 章有交易流程說明,可是第一次使用看懂的機率是極低的,所以 Hoyo 另外整理為

  1. 送出一個訂單表單送到「介接路徑」
  2. 準備接收綠界付款結果的資訊

訂單表單

網頁表單 – f.html

  • MerchantTradeNo : 訂單編號,一個編號只能用一次,所以針對實際情況不能直接將網站的訂單編號送出,必須使用一個對應的變動編號,這個問題後面再討論
  • ReturnURL : 必須要可以對外訪問的網址,所以沒有自己的網站是不能接線上支付 (沒有意義)
  • MerchantID : 測試的商家 value 都要根據 API 文件設定
  • HashKey 同上
  • HashIV 同上

送給 PHP 計算 CheckMacValue – Ecpay.php

  • PHP 的作用只有計算 CheckMacValue 這個值之後附加到表單再送到綠界
  • 送出之後的所有錯誤綠界都會清楚的回應

接收付款結果資訊

payEcpay.php

  • 根據回傳格式說明,至少要成功支付以及驗證碼正確才進行後續處理,否則可能是造假回傳資訊

模擬綠界回傳表單

可以自己設計表單模擬綠界回傳送出資訊,方便接收除錯

綠界回傳資訊

使用 print_r($_POST); 把回傳資訊展開大概就是長這樣

將 Windows 功能轉換成 REST API – 以 Microsoft Office Document Imaging 為例

小白先看這裡

Microsoft Office Document Imaging 使用在 Windows Form 的情況

至少要先在 Windows Form 應用程式專案下可以順利運作有基礎的概念,才有辦法轉換到主控台應用程式

命令提示 Console Application

最後 Program.cs 長這樣

使用 PHP 包裝成 REST API

如此即可將 GUI 轉換成 CLI 方便 PHP 使用

你問 REST API 在哪? 都轉換到 PHP 可以直接取得辨識後結果了,剩下的就是自己的創意了啊

取得臺灣即時氣象資訊

目標:取得台灣地區的即時氣象資訊

交通部中央氣象局-開放資料平臺

  1. 加入會員
  2. 登入會員後網站選單會多一個開放資料目錄,裡面有資料清單的詳細說明
  3. 切換到「資料使用說明」內有「取得授權碼」,點選即可得到下載授權碼
  4. 找到符合需求的資料清單代碼後,套用到下載網址的 dataid 即可

 

Сurrent weather and forecast – OpenWeatherMap

  1. 加入會員
  2. OpenWeatherMap 會寄信給你,內有你的 API 連結 appid 和範例
  3. 然後就可以根據這個範例和 appid 使用網站上的 API 說明