Technologie-Visao / ckeditor5-video

Other
27 stars 27 forks source link

Controls for video #28

Open lightninglu10 opened 2 years ago

lightninglu10 commented 2 years ago

Hey guys, using this plugin which works well. Only problem is there are no controls for the video tag and we can't play it after it's uploaded. Any clues on how to get those controls and set play on a video?

Macfa commented 2 years ago

Hi,

I wrote the code referring to the site below Confirmed that it works properly https://github.com/Technologie-Visao/ckeditor5-video/issues/11

var ckeditor = ClassicEditor.create(document.querySelector('#editor'), {
...
})
            .then(editor => {
                editor.conversion.for('downcast').add(function(dispatcher) {
                    dispatcher.on('insert:video', function(evt, data, conversionApi) {
                        const viewWriter = conversionApi.writer;
                        const $figure = conversionApi.mapper.toViewElement(data.item);
                        const $video = $figure.getChild(0);

                        viewWriter.setAttribute('controls', true, $video);
                        viewWriter.setAttribute('autoplay', true, $video);
                        viewWriter.setStyle('width', '100%', $video);
                        // viewWriter.addClass('wid100', $video);
                    })
                });
            })
            .catch(error => {
                console.error('There was a problem initializing the editor.', error);
            });