如何向HTML 5视频添加嵌入式链接 [英] How to add embedded links to html 5 videos
问题描述
如果您在Discord中链接YouTube视频，它会显示为Discord上的可播放视频，而不仅仅是链接.如果我从我的网站链接了我的视频，discord会将它们显示为链接而不是视频.我听说我需要在其中嵌入链接，但是我不知道我在寻找什么，或者如何制作或添加这些链接.有人可以帮助我吗?这是我当前的视频代码:
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>推荐答案
您只是发布了这样的youtube网址
You just post a youtube url like that
https://www.youtube.com/watch?v=kNpczxZLXo8
.一段时间后，聊天窗口会显示来自youtube的嵌入式视频.
in the chat on https://discordapp.com/. Some time later, the chat window comes up with the embedded video from youtube.
这意味着它们对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.
我为您提供的选择是:从discordapp.com寻求支持，或将您的资料上传到youtube.
The options i see for you are: talk to support from discordapp.com or upload your stuff to youtube.
联系支持人员后，我们现在知道他们实际上确实明确地支持3rdparties嵌入视频和图像.
After contacting support, we know now that they actually do explicitly support 3rdparties to embed videos and images.
https://discordapp.com/支持的答案很快就出现了:
The answer from https://discordapp.com/ support came quick and spot on:
我们在寻找Facebook开放式图形标签，Twitter的名片标签，或显示更多信息:
Facebook Opengraph示例:将该链接粘贴到聊天窗口中:
Facebook Opengraph Example: Paste that link into chat window:
http://harry.x-dream-media.com/opengraph2.html
opengraph2.html的代码:
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>
- https://dev.twitter.com/cards/markup
Twitter示例: http://harry.x-dream-media.com/twitter.html?random=123
twitter.html的代码:
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>
- http://oembed.com/#section2
嵌入示例: http://harry.x-dream-media.com/oembed.html?random=123
敬请期待...
这篇关于如何向HTML 5视频添加嵌入式链接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
