[WordPress] 外掛分享: Video.js – HTML5 Video Player for WordPress

首頁外掛目錄 › Video.js – HTML5 Video Player for WordPress
⚠ 此外掛已下架 — 不再更新維護,建議勿安裝。
6,000+
安裝啟用
★★★★
4.7/5 分(26 則評價)
4339 天前
最後更新
0%
問題解決
WordPress 2.7+ v4.5.0 上架:2010-09-08

內容簡介

這是一個基於 Video.js HTML5 播放器庫所建立的 WordPress 外掛。它能夠讓您使用 HTML5 在文章或頁面中嵌入影片,並提供 Flash 回退支援非 HTML5 瀏覽器。

詳細資訊請參閱 videojs.com 網站。

影片縮寫選項
mp4

影片 H.264/MP4 來源的位置。

[videojs mp4="http://video-js.zencoder.com/oceans-clip.mp4"]

ogg

影片 Theora/Ogg 來源的位置。

[videojs ogg="http://video-js.zencoder.com/oceans-clip.ogg"]

webm

影片 VP8/WebM 來源的位置。

[videojs webm="http://video-js.zencoder.com/oceans-clip.webm"]

youtube

影片 YouTube 來源的位置。

[videojs youtube="http://www.youtube.com/watch?v=DJU6ppZAaec"]

海報

影片封面位置。

[videojs poster="http://video-js.zencoder.com/oceans-clip.png"]

寬度

影片的寬度。

[videojs width="640"]

高度

影片的高度。

[videojs height="264"]

預載

在使用者點擊播放之前,儘可能快速地開始加載影片。
可使用 'auto'、'metadata' 或 'none'。當瀏覽器或裝置允許時,auto 會預加載。Metadata 只會加載影片的元數據。

[videojs preload="auto"]

自動播放

影片就緒後立即開始播放。使用 'true' 或 'false'。

[videojs autoplay="true"]

循環播放

在影片播放完畢後立即重新開始。使用 'true' 或 'false'。

[videojs loop="true"]

控制欄

使用 'false' 隱藏播放器控制。

[videojs controls="false"]

靜音

影片一開始時需要靜音,使用 'true'。

[videojs muted="true"]

獨立ID

為您的影片播放器添加自定義 ID。

[videojs id="movie-id"]

自定義類別

為您的播放器添加自定義類別。使用 'full' 可將播放器懸浮,並使用 'alignleft' 或 'alignright' 進行對齊。

[videojs class="alignright"]

軌道

文字軌道是 HTML5 影片提供觀看者時間觸發文本的功能。欲使用軌道,可在 縮寫內使用 [track] 縮寫。您可以為種類、來源、srclang、標籤和默認屬性設置值。更多資訊可參閱 Video.js 文檔。

[videojs][track kind="captions" src="http://video-js.zencoder.com/oceans-captions.vtt" srclang="en" label="English" default="true"][/videojs]

所有屬性範例
[videojs mp4="http://video-js.zencoder.com/oceans-clip.mp4" ogg="http://video-js.zencoder.com/oceans-clip.ogg" webm="http://video-js.zencoder.com/oceans-clip.webm" poster="http://video-js.zencoder.com/oceans-clip.png" preload="auto" autoplay="true" width="640" height="264" id="movie-id" class="alignleft" controls="false" muted="true"][track kind="captions" src="http://example.com/path/to/captions.vtt" srclang="en" label="English" default="true"]

外掛標籤

開發者團隊

⬇ 下載最新版 (v4.5.0) 或搜尋安裝

① 下載 ZIP → 後台「外掛 › 安裝外掛 › 上傳外掛」
② 後台搜尋「Video.js – HTML5 Video Player for WordPress」→ 直接安裝(推薦)
📦 歷史版本下載

原文外掛簡介

A video plugin for WordPress built on the Video.js HTML5 video player library. Allows you to embed video in your post or page using HTML5 with Flash fallback support for non-HTML5 browsers.
View videojs.com for additional information.
Video Shortcode Options
mp4
The location of the h.264/MP4 source for the video.
[videojs mp4="http://video-js.zencoder.com/oceans-clip.mp4"]

ogg
The location of the Theora/Ogg source for the video.
[videojs ogg="http://video-js.zencoder.com/oceans-clip.ogg"]

webm
The location of the VP8/WebM source for the video.
[videojs webm="http://video-js.zencoder.com/oceans-clip.webm"]

youtube
The location of the YouTube source for the video.
[videojs youtube="http://www.youtube.com/watch?v=DJU6ppZAaec"]

poster
The location of the poster frame for the video.
[videojs poster="http://video-js.zencoder.com/oceans-clip.png"]

width
The width of the video.
[videojs width="640"]

height
The height of the video.
[videojs height="264"]

preload
Start loading the video as soon as possible, before the user clicks play.
Use ‘auto’, ‘metadata’, or ‘none’. Auto will preload when the browser or device allows it. Metadata will load only the meta data of the video.
[videojs preload="auto"]

autoplay
Start playing the video as soon as it’s ready. Use ‘true’ or ‘false’.
[videojs autoplay="true"]

loop
Causes the video to start over as soon as it ends. Use ‘true’ or ‘false’.
[videojs loop="true"]

controls
Use ‘false’ to hide the player controls.
[videojs controls="false"]

muted
Use ‘true’ to initially mute video.
[videojs muted="true"]

id
Add a custom ID to your video player.
[videojs id="movie-id"]

class
Add a custom class to your player. Use full for floating the video player using ‘alignleft’ or ‘alignright’.
[videojs class="alignright"]

Tracks
Text Tracks are a function of HTML5 video for providing time triggered text to the viewer. To use tracks use the [track] shortcode inside of the shortcode. You can set values for the kind, src, srclang, label, and default attributes. More information is available in the Video.js Documentation.
[videojs][track kind="captions" src="http://video-js.zencoder.com/oceans-captions.vtt" srclang="en" label="English" default="true"][/videojs]

All Attributes Example
[videojs mp4="http://video-js.zencoder.com/oceans-clip.mp4" ogg="http://video-js.zencoder.com/oceans-clip.ogg" webm="http://video-js.zencoder.com/oceans-clip.webm" poster="http://video-js.zencoder.com/oceans-clip.png" preload="auto" autoplay="true" width="640" height="264" id="movie-id" class="alignleft" controls="false" muted="true"][track kind="captions" src="http://example.com/path/to/captions.vtt" srclang="en" label="English" default="true"][/videojs]

Video.js Settings Screen

--------------------------

The values set here will be the default values for all videos, unless you specify differently in the shortcode. Uncheck “Use CDN hosted version?” if you want to use a self-hosted copy of Video.js instead of the CDN hosted version. Using the CDN hosted version is preferable in most situations.
If you are using a responsive WordPress theme, you may want to check the Responsive Video checkbox.
Uncheck the Use the shortcode? option only if you are using WordPress 3.6+ and wish to use the tag for MediaElement.js. You will still be able to use the [videojs] tag to embed videos using Video.js.

延伸相關外掛

文章
Filter
Apply Filters
Mastodon