django-ckeditor配置html5video实现视频上传与播放

1. 手动下载插件

html5video的插件：https://github.com/bahriddin/ckeditor-html5-video

解压插件，将html5video放到ckeditor/ckeditor/plugins的目录里。

2. 修改ckeditor源码

通过使用ckeditor->config.js->extraPlugins配置启用html5video插件

添加：

config.extraPlugins = 'html5video';

复制代码

CKEDITOR.editorConfig = function( config ) {
	// Define changes to default configuration here. For example:
	// config.language = 'fr';
	// config.uiColor = '#AADC6E';
	config.allowedContent = true;

	config.extraPlugins = 'html5video';
	
};

将html5video加到CKEDITOR_CONFIGS里

CKEDITOR_CONFIGS = {
'default': {
'toolbar': 'Custom', # 工具条功能
'height': 600, # 编辑器高度
'width': 800, # 编辑器宽
'toolbar_Custom':[
['Bold', 'Italic', 'Underline'], # 粗体、斜体、下划线
['Link', 'Unlink'], # 链接、取消链接
['NumberedList', 'BulletedList'], # 有序、无序列表
['Format'], # 格式（如标题、段落）
['JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock'], # 左对齐、居中、右对齐、两端对齐
['Image', 'Html5video', 'Table', 'HorizontalRule'], # 图片、表格、分割线
['Undo', 'Redo'], # 撤销、重做
['Source'], # 源代码模式
],
'stylesSet': [
{'name': '1.5 倍行距', 'element': 'p', 'attributes': {'style': 'line-height: 1.5;'}}
],
'extraPlugins': ['html5video', 'widget', 'widgetselection', 'clipboard', 'lineutils'],
复制代码
```
 },
```
}

3. 前台渲染页面，video标签有播放控件

由于ckeditor渲染到页面上的代码是：

</div>

发现controlslist="nodownload"属性没有播放按钮，需要改成controls属性。

所以在渲染页面需要使用js进行修改：

复制代码

<script>
        document.addEventListener('DOMContentLoaded', () => {
            const fixVideos = () => {
                try {
                    const videos = document.querySelectorAll('.ckeditor-html5-video video');
                    if (!videos.length) {
                        console.warn('No videos found in .ckeditor-html5-video.');
                        return;
                    }
                    videos.forEach((video, index) => {
                        video.controls = true; // 添加 controls
                        video.removeAttribute('controlslist'); // 移除 controlslist
                        console.log(`Fixed video ${index + 1}: Added controls, removed controlslist.`);
                    });
                } catch (error) {
                    console.error('Error fixing video controls:', error);
                }
            };

            // 初始修复
            fixVideos();

            // CKEditor 异步加载
            if (window.CKEDITOR) {
                CKEDITOR.on('instanceReady', fixVideos);
                CKEDITOR.on('change', () => setTimeout(fixVideos, 100));
            }

            // 动态内容监听
            const observer = new MutationObserver(fixVideos);
            observer.observe(document.body, { childList: true, subtree: true });
        });
</script>

参考文献：

django-ckeditor配置html5video上传视频 - SonnyZhang - 博客园