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

Question

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

数据与 ckeditor 生成的 html 标签一起存储，因此在我v-html用来显示其他内容（例如<p></p>,<h1></h1>等）的模板上，但未显示视频文件。

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

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

这就是我在使用v-html...任何想法时遇到的问题？提前致谢。

Answer 1

在尝试了多种方法之后，我能够通过使用 js 函数格式化许多内容来显示视频。有关此函数的更多信息可以在此处.replace()找到。

• 标签<oembed></oembed>到<ifame></iframe>标签
• url视频的一部分到src
• 将视频网址中的部分替换watch?v=为embed

在vue js中，您可以通过在属性下创建一个methods用于格式化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;
    },
}

有了这个，视频网址<figure class="media"><oembed url="https://www.youtube.com/watch?v=3PX0brdmsWE"></oembed></figure>将被转换为<figure class="media"><iframe src="https://www.youtube.com/embed/3PX0brdmsWE"></iframe></figure>

现在可以使用 vue.js 在 html 部分查看转换后的 urlv-html