Hugo Video.js 短代码

2024年10月7日 2 分钟阅读 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" >}}

结果

配置

浏览Hugo Video.js 模块

Hugo Video.js 短代码

语法

参数

src

poster

type

playbackRates

skipForward

skipBackward

muted

loop

preload

controls

autoplay

aspectRatio

示例