flowplayer教程

推荐使用免费的plyr播放器,官网https://plyr.io/

flowplayer是收费的。




一,flowplayer基础用法

<!-- 1. skin -->
<link href="https://cdn.bootcss.com/flowplayer/7.0.4/skin/skin.css" rel="stylesheet">
<!-- 2. jquery library - required for video tag based installs -->
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<!-- 3. flowplayer -->
<script src="https://cdn.bootcss.com/flowplayer/7.0.4/flowplayer.js"></script>

二,flowplayer的HTML结构

<div class="flowplayer">
 <video autoplay poster="images/poster.jpg">
  <source type="video/mp4" src="path/video.mp4">
 </video>
</div>

三,css样式“去掉”flowplayer的logo


<! --去掉分享和全屏按钮-->
.fp-header{display: none;}
<!-- 让播放器下面所有的a标签透明度为0 -->
.flowplayer a{opacity: 0;}
<!-- 播放按钮的透明度恢复为1-- >
.flowplayer a.fp-playbtn{opacity: 1;}