內容簡介
Video.js HLS Player 是一個易於使用的外掛，可以使用此定制的 video.js 播放器將響應式/流體（或固定寬度）HLS 影片輕鬆嵌入 WordPress 文章和頁面中。嵌入外部 .m3u8 HLS 影片檔案不能再簡單不過了。
Video.js HLS Player 功能
將 HLS 影片封裝嵌入文章/頁面或 WordPress 網站上的任何位置
為搜覽行動設備模式優化，嵌入響應式影片提供更好的用戶體驗
嵌入與所有主要瀏覽器兼容的 HTML5 影片
嵌入影片海報圖像
使用 videojs 播放器嵌入影片
在頁面呈現時自動播放影片
在捷徑內使用直接鏈接上傳到 WordPress 媒體庫的備用影片
無需安裝，安裝即可開始嵌入影片
與 WordPress 的最新版本輕量級兼容
無標誌的清爽播放器
其他 HTML5 支援檔案類型（MP4、WebM、Ogv）的後備方案
Video.js HLS Player 外掛使用方式
為了嵌入影片，創建一個新的文章/頁面，並使用以下捷徑：
[videojs_hls url="https://player.vimeo.com/external/xxxxxxxxx.m3u8"]
此處，「url」是 HLS 影片封裝檔案所在的位置。
影片捷徑選項
以下選項支援捷徑。
MP4
您可以在源 HLS 影片檔案之外指定 MP4 影片檔案。此參數為可選項。
[videojs_hls url="https://player.vimeo.com/external/xxxxxxxxx.m3u8" mp4="http://example.com/wp-content/uploads/videos/myvid.mp4"]
WebM
您可以在源 HLS 影片檔案之外指定 WebM 影片檔案。此參數為可選項。
[videojs_hls url="https://player.vimeo.com/external/xxxxxxxxx.m3u8" webm="http://example.com/wp-content/uploads/videos/myvid.webm"]
Ogv
您可以在源 HLS 影片檔案之外指定 Ogv 影片檔案。此參數為可選項。
[videojs_hls url="https://player.vimeo.com/external/xxxxxxxxx.m3u8" ogv="http://example.com/wp-content/uploads/videos/myvid.ogv"]
寬度
定義影片檔案的寬度（高度自動計算）。除非您想限制影片的最大寬度，否則不需要此選項。
[videojs_hls url="https://player.vimeo.com/external/xxxxxxxxx.m3u8" width="480"]
預載
指定影片在頁面載入時如何載入（如果需要）。預設為「自動」（載入整個影片），其他選項：
「metadata」- 在頁面載入時僅載入元數據
「none」- 不在頁面載入時載入影片
[videojs_hls url=”https://player.vimeo.com/external/xxxxxxxxx.m3u8″ preload=”metadata”]
控制
指示是否要顯示影片控制。預設為「true」。若要隱藏控制，請將此参数設置為「false」。
[videojs_hls url="https://player.vimeo.com/external/xxxxxxxxx.m3u8" controls="false"]
當您關閉控制時，用戶將無法與您的影片互動。建議您啟用無控制影片的自動播放。
自動播放
外掛標籤
開發者團隊
原文外掛簡介
Video.js HLS Player is a user-friendly plugin that allows you to easily embed responsive/fluid (or fixed width) HLS videos into WordPress posts and pages using this customized video.js player. Embedding externally hosted .m3u8 HLS video files couldn’t be easier.
Video.js HLS Player Features
Embed HLS video package into a post/page or anywhere on your WordPress site
Embed responsive videos for a better user experience while viewing from a mobile device
Embed HTML5 videos which are compatible with all major browsers
Embed videos with poster images
Embed videos using videojs player
Automatically play a video when the page is rendered
Embed fallback videos uploaded to your WordPress media library using direct links in the shortcode
No setup required, simply install and start embedding videos
Lightweight and compatible with the latest version of WordPress
Clean and sleek player with no watermark
Fallback for other HTML5-supported filetypes (MP4, WebM, Ogv)
Video.js HLS Player Plugin Usage
In order to embed a video create a new post/page and use the following shortcode:
[videojs_hls url="https://player.vimeo.com/external/xxxxxxxxx.m3u8"]
Here, “url” is the location of the HLS video package file.
Video Shortcode Options
The following options are supported in the shortcode.
MP4
You can specify an MP4 video file in addition to the source HLS video file. This parameter is optional.
[videojs_hls url="https://player.vimeo.com/external/xxxxxxxxx.m3u8" mp4="http://example.com/wp-content/uploads/videos/myvid.mp4"]
WebM
You can specify a WebM video file in addition to the source HLS video file. This parameter is optional.
[videojs_hls url="https://player.vimeo.com/external/xxxxxxxxx.m3u8" webm="http://example.com/wp-content/uploads/videos/myvid.webm"]
Ogv
You can specify a Ogv video file in addition to the source HLS video file. This parameter is optional.
[videojs_hls url="https://player.vimeo.com/external/xxxxxxxxx.m3u8" ogv="http://example.com/wp-content/uploads/videos/myvid.ogv"]
Width
Defines the width of the video file (Height is automatically calculated). This option is not required unless you want to limit the maximum width of the video.
[videojs_hls url="https://player.vimeo.com/external/xxxxxxxxx.m3u8" width="480"]
Preload
Specifies if and how the video should be loaded when the page loads. Defaults to “auto” (the video should be loaded entirely when the page loads). Other options:
“metadata” – only metadata should be loaded when the page loads
“none” – the video should not be loaded when the page loads
[videojs_hls url=”https://player.vimeo.com/external/xxxxxxxxx.m3u8″ preload=”metadata”]
Controls
Specifies if video controls should be displayed. Defaults to “true”. In order to hide controls set this parameter to “false”.
[videojs_hls url="https://player.vimeo.com/external/xxxxxxxxx.m3u8" controls="false"]
When you disable controls users will not be able to interact with your videos. So It is recommended that you enable autoplay for a video with no controls.
Autoplay
Causes the video file to automatically play when the page loads.
[videojs_hls url="https://player.vimeo.com/external/xxxxxxxxx.m3u8" autoplay="true"]
Poster
Defines image to show as placeholder before the video plays.
[videojs_hls url="https://player.vimeo.com/external/xxxxxxxxx.m3u8" poster="http://example.com/wp-content/uploads/poster.jpg"]
Loop
Causes the video file to loop to beginning when finished and automatically continue playing.
[videojs_hls url="https://player.vimeo.com/external/xxxxxxxxx.m3u8" loop="true"]
Muted
Specifies that the audio output of the video should be muted.
[videojs_hls url="https://player.vimeo.com/external/xxxxxxxxx.m3u8" muted="true"]
iOS Inline
Force the video to play inline on iOS 10+
[videojs_hls url="https://player.vimeo.com/external/xxxxxxxxx.m3u8" inline="true"]
For detailed documentation please visit the Video.js HLS Player plugin page
