Objective
FlowPlayer is an open source (GPL 3) Web video player. You can embed the player in your Web page, and if you are a developer, you can also freely customize and configure player-related parameters to achieve your desired playback. Supports playback of MP4, FLV, SWF and other streaming media as well as picture files, can play video files very smoothly, support custom configuration and extension.
Test Project source file: http://download.csdn.net/detail/u010989191/9513711.
How do I use it? Load Flowplayer.js
Because it relies on the jquery open Source Library, you need to load jquery first and then load 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>
How to use
<div class="flowplayer" data-swf="./swf/flowplayer.swf" data-ratio="0.4167"> <video> <source type="video/mp4" src="./mp4/kc5Zfm44NeeT8nvv-MbhUQ__.mp4"> </video> </div>
Demo Source
<%@ 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 Streaming video Screen</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: px "Myriad Pro", "Lucida Grande", Sans-serif ; text-align: center; padding-top: tenpx; } . FlowPlayer { width: %; padding-bottom: tenpx; }</style></head><body> <h3>Play local video./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>Play video link: 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>
Run results
Summarize
This article simply demonstrates how to use the FlowPlayer streaming video screen. In the preface you can go directly to the official website to learn more detailed instructions for use.
FlowPlayer video Streaming-based free web video player