비디오 노드 타입 – contenteditable.lab

스키마 정의

비디오 노드 타입의 스키마 정의:

{
  video: {
    group: 'block',
    attrs: {
      src: { default: '' },
      poster: { default: null },
      width: { default: null },
      height: { default: null },
      controls: { default: true },
      autoplay: { default: false },
      loop: { default: false }
    },
  }
}

모델 표현

모델 표현 예제:

{
  type: 'video',
  attrs: {
    src: 'https://example.com/video.mp4',
    poster: 'https://example.com/poster.jpg',
    width: 800,
    height: 450,
    controls: true
  }
}

HTML 직렬화

모델을 HTML로 변환:

function serializeVideo(node) {
  const attrs = {};
  if (node.attrs.src) attrs.src = escapeHtml(node.attrs.src);
  if (node.attrs.poster) attrs.poster = escapeHtml(node.attrs.poster);
  if (node.attrs.width) attrs.width = node.attrs.width;
  if (node.attrs.height) attrs.height = node.attrs.height;
  if (node.attrs.controls) attrs.controls = true;
  if (node.attrs.autoplay) attrs.autoplay = true;
  if (node.attrs.loop) attrs.loop = true;
  return '<video' + serializeAttrs(attrs) + '></video>';
}

HTML 역직렬화

HTML을 모델로 파싱:

function parseVideo(domNode) {
  return {
    type: 'video',
    attrs: {
      src: domNode.getAttribute('src') || '',
      poster: domNode.getAttribute('poster') || null,
      width: parseInt(domNode.getAttribute('width')) || null,
      height: parseInt(domNode.getAttribute('height')) || null,
      controls: domNode.hasAttribute('controls'),
      autoplay: domNode.hasAttribute('autoplay'),
      loop: domNode.hasAttribute('loop')
    }
  };
}

뷰 연동

뷰 연동 노트: 이 노드 타입을 뷰 레이어에서 구현할 때 contenteditable 동작, 선택 처리, 이벤트 관리에 특히 주의하세요.

뷰 연동 코드:

// 비디오 렌더링
const video = document.createElement('video');
video.src = node.attrs.src;
if (node.attrs.poster) video.poster = node.attrs.poster;
if (node.attrs.width) video.width = node.attrs.width;
if (node.attrs.height) video.height = node.attrs.height;
video.controls = node.attrs.controls !== false;
video.autoplay = node.attrs.autoplay === true;
video.loop = node.attrs.loop === true;
video.contentEditable = 'false'; // 비디오는 편집 불가

일반적인 문제

일반적인 함정: 이 노드 타입을 구현할 때 자주 발생하는 문제들입니다. 구현 전에 주의 깊게 검토하세요.

일반적인 문제 및 해결 방법:

// 문제: 비디오 형식 지원
// 해결: 형식 지원 확인
function checkVideoSupport(format) {
  const video = document.createElement('video');
  return video.canPlayType('video/' + format) !== '';
}

// 문제: 비디오 로딩
// 해결: 로딩 상태 처리
video.addEventListener('loadstart', () => {
  // 로딩 표시기 표시
});
video.addEventListener('canplay', () => {
  // 로딩 표시기 숨김
});

// 문제: 비디오 선택
// 해결: contenteditable에서 비디오 선택 처리
function selectVideo(video) {
  const range = document.createRange();
  range.selectNode(video);
  const selection = window.getSelection();
  selection.removeAllRanges();
  selection.addRange(range);
}

구현

완전한 구현 예제:

class VideoNode {
  constructor(attrs) {
    this.type = 'video';
    this.attrs = {
      src: attrs?.src || '',
      poster: attrs?.poster || null,
      width: attrs?.width || null,
      height: attrs?.height || null,
      controls: attrs?.controls !== false,
      autoplay: attrs?.autoplay === false,
      loop: attrs?.loop === false
    };
  }
  
  toDOM() {
    const video = document.createElement('video');
    Object.assign(video, this.attrs);
    return video;
  }
  
  static fromDOM(domNode) {
    return new VideoNode({
      src: domNode.getAttribute('src') || '',
      poster: domNode.getAttribute('poster') || null,
      width: parseInt(domNode.getAttribute('width')) || null,
      height: parseInt(domNode.getAttribute('height')) || null,
      controls: domNode.hasAttribute('controls'),
      autoplay: domNode.hasAttribute('autoplay'),
      loop: domNode.hasAttribute('loop')
    });
  }
}