Plyr轻量级H5 Web播放器 - Plyr HTML

使用 plyr 唯一一个需要的额外标记就是一个 <div> 包装。将源，封面和字幕用你自己的替多媒体相关链接换掉。

1. <div>
   
2.     <video poster="https://cdn.selz.com/plyr/1.0/poster.jpg" controls crossorigin>
   
3.         <!-- 视频文件 -->
   
4.         <source src="https://cdn.selz.com/plyr/1.0/movie.mp4" type="video/mp4">
   
5.         <source src="https://cdn.selz.com/plyr/1.0/movie.webm" type="video/webm">
   
6.         <!-- 字幕文件 -->
   
7.         <track kind="captions" label="English captions" src="https://cdn.selz.com/plyr/1.0/movie_captions_en.vtt" srclang="en" default>
   
8.         <!-- 针对不支持 <video> 元素的兼容 -->
   
9.         <a href="https://cdn.selz.com/plyr/1.0/movie.mp4">Download</a>
   
10.     </video>
    
11. </div>

复制代码

同样 <audio> 如下

1. <div>
   
2.     <audio controls>
   
3.         <!-- 音频文件 -->
   
4.         <source src="https://cdn.selz.com/plyr/1.0/logistics-96-sample.mp3" type="audio/mp3">
   
5.         <source src="https://cdn.selz.com/plyr/1.0/logistics-96-sample.ogg" type="audio/ogg">
   
6.         <!-- 针对不支持 <video> 元素的兼容 -->
   
7.         <a href="https://cdn.selz.com/plyr/1.0/logistics-96-sample.mp3">Download</a>
   
8.     </audio>
   
9. </div>

复制代码

针对 YouTube，Plyr 使用了标准的 YouTube API 标记（一个空的 <div>）：

1. <div>
   
2.     <div data-video-id="L1h9xxCU20g" data-type="youtube"></div>
   
3. </div>

复制代码

[color=rgba(58, 58, 58, 0.88)]