Flowplayer视频播放插件

所属分类:媒体-音频和视频

 135047  427  查看评论 (33)
分享到微信朋友圈
X
Flowplayer视频播放插件 ie兼容10

flowplayer分html5版和flash版本,大家可根据需求选择版本。

一. 介绍:Flowplayer支持播放flv、swf等流媒体以及图片文件,能够非常流畅的播放视频文件,支持自定义配置和扩展。

二. 调用:

1. 在页面头部Head标签内添加引用 

<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="flowplayer.min.js"></script>

2. 在页面中添加播放器实例化代码:

这里介绍两种调用方法

方法一:

<div class="flowplayer" data-swf="flowplayer.swf" data-ratio="0.4167">
      <video>    
         <source type="video/mp4" src="http://jq22com.qiniudn.com/jq22com.mp4">
      </video>
</div>

说明:

将a标签的href属性指向要播放的视频地址,设置播放器显示时的宽度和高度,设置a标签为display:block,并为a标签指定id,该id用于flowplayer的js调用。

方法二:

<div id="tl_player" style="width: 670px; height: 450px;"></div>
<script>
    flowplayer("tl_player","/js/flowplayer/flowplayer-3.2.12.swf",{clip:{ url:"/Video/story.flv",autoPlay: false, autoBuffering:true} });
</script>

说明:

也可以用div或者span 等其他标签来作为播放器的容器,但要给定其style的高度,宽度且为块级元素。

一些设置参数:clip方法里的url:表示视频文件的真实地址,autoPlay:表示是否自动播放,默认是true,autoBuffering:表示是否自动缓冲,即当视频文件设置为不自动播放时,播放器仍然预先下载视频文件内容。


相关插件-音频和视频

简单的音乐播放器

手写原生态的音乐播放器 代码注释全,修改方便,可以参考一下
  音频和视频
 36833  357

Html5 手机视频播放器自适应

Html5 手机视频播放器自适应
  音频和视频
 140468  616

jQuery自定audio音频

jQuery自定义audio音频样式,包括功能。
  音频和视频
 28083  321

交互式的唱机

实验模板与一个交互式的老唱机的网络音频API。
  音频和视频
 37842  458

讨论这个项目(33)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    就这样 0
    2020/5/6 15:15:30
    大佬,为什么我的视频在本地浏览中可以播放但是联网就不能播放了呢 回复
    旧人丶life 0
    2019/8/20 9:45:54
    、沉迷学习 0
    2019/7/14 19:34:17
    大神 报错了 Cannot read property 'split' of undefined 回复
    Qiang66 0
    2019/7/13 23:28:10
    请问怎么删除窗口下面一排的暂停按钮 进度条 音量...... 万分感谢
        BattleofLexington0
        2019/7/14 1:38:44
        设置样式隐藏
        .fp-ui{display: none;}
    回复
    Jack2019 0
    2019/7/3 9:13:15
    视频变形怎么办,手机拍的视频,播放时旋转了,变形有点大 回复
    喜欢懒懒的` 一个人就好 0
    2019/6/10 17:41:36
    请问怎么更改暂停时屏幕中间暂停按钮的样式
        西瓜0
        2019/6/10 17:48:49
        修改skin/img/play_white.png中图片样式。
    回复
    努力,未来! 0
    2018/10/25 23:08:36
    请问支持哪些视频格式呀,详细点
        西瓜0
        2019/6/10 17:50:58
        mp4,webm,ogg三种格式
    回复
    冰糖雪梨@ 0
    2018/10/11 19:12:05
    楼主,有flowplayer视频插件
    HTML5版本的分享吗? 回复
    潇潇夜蔚凉 0
    2018/9/30 10:55:03
    全屏旁边那个粘片链接按钮怎么去掉呀,放着好丑呀 回复
    tudouyy 0
    2018/9/18 11:30:26
    点击全屏播放,支持横屏吗? 回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复