지금까지 JW Player를 사용했지만 plyr.js를 사용자 정의했습니다 (1)

프롤로그

지금까지는 유료의 JW Player를 사용하고 있었습니다.
유료일 뿐, 문서 등도 확실히 하고 있었지만, 최근 무료의 동영상 플레이어 라이브러리도 늘어 온 것이고, 슬슬 환승시라고 생각해, plyr.js를 사용해 보았습니다.

하지만! !

너무 일본어 문서가 적기 때문에 비망록적으로 남기기로 했습니다.

동영상 재생까지

공식 사이트( htps : // plyr. 이오/ )에서 ZIP으로 떨어진다.
떨어 뜨리면 dist 폴더에있는 "plyr.min.js"와 "plyr.css"를 읽을 수있는 곳에 둡니다.

html 폴더를 톱으로 한다면, 아래와 같은 느낌으로 읽을 수 있다.

폴더 구성

html/
　├ css/
　│　└ plyr.css
　├ js/
　│　├ jquery.min.js
　│　├ myplayer.js
　│　└ plyr.min.js
　├ index.html
　└ test.mp4

index.html

<html>
  <head>
    <link rel="stylesheet" media="all" href="css/plyr.css">
    <script type="text/javascript" charset="UTF-8" src="js/jquery.min.js"></script>
    <script type="text/javascript" charset="UTF-8" src="js/plyr.min.js"></script>
    <script type="text/javascript" charset="UTF-8" src="js/myplayer.js"></script>
  </head>
  <body>
    <video id="video_player" controls>
      <source src="test.mp4" type="video/mp4" />
    </video>
  </body>
</html>

js/myplayer.js

$(function() {
  player = new Plyr('#video_player');
});

우선 재생을 할 수 있게 되었습니다.

이것만으로도 충분히 멋진 플레이어입니다만, 사이트 전체의 색미와 맞추고 싶은 등 있다고 생각합니다.

다음 번 에서 본격적인 사용자 정의로 들어갑니다.

참고 URL:
htps //w w. 단지 s 타다 m. 이. jp / 엔기 네 r / 에레 포 rts / 5627

Reference

이 문제에 관하여(지금까지 JW Player를 사용했지만 plyr.js를 사용자 정의했습니다 (1)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/nishidataishi/items/bd78551e44b6fbe4bbbf

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

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