Hugo Video.js 短代碼
學習如何使用 Hugo Video.js 短代碼。
贊助
成為我們的資助者或贊助商，以支持我們的工作。
本頁內容
贊助商
語法
1{{< video-js src="URL" >}}
參數
src
| 索引 | 名稱 | 類型 | 必填 | 默認值 | 版本 | 示例 |
|---|---|---|---|---|---|---|
#0 | src | string | ✓ | - | - | - |
視頻 URL。
poster
| 索引 | 名稱 | 類型 | 必填 | 默認值 | 版本 | 示例 |
|---|---|---|---|---|---|---|
| - | poster | string | - | - | - | - |
視頻封面 URL。
type
| 索引 | 名稱 | 類型 | 必填 | 默認值 | 版本 | 示例 |
|---|---|---|---|---|---|---|
| - | type | string | - | - | - | - |
视频的媒体类型。
playbackRates
| 索引 | 名稱 | 類型 | 必填 | 默認值 | 版本 | 示例 |
|---|---|---|---|---|---|---|
| - | playbackRates | string | - | video_js.playback_rates | - | - |
播放速度, 逗號隔開。
skipForward
| 索引 | 名稱 | 類型 | 必填 | 默認值 | 版本 | 示例 |
|---|---|---|---|---|---|---|
| - | skipForward | number | - | video_js.skip_forward | - | - |
快進的時間間隔，單位秒。
可選項：5, 10, 30。
skipBackward
| 索引 | 名稱 | 類型 | 必填 | 默認值 | 版本 | 示例 |
|---|---|---|---|---|---|---|
| - | skipBackward | number | - | video_js.skip_backward | - | - |
後退的時間間隔，單位秒。
可選項：5, 10, 30。
muted
| 索引 | 名稱 | 類型 | 必填 | 默認值 | 版本 | 示例 |
|---|---|---|---|---|---|---|
| - | muted | boolean | - | false | - | - |
是否靜音。
loop
| 索引 | 名稱 | 類型 | 必填 | 默認值 | 版本 | 示例 |
|---|---|---|---|---|---|---|
| - | loop | boolean | - | false | - | - |
是否循環播放。
preload
| 索引 | 名稱 | 類型 | 必填 | 默認值 | 版本 | 示例 |
|---|---|---|---|---|---|---|
| - | preload | boolean | - | false | - | - |
是否預加載視頻。
controls
| 索引 | 名稱 | 類型 | 必填 | 默認值 | 版本 | 示例 |
|---|---|---|---|---|---|---|
| - | controls | boolean | - | true | - | - |
是否顯示控制工具欄。
autoplay
| 索引 | 名稱 | 類型 | 必填 | 默認值 | 版本 | 示例 |
|---|---|---|---|---|---|---|
| - | autoplay | boolean | - | false | - | - |
是否自動播放視頻，有時會失效，將 muted 設為 true 可以改善這個問題。
aspectRatio
| 索引 | 名稱 | 類型 | 必填 | 默認值 | 版本 | 示例 |
|---|---|---|---|---|---|---|
| - | aspectRatio | string | - | false | - | - |
長寬比。
可選項：16x9, 4x3, 9x16, 1x1。
示例
MP4 視頻示例
源碼
1{{< video-js
2 src="https://commondata.razonyang.com/videos/raining-on-the-road-strewn-with-leaves.mp4"
3 cover="https://commondata.razonyang.com/videos/raining-on-the-road-strewn-with-leaves.png" >}}結果
HLS 視頻示例
注意
當視頻 URL 以
m3u8結尾，則type可選。
源碼
1{{< video-js src="https://devstreaming-cdn.apple.com/videos/streaming/examples/adv_dv_atmos/main.m3u8" type="application/x-mpegURL" >}}結果
MPEG DASH 視頻示例
注意
當視頻 URL 以
mpd結尾，則type可選。
源碼
1{{< video-js src="https://customer-m033z5x00ks6nunl.cloudflarestream.com/b236bde30eb07b9d01318940e5fc3eda/manifest/video.mpd" type="application/dash+xml" >}}結果
長寬比示例
長寬比 16:9
源碼
1{{< video-js src="https://commondata.razonyang.com/videos/green-mountains-near-the-ocean.mp4" aspectRatio="16x9" >}}結果
長寬比 4:3
源碼
1{{< video-js src="https://commondata.razonyang.com/videos/green-mountains-near-the-ocean.mp4" aspectRatio="4x3" >}}結果
長寬比 1x1
源碼
1{{< video-js src="https://commondata.razonyang.com/videos/green-mountains-near-the-ocean.mp4" aspectRatio="1x1" >}}結果
長寬比 9:16
源碼
1{{< video-js src="https://commondata.razonyang.com/videos/green-mountains-near-the-ocean.mp4" aspectRatio="9x16" >}}結果