<-- IE錯誤修正 --> RiS社群 | FileMaker 跨平台企業應用 - 瀏覽單個文章 - OneLinePlayer 免費網頁影音播放器,嵌入影片可自訂各種模式和按鈕樣式
瀏覽單個文章
  #1 (permalink)  
舊 2019-03-14
wowria wowria 目前離線
進階會員
 
註冊日期: 2008-08-09
住址: 台灣/台北
文章: 5,660
燈泡 OneLinePlayer 免費網頁影音播放器,嵌入影片可自訂各種模式和按鈕樣式

Click the image to open in full size.

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



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

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

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

Click the image to open in full size.

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

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

使用教學

STEP 1

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

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

Click the image to open in full size.

STEP 2

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

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

Click the image to open in full size.

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

Click the image to open in full size.

STEP 3

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

Click the image to open in full size.

STEP 4

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

Click the image to open in full size.

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

Click the image to open in full size.

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

Click the image to open in full size. Click the image to open in full size. Click the image to open in full size. Click the image to open in full size. Click the image to open in full size. Click the image to open in full size.


來源...

回覆時引用此篇文章