內容簡介
Video.js HTML5 Player 是一個支持桌面和移動裝置視頻播放的用戶友好的外掛。它讓你輕鬆嵌入自主託管的視頻文件或使用 Video.js 庫的外掛視頻文件。
Video.js HTML5 Player 特點
嵌入 MP4 視頻文件到帖子/頁面或你的 WordPress 網站的任何位置
嵌入響應式視頻，以實現更好的移動裝置觀看體驗
嵌入與所有主流瀏覽器兼容的 HTML5 視頻
嵌入帶封面圖片的視頻
使用 videojs 播放器嵌入視頻
當頁面呈現時自動播放視頻
在短碼中使用直接鏈接嵌入上傳到 WordPress 媒體庫的視頻
無需設置，只需安裝即可開始嵌入視頻
輕量級且兼容 WordPress 最新版本
無水印的乾淨而光滑的播放器
其他 HTML5 支持的文件類型的故障排除處理(WebM，Ogv)
HTTP 流
Video.js HTML5 Player 添加組件
禁用右鍵
如何使用 Video.js HTML5 播放器
為了嵌入視頻，創建一個新的帖子/頁面，並使用以下短碼：
[videojs_video url="https://example.com/wp-content/uploads/videos/myvid.mp4"]
這裡，“url”是 MP4 視頻源文件（H.264 編碼）的位置。您需要使用實際的視頻文件 URL 替換示例 URL。
視頻短碼選項
短碼支持以下選項。
WebM
你可以指定一個 WebM 視頻文件，以外掛源MP4視頻文件之外的方式。此參數是可選的。
[videojs_video url="https://example.com/wp-content/uploads/videos/myvid.mp4" webm="https://example.com/wp-content/uploads/videos/myvid.webm"]
Ogv
在指定來源 MP4 和 WebM 視頻文件的情況下，您可以指定一個 Ogv 視頻文件。此參數是可選的。
[videojs_video url="https://example.com/wp-content/uploads/videos/myvid.mp4" webm="https://example.com/wp-content/uploads/videos/myvid.webm" ogv="https://example.com/wp-content/uploads/videos/myvid.ogv"]
寬度
定義視頻文件的寬度（高度自動計算）。此選項不是必需的，除非您要限制視頻的最大寬度。
[videojs_video url="https://example.com/wp-content/uploads/videos/myvid.mp4" width="480"]
預加載
指定當頁面加載時視頻應如何加載。默認為“auto”（頁面加載時應完全加載視頻）。其他選項：
“metadata” - 頁面加載時僅加載元數據
“none” - 頁面加載時視頻不應加載
[videojs_video url=”https://example.com/wp-content/uploads/videos/myvid.mp4″ preload=”metadata”]
控制器
指定應顯示視頻控制器。默認為“true”。為了隱藏控制器，將該參數設置為“false”。
[videojs_video url="https://example.com/wp-content/uploads/videos/myvid.mp4" controls="false"]
當您禁用控制器時，用戶將無法與您的視頻進行交互。
外掛標籤
開發者團隊
原文外掛簡介
Video.js HTML5 Player is a user-friendly plugin that supports video playback on desktop and mobile devices. It makes super easy for you to embed both self-hosted video files or video files that are externally hosted using Video.js library.
Video.js HTML5 Player Add-ons
Disable Right Click
Themes
Video.js HTML5 Player Features
Embed MP4 video files 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 modern browsers
Embed videos with poster images
Embed videos using videojs player
Automatically play a video when the page is rendered if the device and browser support it
Embed videos uploaded to your WordPress media library using direct links in the shortcode
Clean and sleek player with no watermark
fallbacks for other HTML5-supported filetypes (WebM, Ogv)
HTTP streaming
How to Use Video.js HTML5 Player
In order to embed a video create a new post/page and use the following shortcode:
[videojs_video url="https://example.com/wp-content/uploads/videos/myvid.mp4"]
Here, “url” is the location of the MP4 video source file (H.264 encoded). You need to replace the sample URL with the actual URL of the video file.
Video Shortcode Options
The following options are supported in the shortcode.
WebM
You can specify a WebM video file in addition to the source MP4 video file. This parameter is optional.
[videojs_video url="https://example.com/wp-content/uploads/videos/myvid.mp4" webm="https://example.com/wp-content/uploads/videos/myvid.webm"]
Ogv
You can specify a Ogv video file in addition to the source MP4 & WebM video files. This parameter is optional.
[videojs_video url="https://example.com/wp-content/uploads/videos/myvid.mp4" webm="https://example.com/wp-content/uploads/videos/myvid.webm" ogv="https://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_video url="https://example.com/wp-content/uploads/videos/myvid.mp4" 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_video url=”https://example.com/wp-content/uploads/videos/myvid.mp4″ preload=”metadata”]
Controls
Specifies that video controls should be displayed. Defaults to “true”. In order to hide controls set this parameter to “false”.
[videojs_video url="https://example.com/wp-content/uploads/videos/myvid.mp4" 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_video url="https://example.com/wp-content/uploads/videos/myvid.mp4" autoplay="true"]
Poster
Defines image to show as placeholder before the video plays.
[videojs_video url="https://example.com/wp-content/uploads/videos/myvid.mp4" poster="https://example.com/wp-content/uploads/poster.jpg"]
Loop
Causes the video file to loop to beginning when finished and automatically continue playing.
[videojs_video url="https://example.com/wp-content/uploads/videos/myvid.mp4" loop="true"]
Muted
Specifies that the audio output of the video should be muted.
[videojs_video url="https://example.com/wp-content/uploads/videos/myvid.mp4" muted="true"]
Video.js HTTP Streaming
The plugin supports the m3u8 file format that can be used for Video.js HTTP Streaming. It allows you to play HLS, DASH, and other HTTP streaming protocols with Video.js, even where they are not natively supported.
[videojs_video url="https://example.com/wp-content/uploads/videos/myvid.m3u8"]
For detailed documentation please visit the Videojs HTML5 Player plugin page
