웹사이트에 Plyr.io를 추가하고 무료로 배포하는 방법

6375 단어 webdevbeginnersvideoplyr

놀라운 오픈 소스 Plyr.io 비디오 플레이어를 웹 사이트에 추가하는 방법에 대한 초보자 친화적인 단계별 가이드에 오신 것을 환영합니다.



자세한 지침은 공식 웹 사이트를 방문하십시오: Plyr.io


먼저: 필요한 모든 파일을 포함할 폴더를 만듭니다.



이 폴더 안에 3개의 기본 파일 index.html, styles.css 및 script.js를 만듭니다.


1. index.html 파일 안에 기본 HTML 상용구를 만듭니다.



원하는 video 태그와 함께 body 태그 안에 id 태그를 추가합니다.

<video id="plyr">

</video>


저 아이디 기억나..


2. 동영상 태그 안에 재생 전 동영상의 포스터에 대한 poster="image.jpg" 속성을 추가합니다. 다음과 같아야 합니다.


<video id="plyr" poster="image.jpg"></video>

3. 비디오 태그 안에 소스 태그를 추가하여 비디오를 추가하십시오.



그런 다음 source 태그 안에 다음 속성을 추가합니다.
• src="video.mp4" 재생하려는 비디오의 경우.
• 비디오 유형see all types here.의 경우 type="video/mp4"지금까지 다음과 같아야 합니다.

<video
        id="plyr"
        poster="image.jpg"
      >
        <source
          src="video.mp4"
          type="video/mp4"
        />
</video>


해상도가 다른 비디오가 하나 있는 경우 size="" 속성을 추가할 수 있으며 이 속성을 사용하여 비디오 해상도를 지정할 수 있습니다. (YouTube에서 찾은 것과 같습니다). 지금까지 다음과 같아야 합니다.

<video
        id="plyr"
        poster="image.jpg"
      >
        <source
          src="video1.mp4"
          type="video/mp4"
          size="1080"
        />
        <source
          src="video2.mp4"
          type="video/mp4"
          size="720"
        />
        <source
          src="video2.mp4"
          type="video/mp4"
          size="480"
        />
</video>


캡션이 있는 경우 track 태그 안에 video 태그를 추가한 후 다음 특성을 추가할 수 있습니다.

• kind="captions"• label="English"• src="captions.vtt" 캡션을 찾습니다.
• srclang="en"
둘 이상의 언어를 추가할 수 있습니다. 다음 속성을 사용하여 다른track 태그를 추가하기만 하면 됩니다.

• kind="captions"• label="language"• src="captions2.vtt" 캡션을 찾습니다.
• srclang="##" find all languages srclang from here

지금까지 다음과 같아야 합니다.

<video
        id="plyr"
        poster="image.jpg"
      >
        <source
          src="video1.mp4"
          type="video/mp4"
          size="1080"
        />
        <source
          src="video2.mp4"
          type="video/mp4"
          size="720"
        />
        <source
          src="video2.mp4"
          type="video/mp4"
          size="480"
        />
        <track kind="captions" label="English" src="" srclang="en" default />
        <track kind="captions" label="Arabic" src="" srclang="ar" />
</video>


기본 캡션을 만들려면 속성default을 추가하십시오.

파일을 저장하면 이제 index.html 파일 작업이 완료됩니다 🙌


두 번째: CSS 및 JavaScript 파일을 조정합니다.




1. styles.css 파일 내부에서 기본 스타일을 만들거나 웹사이트 스타일을 지정합니다.




* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}


파일을 저장합니다. 그게 다야 CSS


2. script.js 파일 내부에서 다음과 같이 Plyr 라이브러리를 프로젝트로 가져옵니다.


const player = new Plyr('#video-tag-id');위의 video 태그에 추가한 id를 대상으로 합니다. 따라서 우리의 경우:const player = new Plyr('#plyr');파일을 저장합니다. 그리고 그것은 JavaScript로 끝났습니다.

셋째: 모든 파일을 HTML 파일에 연결합니다.



1. CSS 파일: head 태그에 다음 링크 추가


<link rel="stylesheet" href="styles.css" /><link rel="stylesheet" href="https://cdn.plyr.io/3.6.4/plyr.css" />다음과 같아야 합니다.

  <head>
    <link rel="stylesheet" href="styles.css" />
    <link rel="stylesheet" href="https://cdn.plyr.io/3.6.4/plyr.css" />
  </head>



2. JS 파일: body 태그 끝에 다음 링크를 동일한 순서로 추가합니다.


<script src="https://cdn.plyr.io/3.6.4/plyr.js"></script><script src="script.js"></script>다음과 같아야 합니다.

  <body>




    <script src="https://cdn.plyr.io/3.6.4/plyr.js"></script>
    <script src="script.js"></script>
  </body>


그게 다입니다 🎉 귀하의 웹사이트는 이제 Plyr를 잘 실행해야 합니다.


마지막 단계: 이 웹사이트를 무료로 또는 다른 웹사이트로 깊이 있게 만드는 방법:



1. https://www.netlify.com/으로 이동합니다.



2. 무료 계정 생성





3. 로그인 후 사이트로 이동합니다.





4. 프로젝트 출력 폴더를 끌어다 놓습니다.





이제 인터넷의 누구와도 작업을 공유할 수 있습니다.

여기 내 CodePen project가 있습니다.

고맙습니다!
TabLayout의 Tab에 다른 Indicator 색상을 설정하고 싶습니다.
checkAuthorizationStatus 및 RequestAuthorization 약속 방법 추가

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage