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

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

緣起

大概今年六月的時候,有不少同學問我怎麼調整播放速度。起初,我是直接打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供我自己測試播放影片。

url :播放連結(目前僅支持檔案來源),若不為空則優先使用
v :課程代碼
ep :課程集數

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

TODO

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

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

發佈留言

%d 位部落客按了讚: