plyr视频播放器

一，准备

官网: 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