Title: HTML5 Videos
Author: powercat74
Published: 2012 年 9 月 24 日
Last modified: 2013 年 1 月 4 日
---
搜尋外掛
這個外掛**並未在最新的 3 個 WordPress 主要版本上進行測試**。開發者可能不再對這個
外掛進行維護或提供技術支援，並可能會與更新版本的 WordPress 產生使用上的相容性問題。
# HTML5 Videos
由 [powercat74](https://profiles.wordpress.org/powercat74/) 開發
[下載](https://downloads.wordpress.org/plugin/html5-videos.1.0.2.zip)
* [詳細資料](https://tw.wordpress.org/plugins/html5-videos/#description)
* [使用者評論](https://tw.wordpress.org/plugins/html5-videos/#reviews)
* [安裝方式](https://tw.wordpress.org/plugins/html5-videos/#installation)
* [開發資訊](https://tw.wordpress.org/plugins/html5-videos/#developers)
[技術支援](https://wordpress.org/support/plugin/html5-videos/)
## 外掛說明
### Embed HTML5 Videos from the Media Library
Make your media managers happy with this simple WordPress plugin from Cremalab.
No longer will you (or they) need to rely on Vimeo, Youtube or any pricey video
hosting service to deliver videos to your audience. Simply upload the correct HTML5
videos to your Media Library, then embed them into your pages easily using the WordPress
editor. This plugin is different from other similar plugins because this writes
the shortcodes for you!
This small plugin seeks to fulfill these three major needs:
1. Embed videos from
the Media Library without relying on a third-party hosting service 2. Embed the
videos using HTML5 video tags with a Flash fallback for older browsers 3. Make it
easy – no need to write long short codes
This plugin is built on the [videojs](http://videojs.com/) javascript library which
detects browser capability and provides flash fallback for older browsers and to
provide the controls styling. All current browsers and most mobile browsers already
support HTML5 video tags, so they will receive native HTML videos without any third-
party plugins. Browsers that do not support HTML5 videos will be shown a Flash
version.
### How Does it Work?
In three steps, you can be hosting your own videos:
1. Convert your videos to HTML5
formats (we like the [Miro Video Converter](http://www.mirovideoconverter.com/)
for this job). 2. Upload all three formats to your Media Libary in WordPress 3.
Embed the videos using the HTML5 Videos plugin
Most other plugins make you write your the shortcode to embed the video. HTML5
Videos makes this easier by allowing you to select the videos from the Media Library,
set some options, and then insert the shortcode.
## 螢幕擷圖
* [[
* The HTML5 Videos plugin creates a new button in the Wordpress Editor to allow
for easy embedding of Media Library videos.
* [[
* Only videos that have HTML5 extensions (.webm, .mp4, .ogv) will be displayed
in the select boxes.
## 安裝方式
1. Install it from the Plugins menu automatically or download the plugin from [here](https://wordpress.org/extend/plugins/html5-videos/)
and upload it to the Plugins folder.
2. Activate the plugin from the Plugins menu in WordPress.
3. Upload your HTML5-compatible videos into the Media Library.
4. Embed them into your pages using the HTML5 Videos button in the editor.
## 常見問題集
I get an error when uploading my videos to the library
WordPress has a file upload size limit of 2-8MB by default on most hosts. This
will probably need to be increased if you are uploading longer (or HD) videos.
Instructions on manually increasing the upload limit will vary by host. You should
contact your host for instructions, if [none of these options](https://codex.wordpress.org/FAQ_Working_with_WordPress#How_do_I_Import_a_WordPress_WXR_file_when_it_says_it_is_too_large_to_import.3F)
help you.
I only want to upload a few of the video formats
HTML5 Videos will only embed what you tell it to embed. If you don’t have a .webm(.
mp4, .ogv) video, then it will not let you choose to embed one. Current browser
support for the video formats can be found [here](http://www.longtailvideo.com/html5).
I want to create my own shortcode
The shortcode is generated automatically, but if you need to change anything, here
is the shortcode format:
[video mp4 webm ogg poster width height preload autoplay setup]
The “video” element is required (that’s what makes this work), but everything else
is optional. The mp4, webm, ogg and poster elements will be fully-qualified paths
to the appropriate resource on your server (ie: http://somedomain.com/wp-content/
uploads/bigbunny.mp4). The preload should be set to “none”, “metadata”, or “auto”.
Alternatively, you can specify “true” for “auto” or “false” for “none” and the autoplay
attribute should be either “autoplay” or should be omitted entirely. This is the
way VideoJs requires these attributes to be set.
The “setup” attribute should be unchecked (or set to “manual”) if you will be programmatically
interacting with the videos after the DOM has loaded. For instance, if you are using
the video in a modal that is created after the page loads, then set this value to“
manual”. See the [VideoJs API documentation](http://videojs.com/docs/api/) for instructions
on how to interact with the video. Each video on the page has a unique ID. Inspect
the page to get the ID for each video to be used in your API calls.
How do I control the video via javascript?
By default, the plugin sets up the necessary javascript to make the player work.
If you want to customize this (ie: you want to hide the video div on page load,
and play the video in a popup modal sometime after page load), you must set the “
setup” option to “Manual” (uncheck the “Automatically Setup Video” box), and then
refer to the [VideoJs API page](http://videojs.com/docs/api/) for instructions on
firing the video. Each video you embed into the page will have a random unique ID.
You’ll need to inspect the video element to get this ID. Then you can reference
the video id’s to play the video.
## 使用者評論
這個外掛目前沒有任何使用者評論。
## 參與者及開發者
以下人員參與了開源軟體〈HTML5 Videos〉的開發相關工作。
參與者
* [ powercat74 ](https://profiles.wordpress.org/powercat74/)
[將〈HTML5 Videos〉外掛本地化為台灣繁體中文版](https://translate.wordpress.org/projects/wp-plugins/html5-videos)
### 對開發相關資訊感興趣？
任何人均可[瀏覽程式碼](https://plugins.trac.wordpress.org/browser/html5-videos/)、
查看 [SVN 存放庫](https://plugins.svn.wordpress.org/html5-videos/)，或透過 [RSS](https://plugins.trac.wordpress.org/log/html5-videos/?limit=100&mode=stop_on_copy&format=rss)
訂閱[開發記錄](https://plugins.trac.wordpress.org/log/html5-videos/)。
## 變更記錄
#### 1.0.2
* Added auto or manual setup to control videos via the VideoJs API
* Added shortcodes into documentation
* Added detection for remote css and js files – if they don’t exist, load the local
versions of the files
#### 1.0.1
* Fixed some path name problems in some installations
#### 1.0
* Initial Commit to WordPress
## 中繼資料
* 版本 **1.0.2**
* 最後更新 **13 年前**
* 啟用安裝數 **100+**
* WordPress 版本需求 ** 2.0.1 或更新版本 **
* 已測試相容的 WordPress 版本 **3.5.2**
* 語言
* [English (US)](https://wordpress.org/plugins/html5-videos/)
* 標籤:
* [HTML5](https://tw.wordpress.org/plugins/tags/html5/)[media library](https://tw.wordpress.org/plugins/tags/media-library/)
[videos](https://tw.wordpress.org/plugins/tags/videos/)
* [進階檢視](https://tw.wordpress.org/plugins/html5-videos/advanced/)
## 評分
4.8 星，滿分為 5 星
* [ 3 個 5 星使用者評論 ](https://wordpress.org/support/plugin/html5-videos/reviews/?filter=5)
* [ 1 個 4 星使用者評論 ](https://wordpress.org/support/plugin/html5-videos/reviews/?filter=4)
* [ 0 個 3 星使用者評論 ](https://wordpress.org/support/plugin/html5-videos/reviews/?filter=3)
* [ 0 個 2 星使用者評論 ](https://wordpress.org/support/plugin/html5-videos/reviews/?filter=2)
* [ 0 個 1 星使用者評論 ](https://wordpress.org/support/plugin/html5-videos/reviews/?filter=1)
[Your review](https://wordpress.org/support/plugin/html5-videos/reviews/#new-post)
[查看全部使用者評論](https://wordpress.org/support/plugin/html5-videos/reviews/)
## 參與者
* [ powercat74 ](https://profiles.wordpress.org/powercat74/)
## 技術支援
使用者可在技術支援論壇提出意見反應或使用問題。
[檢視技術支援論壇](https://wordpress.org/support/plugin/html5-videos/)