[Apache] Configuring Apache for Streaming Media

Tue, 05 Jan 2016 10:00:00 +0000

Apache Configuration

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

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

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

Video Playback Example

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
Place the ckplayer folder in the website root directory, and place the sample video example.flv in the website root directory.

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>

Open a browser and visit http://localhost/video.html. You should be able to drag the video scrollbar.
Chrome 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:
Prepare a larger MP4/FLV file and replace the video URL above;
Open Chrome (recommended), and enter http://localhost/example.mp4?start=10;
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.

[Apache] Virtual Host Configuration for Multi-Domain Access to Local PHP Projects

Sat, 23 May 2015 05:34:23 +0000

First, modify the hosts file located at C:\WINDOWS\system32\drivers\etc. Open it with Notepad and add:
1 2

127.0.0.1 www.a.com 127.0.0.1 www.b.com
Open the file xampp\apache\conf\httpd.conf, search for “Include conf/extra/httpd-vhosts.conf”, and make sure there is no # comment symbol in front of it – this ensures the vhosts virtual host configuration file is included.

Once httpd-vhosts.conf is enabled, the default httpd.conf configuration becomes inactive (make sure virtual host configuration is also enabled in httpd-vhosts.conf, see step 3). All domain requests to this IP will be directed to the first virtual host in vhosts.conf.
In the virtual host configuration file xampp\apache\conf\extra\httpd-vhosts.conf:
Remove the ## before NameVirtualHost *:80 to enable vhosts.conf. The default httpd.conf configuration becomes inactive, and virtual host settings will only be configured in httpd-vhosts.conf.
1 2

DocumentRoot /xampp/htdocs/a ServerName www.a.com
1 2

DocumentRoot /xampp/htdocs/b ServerName www.b.com
After completing step 3, you will notice that accessing localhost redirects to the path configured for site a. This is explained in step 2 – once vhosts is enabled, the default httpd configuration becomes inactive, and the default access points to the first entry in vhosts. To fix this, you need to add the localhost directory configuration back.
1 2

DocumentRoot /xampp/htdocs/ ServerName localhost

With this, the XAMPP virtual host setup is complete. Now accessing localhost still shows the original XAMPP welcome page, accessing www.a.com points to the bound directory a, and accessing www.b.com points to the bound directory b.

Apache on Coinidea's Blog

[Apache] Configuring Apache for Streaming Media

Apache Configuration

Video Playback Example

[Apache] Virtual Host Configuration for Multi-Domain Access to Local PHP Projects