Web Development

[Apache] Configuring Apache for Streaming Media

Apache Configuration

  1. Download the mod_flvx.so and mod_h264_streaming.so modules.
    Note: Make sure the x86/x64 versions of Apache and the modules match [the modules below are for Apache x86 2.2 and earlier].
    Download link: http://pan.baidu.com/s/1dEzYX4d Password: jb0i

  2. Edit apache\conf\httpd.conf, find LoadModule, and add the following at the end of (or near) the LoadModule section:

    1
2
3
4

    LoadModule flvx_module modules/mod_flvx.so
AddHandler flv-stream .flv
LoadModule h264_streaming_module modules/mod_h264_streaming.so
AddHandler h264-streaming.extensions .mp4

  3. Restart Apache. If Apache fails to start, verify that the module versions match your Apache version.

Video Playback Example

  1. Download ckplayer
    Any web video player will work. This example uses ckplayer. Download link:
    http://www.ckplayer.com/
    Configuration guide:
    http://www.ckplayer.com/tool/flashvars.htm

  2. Place the ckplayer folder in the website root directory, and place the sample video example.flv in the website root directory.

  3. Create video.html with the following code:

     1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18

    <html>
<meta charset="utf8">
<head>
<title>Streaming Video Playback</title>
</head>
<body>
<div id="a1"></div>
<script type="text/javascript" src="/ckplayer/ckplayer.js" charset="utf-8"></script>
<script type="text/javascript">
    var flashvars={
        f:'http://localhost/example.flv',
        c:0
    };
    var params={bgcolor:'#FFF',allowFullScreen:true,allowScriptAccess:'always',wmode:'transparent'};
    CKobject.embedSWF('/ckplayer/ckplayer.swf','a1','ckplayer_a1','600','400',flashvars,params);
</script>
</body>
</html>

  4. Open a browser and visit http://localhost/video.html. You should be able to drag the video scrollbar.
    Chrome result:
    Chrome result
    IE result:
    IE result

    —-Update 20160106—-
    The previous test had issues because the FLV file was too small, so it was likely downloaded locally before playback.
    The correct way to verify Apache streaming is:

  5. Prepare a larger MP4/FLV file and replace the video URL above;

  6. Open Chrome (recommended), and enter http://localhost/example.mp4?start=10;

  7. If the video starts playing from the 10-second mark and supports seeking, the Apache configuration is successful.

The ckplayer mentioned above still requires waiting for the download to complete before sequential playback. It is recommended to use video.js instead, though it requires HTML5 browser support.
HTML code:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

<html>
<head>
  <link href="/video-js/video-js.css" rel="stylesheet">
  <!-- If you'd like to support IE8 -->
  <script src="/video-js/ie8/videojs-ie8.min.js"></script>
</head>
<body>
  <video id="my-video" class="video-js" controls preload="auto" width="auto" height="auto" poster="http://vjs.zencdn.net/v/oceans.png" data-setup="{}">
    <source src="/video/example.mp4" type='video/mp4'>
    <p class="vjs-no-js">
      To view this video please enable JavaScript, and consider upgrading to a web browser that
      <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
    </p>
  </video>
  <script src="/video-js/video.js"></script>
</body>
</html>

After testing, the video can be seeked to any position and played even before it is fully loaded. With this, Apache has achieved pseudo-streaming video playback.