CKEditor 5 视频嵌入未显示在演示页面上-解网

问：

我知道这个问题已经被问过很多次了，但我打开这个讨论是为了解决我的问题，并总结我们对这个话题的所有了解，以便将来帮助人们。

所以，我们走吧。我们想上传一个视频（例如来自YouTube）。我们可以通过粘贴视频网址或使用 MediaEmbed 按钮来执行此操作。

我们有两种可能性。

我们可以在 editorConfig 中设置或不设置

mediaEmbed： { previewsInData： true }

如果没有，我们会得到这样的东西：previewsInData: true

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

取而代之的是，我们得到这样的东西previewsInData: true

<figure class="media">
  <div data-oembed-url="https://www.youtube.com/watch?v=vsl3gBVO2k4&amp;ab_channel=H%C3%A9lderPalma">
    <div style="position: relative; padding-bottom: 100%; height: 0; padding-bottom: 56.2493%;">
      <iframe src="https://www.youtube.com/embed/vsl3gBVO2k4" style="position: absolute; width: 100%; height: 100%; top: 0; left: 0;" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen="">
      </iframe>
    </div>
  </div>
</figure>

在这两种情况下，我都可以在我的 CKEditor 中看到 youtube 视频的预览。但是当我保存编辑器的内容并将其显示在我的演示页面中时，视频不会显示。

阅读论坛上的其他讨论，我无法弄清楚这是否只是我的问题。许多关于添加editorConfig的解决方案，但对我来说绝对没有任何变化。previewsInData: true

我认为标签和对于 CKEditor 显示视频预览很有用。我们知道这个预览就像一张图片，你不能播放视频，你不能在新页面中打开，等等。这没关系，但我想在我的演示页面中看到视频。figureoembed div

那么，问题出在哪里呢？

演示页面上是否有任何需要更改的内容以显示视频？
我是否应该搜索 figure 标签并将其替换为 iframe 服务器端？
有什么想法吗？

我希望我们能找到解决这个问题的永久解决方案。

javascript html ckeditor5 视频嵌入

        ClassicEditor
        .create( editorElement, {
            plugins: [ MediaEmbed, ... ],
            mediaEmbed: {
                extraProviders: [
                    {
                         name: 'extraProvider',
                         url: /^example\.com\/media\/(\w+)/,
                         html: match => '...'
                    },
                    ...
                ]
            }
        } )
    .then( ... )
    .catch( ... );

HTML 可以是这样的：

...
html: match =>
    '<div style="position:relative; padding-bottom:100%; height:0">' +
        '<iframe src="..." frameborder="0" ' +
            'style="position:absolute; width:100%; height:100%; top:0; left:0">' +
        '</iframe>' +
    '</div>'

您可以在 de docs 中找到更多信息，这里：

https://ckeditor.com/docs/ckeditor5/latest/api/module_media-embed_mediaembed-MediaEmbedProvider.html

您也可以自己做类似的事情，避免外部 OEMBED 提供程序：

window.addEventListener('load', function(){
    document.querySelectorAll('oembed[url]').forEach( element => {
        // get just the code for this youtube video from the url
        let vCode = element.attributes.url.value.split('?v=')[1];
        // paste some BS5 embed code in place of the Figure tag
    element.parentElement.outerHTML= `
    <div class="ratio ratio-16x9">
        <iframe src="https://www.youtube.com/embed/${vCode}?rel=0"  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    </div>`;
    });
})

当然，您必须为所有不同版本的嵌入内容升级脚本，此示例仅适用于 youtube。您必须分析 oembed 标记中的 URL 以检查嵌入的内容，以便为每个变体添加正确的代码。

0赞 Miky Setiawan 7/12/2023 #2

你可以手动显示 iframe，实际上这只是“一种愚蠢的方式”和最简单的方法，首先用于自动创建 iframe，然后你只需要设置它的样式，例如previewsInData: true

在 JavaScript 上

document.querySelectorAll( 'div[data-oembed-url]' ).forEach( element => {
    $(element).addClass( "parent_container_iframe");

    let child = element.firstChild;
    $(child).addClass( "video_container_iframe");

    let iframe = child.firstChild;
    $(iframe).addClass( "video_iframe");
} );

和 CSS

.parent_container_iframe{
    width: 100%;
}

.video_container_iframe {
    height: auto !important;
    padding-bottom: 0 !important;
}

.video_iframe {
    position: relative !important;
    min-height: 50vh;
}

上一个：我无法在某些 ios 设备（ipad 和 iphone）上播放 HTML5 视频

下一个：如何在 autoPlay=true 时取消延迟加载的 Wistia 嵌入静音？

CKEditor 5 视频嵌入未显示在演示页面上

CKEditor 5 video embed is not displayed on the presentation page

评论