CODEWITHSUNDEEP
htmlvideo
user8557879
user8557879

Reputation:

How to add embedded links to html 5 videos

If you link a YouTube video in Discord it gets shown as a player-able video on discord and not just a link. With my videos if i link them from my website discord shows them as a link and not a video. I heard i need to have embedded links in it but i don't know what I'm looking for or how to make or add those in. Anyone able to help me? Here is my current code for my videos:

<video poster="Images/logo.jpg" controls controlsList="nodownload noaudio" preload="none">
            <source src="videos/logo.mp4" type="video/mp4"> Your browser does not support the video tag.
        </video>

Upvotes: 1

Views: 8420

Answers (1)

Harry
Harry

Reputation: 1263

You just post a youtube url like that

https://www.youtube.com/watch?v=kNpczxZLXo8

in the chat on https://discordapp.com/. Some time later, the chat window comes up with the embedded video from youtube.

This means they have special support for youtube links and as far as they do not explicitly provide a way to do the same for other websites, you do not have any chance to recreate the same functionality.

The options i see for you are: talk to support from discordapp.com or upload your stuff to youtube.

[Edit] After contacting support, we know now that they actually do explicitly support 3rdparties to embed videos and images.

The answer from https://discordapp.com/ support came quick and spot on:

We look for Facebook open graph tags, Twitter's card tags, or oembed more information:

Facebook Opengraph Example:

Code of opengraph2.html:

   <!DOCTYPE html>
       <html>
       <meta property="og:type" content="article">
       <meta property="og:url" content="http://harry.x-dream-media.com/index.jsp">
       <meta property="fb:app_id" content="217926898242066">
       <meta property="og:video" content="http://harry.x-dream-media.com/test.m4v" />
       <meta property="og:video:width" content="640" />
       <meta property="og:video:height" content="426" />
       <meta property="og:video:type" content="application/mp4" />
       <meta property="og:video" content="http://harry.x-dream-media.com/test.m4v" />
       <meta property="og:video:type" content="video/mp4" />
       <meta property="og:video" content="http://harry.x-dream-media.com/test.m4v" />
       <meta property="og:video:type" content="text/html" />
       <meta property="og:title" content="title text">
       <meta property="og:image" content="http://harry.x-dream-media.com/test.png"/>
       <meta property="og:description"  content="description text"/>
       <meta property="og:site_name" content="site name text">
       
       <body>
       
       
       <style type="text/css">
       
       video {
       
          width:100%;
       
          max-width:600px;
       
          height:auto;
       
       }
       
       </style>
       
       
       <video width="100%" src="http://harry.x-dream-media.com/test.m4v" controls>
       
        Your browser does not support video
       
       </video>
       
       
       </body>
       
       </html>

Twitter Example:

Code of twitter.html:

<!DOCTYPE html>

<html>

<head>
    <meta content='text/html; charset=UTF-8' http-equiv='Content-Type' />
    <meta name="twitter:card" content="player" />
    <meta name="twitter:site" content="@harry" />
    <meta name="twitter:title" content="CUSTOM CONTENT" />
    <meta name="twitter:description" content="Custom Descriptions can be lengthy" />
    <meta name="twitter:image" content="https://peach.blender.org/wp-content/uploads/bbb-splash.png?x11217" />
    <meta name="twitter:player" content="https://download.blender.org/peach/bigbuckbunny_movies/BigBuckBunny_320x180.mp4" />
    <meta name="twitter:player:width" content="320" />
    <meta name="twitter:player:height" content="180" />
    <meta name="twitter:player:stream" content="https://download.blender.org/peach/bigbuckbunny_movies/BigBuckBunny_320x180.mp4" />
    <meta name="twitter:player:stream:content_type" content="video/mp4" />
</head>
<!DOCTYPE html>
<html>
<body>
<style type="text/css">
video {
   width:100%;
   max-width:600px;
   height:auto;
}
</style>
<body>
<video width="100%" controls>
  <source src="http://harry.x-dream-media.com/test.m4v" type="video/mp4">
Your browser does not support video
</video>
</body>
</html>

Upvotes: 1

Related Questions