Flowplayer视频播放插件

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

 134941  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:表示是否自动缓冲,即当视频文件设置为不自动播放时,播放器仍然预先下载视频文件内容。


相关插件-音频和视频

h5视频播放器

支持拖拽与点击跳转可以切换全屏并且支持音量调节已经绑定键盘事件
  音频和视频
 126771  445

歌词读取插件klrcreader(原创)

歌词读取器超迷你引擎
  音频和视频
 27188  307

canvas视频录制(原创)

mediarecoder录制媒体流 canvas绘制动画 导出录像视频
  音频和视频
 16547  150

jQuery网页跨平台媒体播放器

用于Web的可扩展的媒体播放器,跨平台,支持HLS,MP3,MP4等格式。
  音频和视频
 106665  380

讨论这个项目(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
    点击全屏播放,支持横屏吗? 回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复