As Typecho does not support audio and video, playing them on Typecho pages requires a plugin. However, most plugins obtain audio resources from playlists on Netease Cloud or QQ Music, which means the song choices are limited. In addition, some guys, like me, prefer not to use these APPs to listen to music. Plyr is a simple HTML5, YouTube, and Vimeo player, and it was ported to Typecho called Typecho-Plugin-Plyr. The audio/video can be played by using this tiny tool.

Install

To install, just clone the repo and move the plugin into usr/plugins.

# download
git clone https://github.com/qt06/typecho-plugin-plyr.git
# mv to Typecho's plugin folder
mv typecho-plugin-plyr/Plyr /var/www/typecho/usr/plugins

Then, the plugin can be activated in the dashboard.

Use

MP4

<video src="https://xxx.com/xxx.mp4"></video>

with cover

<video poster="https://xxx.com/xxx.jpg" src="https://xxx.com/xxx.mp4"></video>

MP3

<div><audio src="https://xxx.com/xxx.mp3"></audio></div>

Some parameters

Use preload to specify how much of the data to load before the user starts playing the video.

<video src="https://xxx.com/xxx.mp4" preload="metadata"></video>
ParametersDescription
metadataThe browser should not load the video file unless the user starts playing the video.
noneThe browser should only load the metadata of the video (such as duration, dimensions, etc.) and not the actual video content. This is used in your example.
autoThe browser decides whether to load the video file and how to load it. Typically, the browser will load part or all of the video content based on the user's network environment and system resources.

Demo

MP3

MP4

Reference

https://link.toolin.cc/0YvtR