[javascript] MediumEditor에서 동영상 재생 제어하기

30 Nov 2023

javascript

MediumEditor는 사용자가 쉽게 텍스트를 편집할 수 있는 오픈 소스 WYSIWYG 에디터입니다. 동영상 삽입 기능도 제공하지만, 기본 동작에는 동영상 재생 제어 기능이 없습니다. 이 글에서는 MediumEditor를 사용하여 동영상을 삽입하고, 동영상의 재생을 제어하는 방법을 알아보겠습니다.

1. MediumEditor에 동영상 삽입 기능 추가하기

MediumEditor에 동영상 삽입 기능을 추가하기 위해 다음과 같이 절차를 따릅니다.

MediumEditor를 웹 페이지에 추가합니다.
extensions 옵션에 medium-editor-insert-plugin을 추가합니다. 이 플러그인은 동영상 삽입 기능을 제공합니다.

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/medium-editor/latest/css/medium-editor.min.css" />
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/medium-editor/latest/css/themes/default.min.css" />
</head>
<body>
  <div class="editable"></div>

  <script src="https://cdn.jsdelivr.net/medium-editor/latest/js/medium-editor.min.js"></script>
  <script src="https://cdn.jsdelivr.net/medium-editor/latest/js/extensions/insert-plugin.min.js"></script>
  <script>
    var editor = new MediumEditor('.editable', {
      extensions: {
        'insert-plugin': new MediumEditorInsert()
      }
    });
  </script>
</body>
</html>

위의 예제에서 .editable 클래스를 가진 요소가 텍스트 영역입니다. 여기에 동영상 삽입 버튼이 추가되었습니다.

2. 동영상 재생 제어하기

사용자가 동영상을 삽입하고, 재생을 제어하기 위해서는 다음과 같이 추가적인 작업이 필요합니다.

플러그인을 초기화할 때 autoEmbed 옵션을 false로 설정합니다. 이렇게 하면 자동으로 동영상을 재생하지 않고, 사용자에게 제어를 넘깁니다.

var editor = new MediumEditor('.editable', {
  extensions: {
    'insert-plugin': new MediumEditorInsert({
      autoEmbed: false
    })
  }
});

입력한 동영상의 URL을 저장하고, 사용자가 재생 버튼을 클릭했을 때 해당 URL에 접근하여 재생하도록 구현합니다. 이 과정은 개발자에게 맡겨집니다. 주로 HTML5 video 태그를 사용하여 동영상을 재생하는 방식을 이용합니다.

결론

MediumEditor를 사용하여 동영상의 삽입과 재생 제어를 할 수 있습니다. 추가적인 작업이 필요하지만, 사용자에게 편리한 동영상 편집 환경을 제공할 수 있습니다.

참고자료: