Home > Developer > Web Develop
HTTP protocol implementation of the FLV playback is not complicated, the original implementation of the principle is the use of FlowPlayer plug-in implementation, the effect is good. But there are still two big problems that affect the customer's emotional access:
1. The page is stuck when preloaded, and there seems to be no side-down broadcast.
2. Occasionally, you cannot drag the timeline to the part that is not downloaded. I believe many people also encounter this problem.
Once wanted to use a dedicated media server such as Adobe's FMS to achieve this function, after the multi-party search for information, found that the use of Media server cost is high, and efficiency is not very good, the major video sites have not adopted this approach. While implementing the HTTP protocol to play FLV and drag the timeline is not impossible, the key lies in the following points:
First, to add metadata information to the FLV file
Flvtool2 and Yamdi can achieve this function, but the efficiency of the Yamdi tool is much higher, about 2 minutes of FLV processing time around 400M, recommended to use. This is done by executing the following command in the CMD command window:
Yamdi-i source file name-o new file name
Second, the use and configuration of FlowPlayer
FlowPlayer is a web-side play FLV and other video, powerful features, using the version of 3.2.2, can support a variety of plug-ins, the implementation of the ability to drag the timeline is also a plug-in using it, The plug-in name is: flowplayer.pseudostreaming-byterange-3.2.9.swf, the version used is 3.2.9,3.2.10 not be used as a flowPlayer3.2.2 plug-in, testing no image display. The way the page is written is that the red mark is the important part:
<%@ page language= "Java" import= "java.util.*; pageencoding=" utf-8″%>
<%@ taglib prefix= "C" uri= "Http://java.sun.com/jstl/core"%>
<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" >
<title>FLV</title>
<script type= "Text/javascript"
src= "<c:url value="/script/jquery-1.5.2.min.js "/>" ></script>
<script type= "Text/javascript"
src= "<c:url value="/_flowplayer/flowplayer-3.2.4.min.js "/>" ></script>
<body>
<script type= "Text/javascript" >
<!–
var p;
$ (function () {
p = $ (". Player"). FlowPlayer (
{
SRC: ' <c:url value= '/_flowplayer/flowplayer.commercial.swf '/> ',
Wmode: "Opaque"
},
{
clip:{
Scaling: ' orig ', setting the player to read the original video aspect ratio
Autoplay:true,
Autobuffering:true,
Bufferlength:1,
Provider: ' LIGHTTPD '
},
Plugins: {
CONTROLS: {
URL: ' <c:url value= '/_flowplayer/flowplayer.controls-air-3.2.2.swf '/> ',
opacity:0.8,
BackgroundColor: ' #000,
Scrubber:true,
Buttoncolor: ' #000,
Buttonovercolor: ' #4c4c4c ',
AutoHide: {
Enabled:true,
Fullscreenonly:false,
hidedelay:1000,
mouseoutdelay:2000,
Hidestyle: ' fade '
}
},
LIGHTTPD: {
URL: "<c:url value="/_flowplayer/flowplayer.pseudostreaming-byterange-3.2.9.swf "/>"
, Querystring:escape ('? target=${' ${start} '}&SECRETTOKEN=1235OH8QEWR5UWEYNKC ')
QueryString configures the parameters that are sent to the background after dragging the timeline. ${start} is a fixed format.
}
},
Play: {replaylabel: "Play Again", Width:120, height:50}
})
})
à
</script>
<!-video display area à
<div class= "LEFT_VIDEO_AREABG clearwrap" >
<!-video Limit high width w:451px h:252pxà
<a class= "Player"
href= "<c:url value="/movie/131201174437530567c.flv "/>"
Style= "Display:block; width:429px; height:252px; "id=" Player1 ">
</a>
</div>
<div class= "Left_video_dotline" ></div>
<div class= "Blank8" ></div>
<button onclick= "$f (). Seek (60);" >1 minutes </button>
<button onclick= "$f (). Seek (180);" >3 minutes </button>
<button onclick= "alert ($f (). GetTime ());" > Get current point in time </button>
</body>
Third, the realization of streaming output servlet writing
Package Flv.laukin.NET;
Import java.io.IOException;
Import Java.io.RandomAccessFile;
Import javax.servlet.ServletException;
Import Javax.servlet.http.HttpServlet;
Import Javax.servlet.http.HttpServletRequest;
Import Javax.servlet.http.HttpServletResponse;
public class Flvstreamservlet extends httpservlet{
protected void Doget (HttpServletRequest req, HttpServletResponse resp)
Throws Servletexception, IOException {
TODO auto-generated Method Stub
Resp.reset ();
Resp.setcontenttype ("video/x-flv");
String target = Req.getparameter ("target"); Receive parameters, as the number of bytes
int targetint = 0;
System.out.println ("target:" + target);
System.out.println ("Target:" + Req.getservletpath ());
String Flvpath = Req.getsession (). Getservletcontext (). Getrealpath (Req.getservletpath ());
System.out.println (Flvpath);
Randomaccessfile RAF = null;
int totalbyte = 0;
try{
RAF = new Randomaccessfile (Flvpath, "R");
Totalbyte = (int) raf.length ();
if (target! = NULL &&! "). Equals (target)) {
try {
Targetint = Integer.parseint (target);
byte[] Headdata = new byte[]{' F ', ' L ', ' V ', 1,1,0,0,0,9,0,0,0,9}; Response the header information in the time axis after dragging to write the byte
Resp.getoutputstream (). write (Headdata);
Resp.setcontentlength (Totalbyte–targetint + 13);
} catch (NumberFormatException e) {
Targetint = 0;
}
} else {
Resp.setcontentlength (Totalbyte–targetint);
}
Raf.skipbytes (targetint);//Skip the bytes in front of the timeline;
Byte[] B = new byte[4096];
while (Raf.read (b)! =-1) {
Resp.getoutputstream (). write (b);
}
Resp.getoutputstream (). Flush ();
} catch (Exception e) {
String simplename = E.getclass (). Getsimplename ();
if (! " Clientabortexception ". Equals (Simplename)) {
E.printstacktrace ();
}//web end Drag the timeline always has the connection is reset the exception, temporarily still do not know how to resolve, can this way does not output the exception
} finally {
if (RAF! = NULL) {
Raf.close ();
}
}
}
}
Add configuration in Web. xml:
<servlet>
<servlet-name>FlvStream</servlet-name>
<servlet-class>flv. Laukin. Net. Flvstreamservlet</servlet-class>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>FlvStream</servlet-name>
<url-pattern>*.flv</url-pattern>
</servlet-mapping>
At this point, the FLV playback under Tomcat can be arbitrarily dragged.
The following connection is the project code, which can be downloaded for communication, and the test can be put into the movie directory by its own production flv.
Flvstreaming
Source: http://www.laukin.net/wordpress/archives/191
Implementation of the FLV playback (pseudo-streaming) that can be dragged in the timeline under the HTTP protocol
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
