Flowplayer基于视频流的免费web视频播放器

前言

Flowplayer 是一个开源(GPL 3的)WEB视频播放器。您可以将该播放器嵌入您的网页中,如果您是开发人员,您还可以自由定制和配置播放器相关参数以达到您要的播放效果。支持播放MP4、flv、swf等流媒体以及图片文件,能够非常流畅的播放视频文件,支持自定义配置和扩展。

测试项目源文件:http://download.csdn.net/detail/u010989191/9513711

如何使用?

加载flowplayer.js

因为依赖于jQuery开源库,故需要先加载jQuery,然后加载flowplayer.min.js

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

使用方式

 <div class="flowplayer" data-swf="./swf/flowplayer.swf" data-ratio="0.4167">
      <video>
         <source type="video/mp4" src="./mp4/kc5Zfm44NeeT8nvv-MbhUQ__.mp4">
      </video>
   </div>

演示源码

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Flowplayer流视屏</title>
<link rel="stylesheet" href="skin/functional.css">
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<!-- include flowplayer -->
<script src="./js/flowplayer.min.js"></script>
<style>
   body { font: 12px "Myriad Pro", "Lucida Grande", sans-serif; text-align: center; padding-top: 10px; }
   .flowplayer { width: 80%; padding-bottom: 10px; }
</style>
</head>
<body>
  <h3>播放本地视频./mp4/kc5Zfm44NeeT8nvv-MbhUQ__.mp</h3>
   <!-- the player -->
   <div class="flowplayer" data-swf="./swf/flowplayer.swf" data-ratio="0.4167">
      <video>
         <source type="video/mp4" src="./mp4/kc5Zfm44NeeT8nvv-MbhUQ__.mp4">
      </video>
   </div>
   <h3>播放视频链接:http://dlqncdn.miaopai.com/stream/L~OdavVeSPc-9RyHhLxqZA__.mp4</h3>
   <!-- the player -->
   <div class="flowplayer" data-swf="./swf/flowplayer.swf" data-ratio="0.4167">
      <video>
         <source type="video/mp4" src="http://dlqncdn.miaopai.com/stream/L~OdavVeSPc-9RyHhLxqZA__.mp4">
      </video>
   </div>
   </body>
</html>

运行结果

总结

本文只是简单演示了flowplayer流视屏怎么使用的。在前言中可以直接进入官网了解到更详细的使用说明。

时间: 2024-10-25 21:26:40

Flowplayer基于视频流的免费web视频播放器的相关文章

Flowplayer-一款免费的WEB视频播放器

Flowplayer支持播放flv.swf等流媒体以及图片文件,能够非常流畅的播放视频文件,支持自定义配置和扩展. 1.加载flowplayer.js 在要播放视频的页面的head之间加入flowplayer.js. <script type="text/javascript" src="js/flowplayer-3.2.6.min.js"></script> 您可以到flowplyer官网上下载最新版本:http://flowplayer

Clappr——开源的Web视频播放器

巴西著名的门户网站Globo.com(视 频播放器),使用的是基于OSMF的Flash组件.在最近几年的发展过程中,Globo为视频平台陆续添加了不少额外功能,例如: 字幕,广告,画中画播放等.然而,由于缺乏针对视频平台进行维护的专门小组,网站工程师之一的FlávioRibeiro越来越感觉这个平台落后和难以应 付不断增长的在线访问需求了.特别是今年,世界杯第二次来到足球王国,Globo将面临的是激增的赛事回放点击.有鉴于此,Ribeiro与同事们决定对 播放器进行升级改造.在进行一番验证测试后

WEB视频播放器插件,总结

WEB视频播放器插件,总结 2018年07月29日 20:42:11 流光忆莲 阅读数:572更多 个人分类: 推荐文章收藏 以下是关于网页中嵌入视频播放插件的各种资料的总结 基于H5的Vediojs Jquery视频播放插件 jPlayer播放插件 JqeryVideo.js 和 Jplayer 下载 基于H5的Vediojs 官网: http://videojs.com/ 相关资料 https://blog.csdn.net/zhanghao143lina/article/details/7

最简单的基于DirectShow的示例:视频播放器自定义版

本文记录一个简单的基于DirectShow的自定义的视频播放器.这里所说的"自定义播放器",实际上指的是自己在Filter Graph中手动逐个添加Filter,并且连接这些Filter的后运行的播放器.这么做相对于使用RenderFile()这种"智能"创建Filter Graph的方法来说要复杂不少,但是可以让我们更加了解DirectShow的体系. 流程图 最简单的基于DirectShow的自定义的视频播放器的流程如下图所示. 该流程图中包含如下变量: IGr

Atitit.web 视频播放器classid clsid 大总结quicktime,vlc 1. Classid的用处。用来指定播放器 1 2. &lt;object&gt; 标签用于包含对象,比如图像、音

Atitit.web 视频播放器classid clsid 大总结quicktime,vlc 1. Classid的用处.用来指定播放器 1 2. <object> 标签用于包含对象,比如图像.音频.视频.Java applets.ActiveX.PDF 以及 Flash. 1 3. <p>----readone 2 4. ---wmp  最新版(支持wmp12) 2 5. --pps (不能使用) 3 6. --qktm 3 7. --vlc 3 1. Classid的用处.用来

最简单的基于DirectShow的示例:视频播放器

本文记录一个最简单的基于DirectShow的视频播放器.DirectShow是一个庞大的框架,可以在Windows下实现多种多样的视频处理需求.但是它的"庞大"也使得新手不太容易学习它的使用.本文的例子正是为解决这一问题而做的,它只包含了使用DirectShow播放一个视频文件所需要的最重要的函数. 流程图 最简单的使用DirectShow播放视频文件的流程如下图所示. 流程图中涉及到几个接口如下所示. IGraphBuilder:继承自IFilterGraph,用于构建Filter

最简单的基于DirectShow的示例:视频播放器图形界面版

本文记录一个最简单的基于DirectShow的图形界面的视频播放器.基于DirectShow的图形界面的播放器的例子还是比较多的,但是大部分都是"层层封装"的例子."层层封装"的例子相对来说更加稳定,但是却不是很容易理解.因为DirectShow本身的接口函数的数量就比较多,如果再加上封装DirectShow的函数,合起来的函数数量是非常大的,很容易让人搞不清哪些才是真正的DirectShow接口函数.本播放器剥去了DirectShow例子中的"层层封装&

Flowplayer-一款免费的WEB视频播放器 转 - helloweba.com

Flowplayer支持播放flv.swf等流媒体以及图片文件,能够非常流畅的播放视频文件,支持自定义配置和扩展. 1.加载flowplayer.js 在要播放视频的页面的head之间加入flowplayer.js.  <script type="text/javascript" src="js/flowplayer-3.2.6.min.js"></script>  您可以到flowplyer官网上下载最新版本:http://flowplay

基于FFMPEG和SDL实现视频播放器

这个是雷大牛实现的工程. http://download.csdn.net/detail/leixiaohua1020/5122959 有兴趣的可以好好研究研究.