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所以不了解。
