Vue.js 線上看綜藝 播放清單 來源自 youtube 及 bilibili

2017-07-25

使用 Vue.js 作一個簡單的線上看綜藝播放列表

這裡請 https://hsin.tw/tv

原始碼放在 github

原本想要放在 github page
結果因為 bilibili 沒有現成在前端可以用 javascript 取得的 api
所以還是得靠一部分後端的功能才能完成 bilibili 部分
( Youtube 部分倒是全部前端即可完成)

Youtube 取得播放列表有官方的 API
不過也就需要申請 api key http://console.developers.google.com/
主要用到兩個 api
1. 取得播放列表的資訊
https://developers.google.com/youtube/v3/guides/implementation/playlists
2. 取得播放列表清單
https://developers.google.com/youtube/v3/docs/playlistItems/list

bilibili 沒有官方的 API
所以就是看他網頁怎麼接收資訊的
不過竟然沒有防外部連線
是滿意外的 哈
(但有防的話 我也就沒辦法寫這部份了)

以下是有用到的套件或工具 由衷感謝

Vue.js
Vue.Draggable
axios
store.js
vue-simple-spinner
normalize.css
Font Awesome
Requests
Gulp
less

一開始想做這東西是因為手機上看 youtube app 的播放列表
標題都太短了 (他們很愛在標題前面加廣告什麼的)
害我都看不出來每一期的標題或是不是重播
再加上還沒用 Vue.js 寫過什麼專案
就一起加進來試試看了

做完發現還要貼上網址
好像有點不方便…
不過就先這樣吧

線上看綜藝 這裡請 https://hsin.tw/tv

發表迴響

彙整

分類