如何在 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() function.More 格式化一些内容来显示视频 here .

<oembed></oembed> 个标签到 <ifame></iframe> 个标签
url部分视频转src
视频中url将watch?v=部分替换为embed

在vue js中可以通过在methods属性下做一个函数来格式化url.An的例子如下：

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>

现在可以在 html 部分使用 vue.js v-html

查看转换后的 url

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

How to display video data in vue.js template

html

javascript

ckeditor

vue.js