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

17870 단어 plyr.jsVideo자바스크립트plyrHTML5

마지막까지



마지막 동영상 재생까지 에서 plyr.js에서 동영상을 재생할 때까지 할 수있었습니다.
여기에서는 플레이어의 간인 컨트롤 바의 커스터마이즈를 해 나갑니다.
전회의 도입 부분까지는 얼마든지 기사가 있습니다만, 여기로부터가 정말로 정보가 적었습니다...
어쨌든 본가의 Issues에 투고하고 싶은 곳을 "우선 검색하라! 같은 것 몇번이나 듣지 말아라!"라는 작자의 말을 가슴에, 일심불란하게 검색해 시행착오를 반복합니다.

우선 색을 바꾸다



CSS를 로드하면 전체 색상이 변경됩니다.

폴더 구성
html/
　├ css/
　│　├ myplayer.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">
    <link rel="stylesheet" media="all" href="css/myplayer.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>

css/myplayer.css
.plyr--full-ui input[type=range] {
  color: red;  /* とりあえず赤くしてみる */
}

.plyr__control--overlaid {
  background: rgba(255,0,0, .8);  /* とりあえず赤くしてみる */
}

.plyr--video .plyr__control.plyr__tab-focus,
.plyr--video .plyr__control:hover,
.plyr--video .plyr__control[aria-expanded=true] {
  background: red;  /* とりあえず赤くしてみる */
}

.plyr__control.plyr__tab-focus {
  box-shadow: 0 0 0 5px rgba(255,0,0, .5);  /* とりあえず赤くしてみる */
}

.plyr__menu__container .plyr__control[role=menuitemradio][aria-checked=true]::before {
  background: red;  /* とりあえず赤くしてみる */
}

.plyr--audio .plyr__control.plyr__tab-focus,
.plyr--audio .plyr__control:hover,
.plyr--audio .plyr__control[aria-expanded=true] {
  background: red;  /* とりあえず赤くしてみる */
}

css의 'red'와 '255,0,0'을 다시 작성하면


버튼 등이 붉어집니다.

또한 아이콘의 색상을 변경하려면

css/myplayer.css
.plyr--full-ui input[type=range] {
  color: red;  /* とりあえず赤くしてみる */
}

.plyr__control--overlaid {
  background: rgba(255,0,0, .8);  /* とりあえず赤くしてみる */
}

.plyr--video .plyr__control.plyr__tab-focus,
.plyr--video .plyr__control:hover,
.plyr--video .plyr__control[aria-expanded=true] {
  background: red;  /* とりあえず赤くしてみる */
}

.plyr__control.plyr__tab-focus {
  box-shadow: 0 0 0 5px rgba(255,0,0, .5);  /* とりあえず赤くしてみる */
}

.plyr__menu__container .plyr__control[role=menuitemradio][aria-checked=true]::before {
  background: red;  /* とりあえず赤くしてみる */
}

.plyr--audio .plyr__control.plyr__tab-focus,
.plyr--audio .plyr__control:hover,
.plyr--audio .plyr__control[aria-expanded=true] {
  background: red;  /* とりあえず赤くしてみる */
}

.plyr__control {
  color: yellow;  /* アイコンを黄色くしてみる */
}

아이콘이 노란색으로 변했습니다.


원하는 버튼 표시



plyr.js에서는 디폴트의 버튼 이외에 「10초 돌아온다」, 「10초 진행한다」등의 버튼을 추가하거나, 「픽쳐 인 픽쳐를 숨기기」등의 세세한 설정도 가능하게 되어 있습니다.

모든 버튼
controls: [
    'play-large', // 再生前に表示される再生ボタン
    'restart', // もう一度最初からのボタン
    'rewind', // seektimeで指定した秒数戻るボタン
    'play', // 再生、一時停止ボタン
    'fast-forward', // seektimeで指定した秒数進むボタン
    'progress', // プログレスバーの表示
    'current-time', // 現在時間、残り時間の表示
    'duration', // 動画全体の再生時間
    'mute', // ミュート、ミュート解除ボタン
    'volume', // 音量コントロール
    'captions', // 字幕表示ボタン
    'settings', // 設定メニュー（再生速度、画質選択）
    'pip', // ピクチャーインピクチャー
    'airplay', // AirPlay(MacのSafariのみ）
    'download', // 指定したソースのダウンロードボタン
    'fullscreen' // フルスクリーンボタン
];

control은 아래와 같이 설정에 주는 것으로 설정할 수 있습니다.

js/myplayer.js
$(function() {
  const control = [ 
    'play-large', // 再生前に表示される再生ボタン
    'restart', // もう一度最初からのボタン
    'rewind', // seektimeで指定した秒数戻るボタン
    'play', // 再生、一時停止ボタン
    'fast-forward', // seektimeで指定した秒数進むボタン
    'progress', // プログレスバーの表示
    'current-time', // 現在時間、残り時間の表示
    'duration', // 動画全体の再生時間
    'mute', // ミュート、ミュート解除ボタン
    'volume', // 音量コントロール
    'captions', // 字幕表示ボタン
    'settings', // 設定メニュー（再生速度、画質選択）
    'pip', // ピクチャーインピクチャー
    'airplay', // AirPlay(MacのSafariのみ）
    'download', // 指定したソースのダウンロードボタン
    'fullscreen' // フルスクリーンボタン
  ];
  player = new Plyr('#video_player', { controls: control });
});



control의 내용을 만지면 버튼의 순서나 표시할 버튼을 선택할 수도 있습니다.

js/myplayer.js
$(function() {
  const control = [ 
    'play', // 再生、一時停止ボタン
    'rewind', // seektimeで指定した秒数戻るボタン
    'fast-forward', // seektimeで指定した秒数進むボタン
    'progress', // プログレスバーの表示
    'current-time', // 現在時間、残り時間の表示
    'mute', // ミュート、ミュート解除ボタン
    'volume', // 音量コントロール
    'settings', // 設定メニュー（再生速度、画質選択）
    'fullscreen' // フルスクリーンボタン
    ];
  player = new Plyr('#video_player', {controls: control});
});


디폴트의 ​​외형을 바꾸는 것만이라면, 위치를 바꾸거나, 하나하나 요소의 CSS를 지정하는 것으로 어떻게 됩니다만, 제 경우에는, 이 멋진 플레이어를 「오리지날의 버튼을 추가하고 싶다」라고 하는 오더에 의해 커스터마이즈 하는 더욱 가혹한 길 를 진행합니다.

참고 링크:
css에 관해서는 아래의 답변이 정말 도움이 되었습니다.
htps : // 기주 b. 코 m / 사 m 팝 ts / plyr / 이스에 s / 662 # 이스에 코멘 t-498825513

컨트롤러의 표시는 아래의 공식 문서를 알기 쉽지만, 이것에 도착하는 것이 힘들었다.
htps : // 기주 b. 이 m / m 팝 / ts / plyr / b / b / ms / r / 혼 T로 LS. md
지금까지 JW Player를 사용했지만 plyr.js를 사용자 정의했습니다 (1)
입력 양식에 이미지를 삽입하거나 문자의 글꼴을 텍스트에서 변경할 수 있는 summernote 도입 방법

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

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