vue项目中将视频链接分享至推特的解决方法及踩坑记录
vue项目中将视频链接分享至推特的解决方法及踩坑记录
- 将动态改变的视频链接分享至推特，并希望能直接在推特上播放视频的需求实现方法及踩坑记录
- 如果只要将文本或链接分享到推特，不需要推特识别图片/视频等媒体
- 用twitter card让推特抓取你网页中的视频
- 最终解决方法
- 补充
将动态改变的视频链接分享至推特，并希望能直接在推特上播放视频的需求实现方法及踩坑记录
如果只要将文本或链接分享到推特，不需要推特识别图片/视频等媒体
首先分享文本或链接很简单，只需要打开推特的页面，在Url后面拼个参数text=xxx&url=xxx。
但仅仅这样做，推特无法识别出视频，不能直接在推特上播放。
用twitter card让推特抓取你网页中的视频
想要发表的推文上自动识别出视频，需要在链接指向的网页上添加twitter card（一些meta标签）https://developer.twitter.com/en/docs/twitter-for-websites/cards/overview/summary
注：如果分享到推特的链接用的是国内的域名，推特是抓取不到twitter card的，而数字ip推特不会识别成链接。也就是说链接地址必须是国外的域名，不然无法实现。
但随后发现，vue项目中的页面是一个个组件，无法直接添加meta。
搜索得知可以用npm包vue-meta来实现vue组件中动态添加meta标签，但这种方法添加的meta无法被twitter、facebook等网站抓取识别，所以无效。
最终解决方法
再次搜索，得到一个方法：前端动态生成一个包含整个页面结构的字符串（这个页面仅用来放twitter card，可以做个跳转，使用户点进来后自动跳转至本应链接的页面），作为参数传给后端，后端生成一个网页并将url返给前端，前端用这个url作为参数打开twitter，twitter就能识别到那个有twittercard的页面的视频了。
参考文章
结合本项目实际需求，简化成了直接让后端新增一个接口，前端只要传对应的id，接口就会返回一个链接对应视频twitter card的页面的url。
补充
补充：twitter card的meta标签里绑定的视频url（就是那个需要动态修改的meta标签）才是推特上实际识别播放的视频，和前端分享的网页链接无关，所以可以用一个中间页放meta标签的方式来实现。
补充2：过程中发现分享到推特的链接，像vue项目里跟在#号后面的路由，会被推特过滤掉，只显示#号前面的url。简单的解决方法是用encodeURIComponent转译一下。听说也可以配置vue router的路由形式，由于我刚刚转vue所以不了解。
vue项目中将视频链接分享至推特的解决方法及踩坑记录相关推荐
- EntityFramework项目“The model backing xxx context has changed ”错误解决-CodeFirst迁移踩坑记录
本文为本人日记,用于个人记录. 报错现象: The model backing the 'XXXXContext' context has changed since the database was ...
- vue 项目初始化时，npm run dev报错解决方法
vue 项目初始化时,npm run dev报错解决方法 参考文章: (1)vue 项目初始化时,npm run dev报错解决方法 (2)https://www.cnblogs.com/ruilin ...
- vue项目初始化时npm run dev报错webpack-dev-server解决方法
vue项目初始化时npm run dev报错webpack-dev-server解决方法 参考文章: (1)vue项目初始化时npm run dev报错webpack-dev-server解决方法 ( ...
- 前端报错如何在服务器中显示,详解Vue项目中出现Loading chunk {n} failed问题的解决方法...
最近有个Vue项目中会偶尔出现Loading chunk {n} failed的报错,报错来自于webpack进行code spilt之后某些bundle文件lazy loading失败.但是这个问题 ...
- 关于vue项目打包后提示图片文件路径错误的解决方法
vue项目打包后在production模式下提示图片 '404(not found),在dev环境下好好的,打包了就提示这个错误.这是为什么呢,以前第一次使用vue-cli构建项目的的时候只有两个图片 ...
- Vue项目启动后Error: Cannot find module ‘xxx’的解决方法
文章目录 1. 删除 2. 安装依赖 3. 启动项目 解决方法 1. 删除 删除 node_modules 整个文件夹和 package-lock.json 文件(这个文件不一定有),注意不是 pac ...
- Vue项目中出现Loading chunk {n} failed问题的解决方法
由于项目里面用到了vue-router,vue-router的错误处理函数 onError 是不是能够捕获该错误呢?我们来看一下官方文档的说明: 当在渲染一个路由的过程中,需要尝试解析一个异步组件时发 ...
- vue启动项目报错：npm ERR! missing script: serve解决方法
vue启动项目报错:npm ERR! missing script: serve解决方法 1.vue启动项目报错:npm ERR! missing script: serve 问题原因: 在配置文件中 ...
- vue项目图片插入不清晰，原因分析及解决办法
问题: vue项目图片插入不清晰,原因分析及解决办法 原因分析: 引起图片不清晰的原因可能有以下三个:被压缩.被放大.受到父盒子的影响. 解决办法: 方法一: 1.从属性 fit="none ...
最新文章
- poj2154-color-polyan次二面体+欧拉函数优化
- spring mvc + mybatis 框架搭建 ( idea + gradle)
- html6个圆圈放一排,html中两个选择框如何并排放置（一）
- 最佳调度问题pascal程序
- 牛客 - 合约数(树上启发式合并)
- python爬虫用多线程还是多进程_python爬虫之多线程、多进程爬虫
- python爬虫短片_Python爬虫练习：爬取全民小视频（附代码，过程）
- 请问android直接post请求登录地址成功后，webview还是现实登录界面
- 迁入阿里云后：解决了一个IIS动态内容压缩的问题
- 在电子表格计算架构上应用稀疏数组技术的设计
- 获取URL参数JS函数
- Web渗透测试-Xss跨站脚本攻击(Cross Site Scripting)
- 腾讯业务架构：六大事业群
- 站长SEO优化排名选择什么样的站群服务器
- iOS-error: unable to read property list from file: /Users/XX/Info.plist
- IDEA java编译中出现了Exception in thread “main java.lang.UnsupportedClassVersionError
- MySQL插入数据时，如果记录不存在则insert，如果存在则update
- 你应该知道的50个项目管理术语（下）
- 教你 P 照片：十五步把一张普通照片处理得很有质感
- strstr（）函数的使用说明（C语言）