몇 단계만으로 비디오 플레이어 수정하기

개발
3

본문에 포함된 내용이 오류를 유발하여 버그가 발생합니다. 홈페이지에서 로드할 때 플레이어가 정상적으로 작동하지 않는 문제가 있습니다. 아래는 제가 50달러를 지불하고 전문가에게 수정을 의뢰한 내용으로, 도움이 필요하신 분들을 위해 무료로 공유합니다. 플레이어의 작동 상태가 매우 좋으며 추천할 만합니다!

장점:

  • 색상이 잘 어울림
  • 플레이어가 처음부터 화면에 맞게 표시되며, 작게 시작해서 커지는 방식이 아님
  • 다양한 기능을 제공

게시하려면 video 태그만 있으면 됩니다.

<video controls>
        <source src="https://xxxx/test.mp4" type="video/mp4">
    </video>

헤더에 추가하고, CSS와 JS는 가능하면 자신의 CDN으로 다운로드하여 사용하는 것이 좋습니다.

image
image1158×763 20.6 KB

<link rel="stylesheet" href="https://cdn.plyr.io/3.6.12/plyr.css">
<script src="https://cdn.openfa.net/css/plyr.js"></script>

본문 body에 추가

image
image1071×786 29.9 KB


<script type="text/javascript">

let curUrl = "";

setInterval(() => {
    let newUrl = location.href;
    if (curUrl !== newUrl) {
        curUrl = newUrl
        if (document.querySelector("video")) {
            new Plyr('video')
        }
    }
}, 10)

최종 효과:

자막 해상도 등도 설정할 수 있습니다.

image
image1920×934 96.6 KB