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

最新推荐文章于 2025-06-23 15:28:44 发布

码农人生1314

最新推荐文章于 2025-06-23 15:28:44 发布

阅读量7.3k

点赞数

CC 4.0 BY-SA版权

分类专栏：流视屏文章标签：视频视频流 web 免费

本文链接：https://blog.youkuaiyun.com/u010989191/article/details/51346604

流视屏专栏收录该内容

0 篇文章

订阅专栏

本文介绍如何使用开源的Flowplayer视频播放器。通过简单的示例代码展示了如何加载播放器及播放本地和在线视频。此外，还提供了演示项目的源代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

Flowplayer 是一个开源（GPL 3的）WEB视频播放器。您可以将该播放器嵌入您的网页中，如果您是开发人员，您还可以自由定制和配置播放器相关参数以达到您要的播放效果。支持播放MP4、flv、swf等流媒体以及图片文件，能够非常流畅的播放视频文件，支持自定义配置和扩展。
测试项目源文件：http://download.youkuaiyun.com/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>