How to Embed (Self Hosted) HTML5 Video With ARVE

With WP UI

If you have the option enabled for ARVE to take over the WP video embeds you can use the Add Media button to upload and embed HTML5 playable video files.

With Shortcode UI Dialog

Single file format:
Open the ‘ ARVE Error: The [arve] shortcode needs one of this attributes av1mp4, mp4, m4v, webm, ogv, url
Embed Video’ dialog put your URL to the file you want show to the into the very first ‘URL/Emebed code’ field.

Multiple file formats:
Open the ‘Embed Video’ dialog put your URLs to the files in the appropriate mp4/webm/ogv fields at the bottom of the dialog.

Manually Writing Shortcodes

WordPress supports self hosted video with its

shortcode. With a syntax like this

How to Embed (Self Hosted) HTML5 Video With ARVE

or just this if you want just to host one file format.

How to Embed (Self Hosted) HTML5 Video With ARVE

ARVE Supports the very same syntax with its ARVE Error: The [arve] shortcode needs one of this attributes av1mp4, mp4, m4v, webm, ogv, url
shortcode. It is also so smart to create a <video> embed if you just paste a URL that ends with .mp4/.m4v/.webm/.ogv into the url attribute field so

How to Embed (Self Hosted) HTML5 Video With ARVE

will work.

Differences Between ARVE and WP’s

ARVE Does not load a JavaScript library to create a player UI like WP does (it loads mediaelement.js). This makes the embeds more lightweight and just use the browsers native HTML5 players. Meaning there will be differences across browsers and devices but this also makes sure the user experience is great for wherever its displayed. Chrome has a light control-bar, Firefox has a dark one to mention one difference.

Subtitles (tracks)

You can add track_1, track_2 … to add HTML5 subtitle files to the videos. You can optionally give those tracks your own labels with track_1_label. If there is no label specified ARVE will create a label based on the filename. So your filenames for your .vtt files should be videoname-tracktype-2characterlanguagecode.vtt

How to Embed (Self Hosted) HTML5 Video With ARVE

The above example embed was created with the following shortcode. The chapter tracks seem to have no UI on the browsers players I have tested but may have one in the future.

How to Embed (Self Hosted) HTML5 Video With ARVE