List of contents:
- Introduction
- Access Token Setup
- Adding Videos with the Shortcode Editor
- Adding a Vimeo Video Channel
- Using a Vimeo Album
- Automatic Video Captions and Splash Images
- Automatic Subtitles
- Quality Switching
- HLS and MPEG-DASH Support
- Turbocharge Ajax Vimeo Loading
- Preferred API Location Setting
- Privacy Settings
- Troubleshooting
Introduction
We really like Vimeo video hosting here at Foliovision. Vimeo offers creative film makers almost unlimited hosting for just $59.95/year (Vimeo Plus). Even more unbelievable, unlimited commercial video hosting for marketers and commercial websites with privacy is just $199/year (Vimeo Pro).
We made sure FV Player Pro integrates seamlessly with Vimeo as it's the closest-to-perfect and almost headache free video hosting available right now. With FV Player Pro you can enjoy an unbranded player with very little decoration putting your content front and centre.
You can also customize your autoplay, width and height settings. Both automated and manual quality switching works as well with the Vimeo files. Any time Vimeo updates their video API, we'll update FV Player Pro almost immediately, saving you lots of work.
Access Token Setup
Vimeo Plus or Pro account is required. Vimeo support is a core part of our FV Player Pro features.
Due to Vimeo terms of use we require that we check your account before serving videos via FV Player. Click on the create a new Vimeo App (or after logging in to Vimeo alternatively use link: https://developer.vimeo.com/apps/new).
To create a new app, simply fill in your App name, App description, and of course agree with terms and conditions and click Create App.
Go to Authentication tab, scroll down and click Generate Access Token. Under Generate an access token, select Authenticated (you), then click Generate.
Make sure you only choose public, private and upload scopes.
Copy your access token to Settings > FV Player Pro > Hosting tab > Vimeo (Pro).
Click Save All Changes.
Adding Videos with the Shortcode Editor
Open the shortcode editor in a post (or page) and insert the video URL into video box. You need to use the numeric Vimeo URL in it's full form. For example: "https://vimeo.com/197701695".
Adding a Vimeo video through FV Player's shortcode editor
You can set width and height of your video and select an underlying splash image. If you do not choose a custom splash image, Vimeo splash screen will be used instead automatically. To set a splash image, simply click in the shortcode editor to "add image" and choose one from your library or upload a new one. The image should have the same size (pixels) as the player.
Click insert and publish. Here is the result:
A video with a custom splash image:
City of Bratislava
And here is the example with a Vimeo splash image:
High Above Peru
Adding a Vimeo Video Channel
You can add an entire video channel from Vimeo and it will automatically load as a playlist. All you need to do is to create a shortcode with the Vimeo channel URL and replace the src="" parameter with channel="". For example:
[fvplayer channel="https://vimeo.com/channels/musicvideoland"]
You can see the example playlist in this demo.
Using Vimeo Albums
FV Player Pro 7.3.10.727.beta adds support for Vimeo Albums.
You need to switch to beta to get the beta updates first: https://foliovision.com/player/basic-setup/switching-fv-player-pro-to-beta.
Here's an example of the shortcode:
[fvplayer album="https://vimeo.com/album/5558468"]
You can watch our demo at: https://foliovision.com/player/demos/vimeo-channel-support#fvp_264948264,3m53s
Automatic Video Captions and Splash Images
As mentioned above, FV Player automatically parses the splash image from Vimeo, if you don't select it manually. This also happens with the captions. If you don't add a caption manually, then the player will use the video title. This is a default enabled for all the Vimeo hosted videos.
If you for some reason want to turn the auto captions off, you can do so in Settings > FV Player Pro > Hosting tab > Vimeo (Pro) and check the box Disable video captions.
If you want to use a different splash image than the one the player pulls automatically from Vimeo, you can always change it. You can upload or set a splash image in the shortcode editor.
Automatic Subtitles
FV Player allows you to manually add subtitles in multiple languages in VTT or SRT format for any video, including the ones hosted on Vimeo (for more info on how to manually add subtitles see the guide How to Create Subtitles.
FV Player Pro can also automatically load subtitles directly from Vimeo. If you have already set your subtitles on Vimeo.com or you are just sharing someone else's video that has subtitles, you don't have to set anything - all the subtitles available for the given video will load automatically, and user can switch between them, or turn them on or off. (same behavior as manually added subtitles)
Quality Switching
You can set up quality switching. In Settings > FV Player Pro > Hosting > Vimeo (Pro) > check Enable quality switching > Save All Changes. When you do not choose this option, HD quality will be used at all times with the exception of iPhone and Android phone which will be served mobile quality.
There is no need to upload videos in different qualities or any additional settings on Vimeo. Simply one click as described above will solve it. This setting also detects mobile and serves mobile quality automatically (with option to switch). Here is what it looks like:
NOTE: There's no need to setup the other quality switching, this works independently. In case you mix self-hosted videos with Vimeo, it's the first video that determines which quality switching will be used. Then if the file for the selected quality is not available, the default one will be picked.
Quality Switching Defaults
There are two rules that will determine the default quality of the Vimeo videos:
- If the quality switching is disabled, then desktop users will receive the HD quality, and mobile users receive the mobile quality.
- If the quality switching is enabled, it checks the player size and picks the best quality for the current player size, unless you are on Android or iPhone. If you then select some other quality, it’s remembered for the whole site (all other videos will play with this quality).
HLS and MPEG-DASH Support
FV Player supports Vimeo's HLS and MPEG-DASH streams, and can play such videos on the majority of devices - in the case of HLS with the help of Flash fallback and HLS.js. Read more about HLS in this guide - Using HLS With FV Player. You can also read this post to learn more about the MPEG-DASH technology.
Turbocharge Ajax Vimeo Loading
We have implemented an Ajax function that will use the PHP file for loading Vimeo requests, thus removing WordPress from the whole video loading process. The result will be faster loading of Vimeo videos. A great help for everyone, especially the websites with high traffic.
To be able to activate this feature, you will first have to add a line of code (which features a key unique for every user) into your wp-config.php file.
Turbocharge Ajax Vimeo Loading
You should be able to access the wp-config.php via FTP. It's usually located in /public_html/site/.
Preferred API Location Setting
There have been reports of issues with Vimeo API selecting servers from a different location than the viewer's, which led to increased loading times of videos. This was especially significant for the Asian region, in which viewers received content from North American servers.
We decided to fix this by adding an option that will allow users to manually select which set of servers the player will prefer, based on their location.
Preferred API location drop-down in FV Player Pro settings
You can pick from four options:
- Pick fastest automatically
- North America
- Europe
- Asia
The Pick fastest automatically option is the basic setting that retains the default behavior. The other three options will allow you to select the specific region from which the videos will be served, thus making sure that the video loading won't be slowed by serving data from a wrong region. We recommend using these when you have more regional than global traffic, though.
Privacy Settings
With a Vimeo Pro/Plus subscription you can set up custom privacy settings to stop your video from appearing on vimeo.com, to disable embedding of your videos, or to stop download of your videos. Settings can be changed anytime per chosen video, or they can be applied to all your videos at once.
How to stop videos from appearing on vimeo.com?
Go to vimeo.com, hover over your profile image, select Settings, click Videos in the left-hand menu, scroll down to Who can watch your videos?, select Hide from vimeo.com. If you want your settings to be applied to all videos, select Also apply to all existing videos. Click Save.
Make sure embedding is allowed on your webpage. In Settings > Videos scroll down to Where can your videos be embedded?, select Only sites I choose. If you want your settings to be applied to all videos, select Also apply to all existing videos. Click Save.
How to disable download of my videos?
In Settings > Videos scroll down to What can people do with your videos? Uncheck the box Download them. If you want this setting to be applied for all your videos, select Also apply to all existing videos. Click Save.
Troubleshooting
In case you experienced some issues regarding Vimeo video playback, you can switch to iframe embedding by turning on the Force iframe Embedding option in Settings > FV Player > Hosting > Vimeo (Pro). Click Save All Changes. From that time on Vimeo videos will be embedded via iframe in your site instead of fvplayer shortcode.
Leave a Reply