Apple HTTP Live Streaming (HLS)
This test page was created by Walter Ebert.
The videos are based on sources provided by Sintel, the Durian Open Movie Project.
The build script is available on GitLab.
Browsers that support HLS:
- Apple Safari (Mac OS X / iOS)
- Android Browser / Chrome on Android 3.0 or later
- Microsoft Edge (Trident)
Apache MIME type configuration
AddType application/x-mpegurl m3u8
AddType video/mp2t ts
Note: AddType application/vnd.apple.mpegurl m3u8 #Does not work on most Android devices
Demos
HTML5
Video |
HTML code |
|
<video controls width="480" height="270" src="sintel-trailer.m3u8">
|
|
<video controls width="480" height="270">
<source src="sintel-trailer.m3u8" type="application/x-mpegurl">
</video>
|
|
<video controls width="480" height="270">
<source src="sintel-trailer.m3u8" type="application/vnd.apple.mpegurl">
</video>
|
|
<video controls width="480" height="270" src="480x270.m3u8">
|
Flash
Video |
HTML code |
|
<div id="flowplayer" style="width: 480px; height: 270px;"></div>
<script>
flowplayer("flowplayer", "flowplayer.swf", {
plugins: {
httpstreaming: {
url: 'flowplayer.httpstreaminghls-3.2.10.swf'
},
menu: {
url: "flowplayer.menu.swf",
items: [
{ label: "select resolution:", enabled: false }
]
},
brselect: {
url: "flowplayer.bitrateselect.swf",
menu: true,
}
},
clip: {
url: "sintel-trailer.m3u8",
urlResolvers: ["httpstreaming","brselect"],
provider: "httpstreaming",
autoPlay: false
}
});
</script>
Reference: Electroteque Media
|