Javascript 如何在vue.js模板中显示视频数据

我正在保存媒体（视频）文件，作为从ckeditor5媒体选项收集的数据的一部分，该选项工作正常。在另一页中请求保存的相同媒体文件时，我无法显示它。如何显示此媒体（视频）数据

数据与从ckeditor生成的html标记一起存储，因此在模板上我使用

v-html

来显示其他内容，如

，

等，但视频文件没有显示

在查询数据时，这是它的格式

"<figure class=\"media\"><oembed url=\"https:\/\/www.youtube.com\/watch?v=OZo_NsIFIdU\"><\/oembed><\/figure>"

“”

---

这就是我在使用

v-html

显示视频时遇到的问题。有什么想法吗？提前谢谢。

在尝试了许多方法之后，我使用js

.replace（）

函数格式化了许多内容，从而可以显示视频。可以找到有关此函数的更多信息

• 标记到
  标记

• url

  视频的一部分发送到

  src

• 在视频url中，将部分从

  watch？v=

  替换为

  embed

在vue js中，您可以通过在

方法

属性下创建一个函数来格式化url来实现这一点。示例如下：

methods:{
  modifyUrl(url) {
      let endpoint = url;
      endpoint = endpoint.replace('oembed', 'iframe');
      endpoint = endpoint.replace('url', 'src');
      endpoint = endpoint.replace('watch?v=', 'embed/');
      endpoint = endpoint.replace('oembed', 'iframe');
      return endpoint;
    },
}

这样，像

这样的视频url将被转换为

现在可以使用vue.js

v-html在html部分查看转换后的url