[網頁開發] 小工具-播放器

其實這個東西實作起來並沒有多難，但我的記憶力太差了。想說寫下來以後好自己維護。

緣起

大概今年六月的時候，有不少同學問我怎麼調整播放速度。起初，我是直接打js出來讓大家去console調，但老實說，用這種方式去處理也太麻煩，乾脆弄個播放器給大家用吧！

本來我是用JAVA+ffmpeg寫一個簡單的播放軟體，但有同學覺得太麻煩，還要下載 _(┐「ε:)_

所以後來就寫了播放器這個頁面，雖然沒什麼人在意我是怎麼寫的，但我還是要寫一些給未來自己看的東西。

伺服器端是用node.js，然後用jade渲染(我比較喜歡兔子圖標，而且也懶得更新)。然後大多頁面布局都照著NES.css這個CSS框架進行，這真的很花時間，畢竟我是美工苦手na。

功能上，除了一開始準備弄的播放速度調整，後來還加了課程分享的功能，然後防injection的部分我寫得很亂，希望以後能看懂。

基本操作是先選擇分流，所謂的分流其實是原始課程連結裡的playvideo(0-3)，不知道就要一個一個試，大部分都是3(該部會跟年級相關吧...？)。而URL裡則要填入連結或是課程代碼，最後要選集，我記得默認會是第一集......吧？忘了

按下Search之後，video標籤的src就會變成搜尋的課程連結，簡化了困難的手動找出URL(？

近年來，多數的影音分享平台，媒體來源都是HLS，我想同心以後也有可能跟進？雖然沒看過同心的對手哈佛的影片，但我有用他們管理帳號登進去過(不知道要不要投到HITCON的ZeroDay，但老實說這漏洞不算大，帳號權限不高)，哈佛有用blob去加密，這代表他的資安防護確實有比同心強很多。

cyberpunk 2077風格的按鈕(這真的弄很久，幾乎重寫css了)

頁面參數

這網站之後應該會更新大型API，但目前只暫時弄出了簡易API供我自己測試播放影片。

日後會加入YT、anime1的連結播放功能，稍微看了一下，anime1的有點困難。YT的話本來就可以嵌入頁面，所以會比較簡單。

TODO

畢竟我再一年就不用看同心補課影片，所以應該加點其他功能，廢物再利用。之後我有計畫把全部網站改放到VPS上，這樣就可以再加一些轉檔之類的伺服器端功能呢。

• 認真重寫隱私權條款(怕被告na，但現在的應該也沒有壞到哪裡去)。
• 高級一點的API，還有串流播放功能。
• 一些新頁面。
• 放影片的DC機器人，但不知道會不會很吃效能。
• 自動分辨來源(playvideo)，因為跨域，所以不能用ajax，這樣就要從伺服器端下手，但感覺好麻煩