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 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 [*video] shortcode. With a syntax like this
[*video mp4="http://example/video.mp4" webm="http://example/video.webm" ogv="http://example/video.ogv" ... /]or just this if you want just to host one file format.
[*video src="http://example/video.mp4" ... /]ARVE Supports the very same syntax with its [arve] 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
[*arve url="http://example/video.mp4" /]will work.
Differences Between ARVE and WP’s [*video]#
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
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.
[*arve title="ARVE Subtitle example" mp4="https://nextgenthemes.com/app/uploads/2018/04/elephants-dream-medium.mp4" track_1="https://nextgenthemes.com/app/uploads/2018/04/elephants-dream-subtitles-en.vtt" track_2="https://nextgenthemes.com/app/uploads/2018/04/elephants-dream-subtitles-de.vtt" track_3="https://nextgenthemes.com/app/uploads/2018/04/elephants-dream-chapters-en.vtt" track_4="https://nextgenthemes.com/app/uploads/2018/04/elephants-dream-chapters-de.vtt" /]