List of contents:
- Introduction
- Access Token Setup
- Adding Videos with the Shortcode Editor
- Adding a Vimeo Video Channel
- 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 site name, site description and site URL. And of course agree with terms and conditions and click create an app.
Go to Authentication tab, scroll down and click the Generate Token button and copy your your access token.
Make sure you only choose public, private and upload scopes.
Insert your access token to Settings > FV Player Pro > Hosting tab > Vimeo (Pro) and click Save All Changes.
Click Save All Changes afterwards.
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.
Automatic Video Captions and Splash Images
As mentioned above, FV Player automatically parses the splash image from Vimeo in the case 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 titles.
If you want to use a different splash image than the one that player pulls automatically from Vimeo, you can always change it for any other you want. 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 behaviour as manually added subtitles).
Quality Switching
You can set up quality switching. In Settings > FV Player Pro > Hosting > Vimeo (Pro) > tick Enable quality switching > Save All Changes. When you do not choose this option, HD quality will be used at all times with exception of iPhone and Android phone that 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 how 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 start with in 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.sj. 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 viewer's, which lead 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 should the player prefer based on their location.
Preferred API location drop-down in FV Player Pro settings
You can pick from four options:
- Pick fastest automaticall
- North America
- Europe
- Asia
The Pick fastest automatically option is the basic setting that retains the default behaviour. 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.
At this moment, this feature is available only in the Beta mode.
Privacy Settings
With 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 your profile image, select Account Settings, click Videos in the left-hand menu, scroll down to Who can watch this video?, select Hide from vimeo.com. In case you want this setting to be applied for all your videos tick the box 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, click + Add domain and enter your domain(s). 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