Rich links In Nextcloud

ℹ️ Support
1

Nextcloud version: 22.1.0

Hello, when sharing for example Videos with links, I wanted to be able to create a rich preview, where an application like WhatsApp, Discord etc. would be able to display the video without having the need to open the link.

This is an example, of what I want to achieve. Here you could play the Video within the Application.

Screenshot 2021-08-20 233404

This is what it looks like now, when you share a Video via the link.

Screenshot 2021-08-20 233752

These Rich Links are embedded in the HTML with a meta tag with the attribute property.

Here is an example of how YouTube does it:

    <meta property="og:site_name" content="YouTube">
	<meta property="og:url" content="https://www.youtube.com/watch?v=zJ-NYGLMLxs">
	<meta property="og:title" content="Nextcloud 22 introduction and overview">
	<meta property="og:image" content="https://i.ytimg.com/vi/zJ-NYGLMLxs/hqdefault.jpg">
	<meta property="og:image:width" content="480">
	<meta property="og:image:height" content="360">
	<meta property="og:description" content="Nextcloud 22 introduces a wide range of features. In this video we go over what&#39;s new, show it in action and hear from a few customers about their experience...">
	<meta property="al:ios:app_store_id" content="544007664">
	<meta property="al:ios:app_name" content="YouTube">
	<meta property="al:ios:url" content="vnd.youtube://www.youtube.com/watch?v=zJ-NYGLMLxs&amp;feature=applinks">
	<meta property="al:android:url" content="vnd.youtube://www.youtube.com/watch?v=zJ-NYGLMLxs&amp;feature=applinks">
	<meta property="al:web:url" content="http://www.youtube.com/watch?v=zJ-NYGLMLxs&amp;feature=applinks">
	<meta property="og:type" content="video.other">
	<meta property="og:video:url" content="https://www.youtube.com/embed/zJ-NYGLMLxs">
	<meta property="og:video:secure_url" content="https://www.youtube.com/embed/zJ-NYGLMLxs">
	<meta property="og:video:type" content="text/html">
	<meta property="og:video:width" content="1280">
	<meta property="og:video:height" content="720">
	<meta property="al:android:app_name" content="YouTube">
	<meta property="al:android:package" content="com.google.android.youtube">
	<meta property="og:video:tag" content="Nextcloud">
	<meta property="og:video:tag" content="privacy">
	<meta property="og:video:tag" content="digital sovereignty">
	<meta property="fb:app_id" content="87741124305">

Can someone help me and tell me where I am able to change that myself.

2

Try adding /preview to the end of your shared url and see if it renders the video.

3

When adding /preview it just returns nothing.

4

/preview just returns an image, what they (and I) want is a playable video.

Also, an option for just a direct link to the mp4 file, without a download browser prompt would work as well (for me).

5

You are looking for nextcloud-raw :

Raw — Nextcloud raw file server

Raw simply returns any requested file, so you can link directly to a file itself (i.e. without any of NextCloud’s interface around it). This enables you to host static web pages, images or other files, for example to link/embed them elsewhere on the web.

For security and privacy, the content is served with a Content-Security-Policy header. This header instructs browsers to not load any remote content, nor execute any scripts that it may contain (of course, the downside is that your web pages cannot use javascript for interactivity).

It works for images out of the box and for videos you have to remove two content security headers (“default-src ‘none’:;” and “media-src data:;”)

Use at your own risk (I do :wink: )