디스코urs의 mp4 플레이어가 너무 추워서 어떻게 개선할 수 있을지 고민하다가 이걸 찾았어요. 꽤 미니멀하고 설정 방법도 간단해서 css와 js만 포함시키면 됩니다.
테마 헤더에 js와 css를 추가하기만 하면 됩니다.
<link rel="stylesheet" href="https://cdn.plyr.io/3.6.12/plyr.css">
<script src="https://cdn.plyr.io/3.6.12/plyr.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function () {
const player = new Plyr('video');
});
</script>
프로젝트 소개:
영어 번역: (discourse-ai 
제공)
Discourse의 MP4 플레이어는 정말 보기 싫습니다. 이를 개선하기 위해 고민하고 탐색하던 중 이 대안을 발견했습니다. 미니멀한 매력이 느껴지며, 설정 방법도 꽤 간단합니다. 해당 CSS와 JS만 포함시키면 됩니다.
위에서 언급한 JS와 CSS를 테마 헤더에 통합하기만 하면 됩니다:
<link rel="stylesheet" href="https://cdn.plyr.io/3.6.12/plyr.css">
<script src="https://cdn.plyr.io/3.6.12/plyr.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function () {
const player = new Plyr('video');
});
</script>
이 프로젝트에 대한 자세한 소개는 아래 주소를 방문하세요:
본문에 포함된 내용이 오류를 유발하여 버그가 발생합니다. 홈페이지에서 로드할 때 플레이어가 정상적으로 작동하지 않는 문제가 있습니다. 아래는 제가 50달러를 지불하고 전문가에게 수정을 의뢰한 내용으로, 도움이 필요하신 분들을 위해 무료로 공유합니다. 플레이어의 작동 상태가 매우 좋으며 추천할 만합니다!
장점:
게시하려면 video 태그만 있으면 됩니다.
<video controls>
<source src="https://xxxx/test.mp4" type="video/mp4">
</video>
헤더에 추가하고, CSS와 JS는 가능하면 자신의 CDN으로 다운로드하여 사용하는 것이 좋습니다.
<link rel="stylesheet" href="https://cdn.plyr.io/3.6.12/plyr.css">
<script src="https://cdn.openfa.net/css/plyr.js"></script>
본문 body에 추가
<script type="text/javascript">
let curUrl = "";
setInterval(() => {
let newUrl = location.href;
if (curUrl !== newUrl) {
curUrl = newUrl
if (document.querySelector("video")) {
new Plyr('video')
}
}
}, 10)
최종 효과:
자막 해상도 등도 설정할 수 있습니다.
???
솔직히 말하자면, 이건 매우 나쁜 코드입니다. 최악이죠.
이 코드는 10밀리초마다 99%의 시간 동안 아무것도 하지 않는 함수를 실행하므로 성능을 크게 낭비합니다.
물론 가정용 컴퓨터라면 이 정도 부하를 견뎌낼 수 있겠지만… 너무 우아하지 못합니다.
개인적으로 이건 매우 나쁜 코드라고 생각합니다. 최악이죠.
10밀리초마다 99%의 시간 동안 작동하지 않는 함수를 실행하므로 성능을 크게 낭비합니다.
물론 가정용 컴퓨터라면 이 정도 비용을 감당할 수 있겠지만… 그냥 너무 우아하지 못합니다.
이 작업을 수행하려면 Discourse의 API를 사용해야 합니다. 이걸 사용하세요:
이 작업을 수행하려면 Discourse의 API를 사용해야 합니다. 이걸 사용하세요:
<script type="text/discourse-plugin" version="0.8">
api.onPageChange(() => {
if (document.querySelector("video")) {
new Plyr('video');
}
});
</script>
솔직히 저에게 의뢰하셨어야 했는데요 (농담입니다)
V 조금 다음에 다시 연락할게. 방법이 없었어. 꽤 오래 헤맸는데도…
괜찮아, 이건 아주 간단한 일이야. 다음에 더 도전적인 작업이 생기면 그때 말해.
(물론 이 말은 이 작업이 쉽다는 뜻은 아니야…… discourse 소스 코드를 충분히 읽는 데 많은 시간을 들여야 어떤 API를 호출해야 할지 빠르게 대응할 수 있어. 게다가 돈을 안 쓰면, 실제로 네가 뭘 구현하고 싶은지에 관심을 가져주는 사람이 거의 없거든.)
<script src="https://cdn.plyr.io/3.7.8/plyr.js"></script>
<script type="text/discourse-plugin" version="1.8">
api.decorateCookedElement(elem => elem.querySelectorAll('video').forEach((e) => {new Plyr(e)}));
</script>
이 플레이어는 정말 유용하네요. 기본 제공되는 것보다 조금 더 깔끔하고, 어떤 작업을 맡고 계신 건가요?
형, 왜 이렇게 늦게 왔어?
방금 테스트해서 비교해 보니, 이 코드 렌더링이 좀 더 빠릅니다.
<script src="https://cdn.plyr.io/3.7.8/plyr.js"></script>
<script type="text/discourse-plugin" version="1.8">
api.decorateCookedElement(elem => elem.querySelectorAll('video').forEach((e) => {new Plyr(e)}));
</script>