一，准备

官网: https://plyr.io/
代码copy:http://www.bootcdn.cn/plyr/

css

<link href="https://cdn.bootcss.com/plyr/3.3.7/plyr.css" rel="stylesheet">

js

<script src="https://cdn.bootcss.com/plyr/3.3.7/plyr.min.js"></script>

二，html video

<video poster="/path/to/poster.jpg" id="player" playsinline controls>
    <source src="/path/to/video.mp4" type="video/mp4">
    <source src="/path/to/video.webm" type="video/webm">

    <!-- Captions are optional -->
    <track kind="captions" label="English captions" src="/path/to/captions.vtt" srclang="en" default>
</video>

html audio

<audio id="player" controls>
    <source src="/path/to/audio.mp3" type="audio/mp3">
    <source src="/path/to/audio.ogg" type="audio/ogg">
</audio>

youtube1

<div class="plyr__video-embed" id="player">
    <iframe src="https://www.youtube.com/embed/bTqVqk7FSmY?origin=https://plyr.io&iv_load_policy=3&modestbranding=1&playsinline=1&showinfo=0&rel=0&enablejsapi=1" allowfullscreen allowtransparency allow="autoplay"></iframe>
</div>

youtube2

<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY"></div>

例子

有字幕的

没有字幕的

github：https://github.com/sampotts/plyr

一，jquery选择器

1.id选择器  $(“#id”)

2. 类选择器 $(“.class”)

3. 元素选择器 $(“span”)

4. ance desc选择器 $(“div  span”)

选择整个家族的子元素

5.parent > child选择器

只选择子元素

6.某元素下面的元素 prev + siblings

用法: $("prev + siblings")
<div>
  <span></span>
  <p></p>
  <span>选中的元素</span>
  <span></span>
</div>

7.某元素下面到某元素 prev ~ siblings

用法: $("prev ~ siblings")

<div>
  <span></span>
  <p></p>
  <span>选中的元素</span>
  <span>选中的元素</span>
</div>