• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号

marcomontalbano/video-to-markdown: How to embed a video in markdown? Here the an ...

原作者: [db:作者] 来自: 网络 收藏 邀请

开源软件名称(OpenSource Name):

marcomontalbano/video-to-markdown

开源软件地址(OpenSource Url):

https://github.com/marcomontalbano/video-to-markdown

开源编程语言(OpenSource Language):

JavaScript 66.2%

开源软件介绍(OpenSource Introduction):

Video to Markdown

Build Status Cloudinary PayPal.me Sponsor

Netlify Status

Add videos to your markdown files easier - https://video-to-markdown.netlify.com.

Why?

How often did you find yourself googling ¨How to embed a video in markdown?¨

While its not possible to embed a video in markdown, the best and easiest way is to extract a frame from the video, add a layer with a play icon and link the video url on the image.

Speaking HTMLese, this is what you would do:

<a href="{video-url}" title="Link Title"><img src="{image-url}" alt="Alternate Text" /></a>

that translates into markdown as:

[![Alternate Text]({image-url})]({video-url} "Link Title")

To speed up the process I developped this tool that will do it for you.

You just need to paste the video url in the field above and you will get the markdown you need.

Features

List of supported video providers:

  • Asciinema
  • CleanShot Cloud
  • Dailymotion
  • Facebook (low-quality)
  • Google Drive
  • Loom
  • OneDrive
  • PeerTube
  • Streamable
  • TikTok
  • Vimeo
  • Wistia
  • Youtube

Hosting

First of all you need to create a Cloudinary account (I'm using this service to generate and host images) so that you can copy your personal CLOUDINARY_URL from your dashboard. The url is something similar to cloudinary://my_key:my_secret@my_cloud_name.

Now you can easily deploy your own copy on Netlify.

Deploy to Netlify

Development stuff

To run the project locally, here’s what you’ll need:

Requirements

Setup

cd into your local copy of the repository and run yarn install

cd video-to-markdown
yarn install
cp .env.sample .env
# update the .env with proper values
  • CLOUDINARY_URL ( required ) - this is the API Environment variable that you can get from your Cloudinary dashboard inside the Account Details section.
  • GA_TRACKING_ID ( optional ) - this is a Google Analytics Tracking ID. Can be used if you need to track page views and events.
  • NETLIFY_ACCESS_TOKEN ( optional ) - this a Netlify Access Token. In combination with the SITE_ID can be used to display the API Usage in the website.
  • SITE_ID ( optional ) - this the Netlify Site ID. In combination with the NETLIFY_ACCESS_TOKEN can be used to display the API Usage in the website.
  • USE_HIGH_QUALITY ( optional ) - this is a boolean flag. If true, the generated images will be stored in Contenful with hi-res quality (default to false)
yarn start

This will start the client server on http://localhost:8080, and the netlify-lambda server on http://localhost:8081.

netlify-lambda isn’t required to deploy Lambda functions to Netlify, but it offers some handy features out of the box that make it quicker to get started, like the local dev server and nice defaults for transpiling and bundling functions in production.

The client server is configured to proxy /.netlify requests to the Lambda server (see webpack.client.js). This is the same behavior the site has when it’s deployed to Netlify.

Privacy

Google Analytics is used to record the following:

All images are generated via Cloudinary and stored in it. In this way the generated images are cached so we can avoid to call Netlify functions again thus reducing the quota consumption.

By clicking on convert to markdown or consuming api you accept this terms & condition; no additional data is sent to the server.




鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap