javascript - 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() 格式化一些内容来显示视频。函数。有关此函数的更多信息，请参见 here .

• <oembed></oembed>标记为 <ifame></iframe>标签
• url部分视频到src
• 在视频 url 中替换来自 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;
    },
}

有了这个视频 url，例如 <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 部分查看转换后的 url v-html