YouTube 타임스탬프 컴포넌트

커스터마이징 테마 컴포넌트
1

게시물 내 타임스탬프를 해당 게시물의 (또는 해당 토픽의) 관련 YouTube 영상으로 연결되는 타임스탬프 하이퍼링크로 변환합니다.

여기서 동작을 확인해 보세요

참고: Firefox는 현재 지원되지 않습니다.

15개의 좋아요
Bundle ESM & CommonJS JavaScript into a Theme Component
Insert Video
Creating HTML chapter markers for a Vimeo video
2

훌륭한 플러그인인 것 같습니다. 플러그인의 목적을 오해하고 있지 않다면, 제공하신 예제 주제에서 링크가 타임스탬프로 표시되지 않는 것 같습니다.

image
image706×306 19.3 KB

5개의 좋아요
3

어떤 브라우저를 사용 중이신가요? 저는 크롬과 사파리에서 문제없이 잘 작동하고 있습니다.

image
image1125×2436 428 KB

1개의 좋아요
4

Firefox를 사용하여 이 문제를 테스트했습니다. Chrome에서는 정상적으로 표시되는 것을 확인했습니다.

Firefox의 개발자 도구를 확인해 보면, 각 타임스탬프에 대해 HTML로 렌더링되는 내용은 다음과 같습니다:

<li>
<p>0:00 - 경험의 상수란 무엇인가?</p>
</li>

Chrome에서는 다음과 같이 렌더링됩니다:

<li>
<p><a href="https://www.youtube.com/watch?v=yXZSeiAl4PI&amp;t=0s" title="00초 지점의 비디오 yXZSeiAl4PI 보기">00초</a> — jung, 원형에 대한 요약</p>
</li>
3개의 좋아요
5

Firefox에서 콘솔을 확인해 보니 SyntaxError: invalid regexp group 오류가 발생했습니다.

원인을 살펴보니 Firefox는 정규 표현식의 명명된 캡처 그룹을 지원하지 않는 것이었습니다:

Firefox를 지원 불가로 표시할 예정이지만, 현재 진행 상황을 보면 개발 중이며 연말까지 지원이 추가될 수도 있을 것 같습니다.

해당 사항에 따라 README를 업데이트하겠습니다. 알려 주셔서 감사합니다!

3개의 좋아요
11

@jordan.vidrine

Firefox 지원 관련 업데이트입니다. 해당 기능이 다음 주에 출시될 예정인 Firefox v78에 포함되었습니다:

3개의 좋아요
12

여러분, 어떤 타임스탬프를 사용하든 00으로 선택이 되네요.

2:20:23 - 시:분:초 또는 2:23 분:초 같은 형식을 사용 중입니다. 도움을 주실 수 있나요?

Screenshot 2020-09-21 at 5.05.01 PM
Screenshot 2020-09-21 at 5.05.01 PM1576×548 50.6 KB

14

타임스탬프가 OP의 YouTube 영상으로 링크되어, YouTube로 리다이렉트되는 대신 해당 위치부터 재생된다면, YouTube의 네이티브 댓글 타임스탬프 기능을 본뜬 것과 같아서 게임 체인저가 될 것 같습니다. 클릭 시 OP의 YouTube 영상 URL 뒤에 &t=와 타임스탬프 값을 추가하는 함수를 설정하고 재생하는 방식으로 구현할 수 있지 않을까요?

1개의 좋아요
15

이 컴포넌트는 인디 오픈소스이므로 수정 사항을 다음에 제출해 주세요:

추가 유지보수자를 기꺼이 추가하겠습니다.

2개의 좋아요
16

더 이상 작동하지 않나요?

image
image2768×978 368 KB

1개의 좋아요