RiS社群 | FileMaker  跨平台企業應用

RiS社群 | FileMaker 跨平台企業應用 (http://forum.j2eemx.com/)
-   精選好用APP等相關網站資源 (Website Reviews) (http://forum.j2eemx.com/forum51/)
-   -   OneLinePlayer 免費網頁影音播放器,嵌入影片可自訂各種模式和按鈕樣式 (http://forum.j2eemx.com/forum51/thread27629.html)

wowria 2019-03-14 05:35 PM

OneLinePlayer 免費網頁影音播放器,嵌入影片可自訂各種模式和按鈕樣式
 
https://free.com.tw/blog/wp-content/...02-27_1022.png

如果要在個人網站、部落格、作品集或社交媒體放入影片,大部分開發者可能會選擇使用線上影音平台提供的播放器語法,而不會自行托管影片,因為影音檔案容量較大,也會影響整體網站載入速度。不過一般播放器不一定能呈現最佳效果,運用一些小技巧能讓影片嵌入時效果更理想,例如「如何嵌入 YouTube 影片設定自動重播、隱藏 Logo 或靜音播放?」或「嵌入 YouTube 影片為音樂播放器教學,僅保留音樂點擊自動播放」。



本文要介紹的 OneLinePlayer 是一款很簡單、功能完整的免費網頁影音播放器,可以在不顯示服務 Logo、不耗損畫質的情況下將影片完美嵌入網頁,相較於一般播放器來說速度加倍,支援自定高畫質預覽圖。OneLinePlayer 讓所有設定選項在同個畫面中完成,最終產生一段新的程式碼,即可以不同面貌在網頁嵌入影片。

要知道的是 OneLinePlayer 並不是一個線上影片托管服務,使用者仍得將影片上傳到影音平台,例如 YouTubeVimeo,再將網址貼上 OneLinePlayer 進行相關設定。

這項服務可以設定讓影片自動播放、自動暫停、循環、靜音或轉為 Gif 動畫模式,也能切換不同的配色模式,選擇讓播放器顯示那些按鈕(播放、時間軸、時間軸、音量、全螢幕、顯示 Logo)。

https://free.com.tw/blog/wp-content/...02-27_1042.png

至於瀏覽器支援範圍,在不同設定選項上也不盡相同,只有 Google Chrome 支援所有的項目,每個瀏覽器都有一些不支援的項目,在自動暫停(Autopause)和無縫串流兩個功能支援度較差,其他大致上沒太多問題。

網站名稱:OneLinePlayer
網站鏈結:https://onelineplayer.com/

使用教學

STEP 1

開啟 OneLinePlayer 將你要放入網頁影音播放器的影片網址複製貼上,範例是使用 Vimeo 平台網址,你也可以使用大部分台灣用戶較熟悉的 YouTube,貼上後從下方選擇要使用的畫質,例如 1080p、720p 或畫質較差的 360p,當然要看影片支援那些畫質版本。

OneLinePlayer 值得推薦的功能是高畫質預覽圖(HQ Preview),可從這個選項加入網址,連結到更高畫質的影片預覽圖片,圖片必須自行上傳托管。

https://free.com.tw/blog/wp-content/...02-27_1023.png

STEP 2

接著從下方選擇播放器尺寸,預設情況下會是「自適應設計」(Responsive),依照使用者的螢幕大小自動調整,當然你也可以自訂特定的播放器尺寸。

Adjustments 裡有各種常見或可能用到的模式,例如自動播放、自動暫停、循環播放、靜音,勾選後就會自動開啟該選項,也能從左側播放器進行預覽和測試。

https://free.com.tw/blog/wp-content/...02-27_1033.png

其中有個比較特別的「Gif Mode」是將影片轉為動畫模式顯示,當開啟這個選項,影片播放器的相關按鈕就不會顯示,當然也不能像影片控制快轉、倒轉等等,不過可能某些情況下會用到。

https://free.com.tw/blog/wp-content/...02-27_1034.png

STEP 3

再往底下拖曳,可以調整影片控制選項,包括要顯示、隱藏那些按鈕,OneLinePlayer 提供的按鈕包括播放、時間、播放軸、音量、全螢幕和 Logo ,如果想自訂播放器的相關按鈕顏色,可以開啟最底下的「Advanced Customization」進階自訂項目。

https://free.com.tw/blog/wp-content/...-27_1033-1.png

STEP 4

最後點選左側原始碼下方「Copy」就能複製 OneLinePlayer 產生的播放器程式碼。

https://free.com.tw/blog/wp-content/...02-27_1035.png

下圖就是 OneLinePlayer 播放器外觀,相較於 YouTube、Vimeo 提供的播放器來說看起來更乾淨、簡潔,當滑鼠游標移動到播放器才會顯示出相關按鈕,而這些按鈕無論是大小尺寸或風格都很一致,也不太會影響到影片瀏覽。

https://free.com.tw/blog/wp-content/...02-27_1036.png

值得一試的三個理由:
  1. 嵌入 YouTube、Vimeo 等影片來源,提供更多自訂功能
  2. 讓影片自動播放、自動暫停、循環、靜音或轉為 Gif 動畫模式
  3. 可調整色彩配置和播放器控制按鈕顯示
喜歡 OneLinePlayer 免費網頁影音播放器,嵌入影片可自訂各種模式和按鈕樣式 嗎?歡迎將免費資源網路社群加入書籤,以 Facebook、Twitter 或 Google+ 追蹤更新,獲取更多科技新知及免費資源相關介紹教學。

http://feeds.feedburner.com/~ff/freegroup?d=qj6IDK7rITs http://feeds.feedburner.com/~ff/free...xU:-BTjWOF_DHI http://feeds.feedburner.com/~ff/freegroup?d=I9og5sOYxJI http://feeds.feedburner.com/~ff/freegroup?d=7Q72WNTAKBA http://feeds.feedburner.com/~ff/freegroup?d=yIl2AUoC8zA http://feeds.feedburner.com/~ff/free...xU:kDLq2EXqxdQ


來源...


所有時間均為 +8。現在的時間是 07:57 AM

Powered by vBulletin® 版本 3.7.2
版權所有 ©2000 - 2019,Jelsoft Enterprises Ltd.
RiS 社群 ( 感謝明易資訊有限公司技術指導 ) - 使用3.7.2永久合法版權。
Ad Management by RedTyger


Content Relevant URLs by vBSEO 3.6.0 PL2