You are here
Real Time Messaging Protocol with Flowplayer rtmp chatgpt 有大用
自己亲自做的例子 见附件 flowplayer-rtmp.zip (这个附件有大用)
Real Time Messaging Protocol with Flowplayer
The above example uses the RTMP streaming plugin to stream a video from an Wowza Media Server hosted by MaxCDN. Try seeking to any part of the timeline.
The following RTMP servers are the most popular and they are all supported by this streaming plugin:
Features
This plugin offers the following features:
Random seeking to any part of the timeline at any time.
Ability to combine a group of clips into one gapless stream.
Starting playback in the middle of the clip's timeline
Stopping before the clip file actually ends without downloading the whole file.
Playback of live streams.
Streaming MP3 audio with random seeking.
Example
<!-- widescreen container, 560x240 (clip dimensions) * 1.15, center splash -->
<div id="wowza" style="width:644px;height:276px;margin:0 auto;text-align:center">
<img src="/media/img/player/splash_black.jpg"
height="276" width="548" style="cursor:pointer" />
</div>
$f("wowza", "http://releases.flowplayer.org/swf/flowplayer-3.2.18.swf", {
clip: {
url: 'mp4:vod/demo.flowplayer/buffalo_soldiers.mp4',
scaling: 'fit',
// configure clip to use hddn as our provider, referring to our rtmp plugin
provider: 'hddn'
},
// streaming plugins are configured under the plugins node
plugins: {
// here is our rtmp plugin configuration
hddn: {
url: "flowplayer.rtmp-3.2.13.swf",
// netConnectionUrl defines where the streams are found
netConnectionUrl: 'rtmp://r.demo.flowplayer.netdna-cdn.com/play'
}
},
canvas: {
backgroundGradient: 'none'
}
});
The standalone version of this example can be found here.
You should consult your server's documentation about how streaming servers are set up and what their specifications are. For example:
Adobe's Flash Media Server does not like the file extension in the clip's URL so you should not include it in the value. For example, just use url: 'example' even when the file is actually named 'example.flv'. For MP4 files the clip's URL must be prefixed with mp4:, i.e. url: 'mp4:example'.
Configuration
Plugin configuration options:
| Property | Default | Description |
|---|---|---|
|
| Name of function which queries the duration of the stream from the server. Usually only needed for MP3 audio streams delivered from an Adobe Flash Media server. |
|
| For a live DVR stream, configure to start at the live portion of the DVR stream. |
|
| For a live DVR stream, configure to start at the recorded portion of the DVR stream. |
|
| The time in milliseconds until a RTMPT (rtmp tunneled through http) connection is tried when connecting via rtmp fails because for instance the default rtmp port is blocked. |
|
| Set this to |
|
| The RTMP URL used to connect to the server app. This is optional and you can also specify this in the clip, so that the different clips in the playlist point to different servers. |
|
| The object encoding used with the streaming server. Change this to a value of 0 if you need to communicate to servers released prior to Flash Player 9 (Adobe Flash Media Server 2). |
|
| The proxyType determines which fallback methods are tried if an initial connection attempt to the server fails. Flowplayer establishes the connection by doing parallel connection attempts using RTMP and RTMPT. The one that succeeds first is used and the other one is discarded - this way the connection is established as fast as possible in firewalled and proxied network environments. |
|
| Set to |
Some configuration options are given in the clip object:
| Clip Property | Default | Description |
|---|---|---|
|
| An array of arguments to be passed to NetConnection.connect(). Some CDN networks require custom values to be passed here. You can also use this to pass data to your application running in the RTMP server. For example, you can use |
|
| The RTMP URL used to connect to the server app. Required if not specified in the plugin. |
|
| Set to |
|
| The name of the stream. For H.264 encoded files, use the following format: |
Combining streams
Our next example combines two video files into one stream. We alternate between two videos playing 10 seconds at a time from each before switching to the other video. Every time we switch back to a video it resumes from the same time it was previously stopped at. There are no gaps when the stream switches, it comes as one continuous bitstream from the server. Flowplayer's controlbar shows the two streams in one timeline corresponding to their total duration.
<!-- our player container named "streams" -->
<!-- player container-->
<a class="player"
style="display:block;width:425px;height:300px;margin:10px auto"
id="streams">
</a>
$f("streams", "http://releases.flowplayer.org/swf/flowplayer-3.2.18.swf", {
clip: {
provider: 'cloudfront',
// combined streams are configured in the "streams" node as follows:
streams: [
{ url: 'metacafe', duration: 10 },
{ url: 'honda_accord', start: 2, duration: 10 },
{ url: 'metacafe', start: 10, duration: 10 },
{ url: 'honda_accord', start: 10, duration: 10 },
{ url: 'metacafe', start: 20, duration: 10 },
{ url: 'honda_accord', start: 20, duration: 10 },
{ url: 'metacafe', start: 30, duration: 10 },
{ url: 'honda_accord', start: 30, duration: 10 }
]
},
// our rtmp plugin is configured identically as in the first example
plugins: {
cloudfront: {
url: "flowplayer.rtmp-3.2.13.swf",
netConnectionUrl: 'rtmp://s3b78u0kbtx79q.cloudfront.net/cfx/st'
}
}
});
The standalone version of this example can be found here.
Multiple servers
You can have clips in the playlist coming from several RTMP servers.
$f("container3", "http://releases.flowplayer.org/swf/flowplayer-3.2.18.swf", {
// common configuration for each clip
clip: {
// each clip uses the rtmp provider
provider: 'rtmp'
},
// here is our playlist
playlist: [
'mp4:video1.mp4',
'mp4:video2.mp4',
{
// third clip uses a different RTMP server
netConnectionUrl: 'rtmp://red5hosting.com/vodapp',
url:'Extremists.flv'
}
],
plugins: {
rtmp: {
url: "flowplayer.rtmp-3.2.13.swf",
netConnectionUrl: 'rtmp://flowplayer.org:1935/fastplay'
}
}
});
If the netConnectionUrl is given in the clip it overrides the value given in the plugin. In the example above, the first two clips come from the server listening at rtmp://beta.flowplayer.org:1935/fastplay, and the third clip comes from the clip specific server listening at rtmp://red5hosting.com/vodapp.
Live streams
You can use this plugin to view live streams. The configuration is almost the same; however, the clip URLs now specify the live stream names. These names are assigned when the stream is published to the server. To publish your own stream you will need a webcam and for example Adobe's Flash Media Live Encoder to encode the stream and send it to the server. To see what this does in action, take a look at justin.tv. To enable live streaming, add the live property to the clip to designate that the clip is indeed a live feed:
$f("live", "http://releases.flowplayer.org/swf/flowplayer-3.2.18.swf", {
clip: {
url: 'my_lifecast',
live: true,
// configure clip to use influxis as our provider, it uses our rtmp plugin
provider: 'influxis'
},
// streaming plugins are configured under the plugins node
plugins: {
// here is our rtpm plugin configuration
influxis: {
url: "flowplayer.rtmp-3.2.13.swf",
// netConnectionUrl defines where the streams are found
netConnectionUrl: 'rtmp://cyzy7r959.rtmphost.com/flowplayer'
}
}
});
Streaming MP3 audio (with server-side stream length detection)
The plugin can query stream lengths from the RTMP server as described in this Adobe document. This is enabled by configuring the name of the server-side function that returns the stream length. As with video clips RTMP powered audio allows random seeking in the timeline and also random start positions.
Important! Audio files deployed via RTMP must be encoded at a constant bitrate (CBR). The duration of audio files is calculated from the bitrate, therefore a file encoded at variable bitrate (VBR) will lead to haphazard results.
<!-- set up player container -->
<a id="audio" style="display:block;width:708px;height:30px;"
href="mp3:fake_empire-cbr"></a>
// install flowplayer into container
$f("audio", "http://releases.flowplayer.org/swf/flowplayer-3.2.18.swf", {
plugins: {
rtmp: {
url: "flowplayer.rtmp-3.2.13.swf",
netConnectionUrl: 'rtmp://s3b78u0kbtx79q.cloudfront.net/cfx/st',
// make the rtmp plugin query the stream length from the server
durationFunc: 'getStreamLength'
},
controls: {
fullscreen: false,
height: 30,
autoHide: false
}
},
// we don't see the video screen's play button, so don't load it
play: null,
clip: {
// it's possible to stream audio by using the RTMP plugin
provider: 'rtmp',
autoPlay: false
}
});
The server-side stream length detection is only necessary with Adobe FMS. Red5 and Wowza don't need this as they seem to inject the duration metadata into the file when the streaming begins.
The standalone version of this example can be found here.
Note: Streaming audio via RTMP is done without the audio plugin. Therefore the coverImage clip property which is specifically provided by the audio plugin is not available.
Events and MP3 metadata
As with all clips, you can set up event listeners for your MP3 files. For example, you can trigger your custom events when the music starts, stops, pauses and resumes. If your MP3 is ID3 tagged, you can gain access to the id3-tags' data via the metaData object in the onMetaData event and all subsequient clip events. Here is an example:
clip: {
onMetaData: function(song) {
alert("Now playing: " + song.metaData.TIT2);
}
}
Note: Exclusively ID3 version 2.3 tags and higher are supported. Meta information from MP3 files carrying ID3v1 tags, ID3v2.2 (obsolete) or both ID3v1 and ID3v2 tags cannot be retrieved.
Typical properties in the metaData object include:
| Property | Description | Example |
|---|---|---|
| Album name |
|
| Music category |
|
| Encoding |
|
| Song title |
|
| Artist |
|
| Track number |
|
| Album year |
|
Alternatively the following full tag names are also available: album, songtitle, artist, track,year.
Download
| flowplayer.rtmp-3.2.13.swf | just the working flash file to get you going |
| flowplayer.rtmp-3.2.13.zip | working flash file (swf) + README.txt and LICENSE.txt |
| flowplayer.rtmp-3.2.13-src.zip | source code |
Please right-click and choose "Save link as..." (or similar)
Note: For XSS security reasons Flash plugins must be located at and loaded from the same domain as the core player flowplayer-3.2.18.swf.
This is a Flash plugin, and its features are therefore not available on iOS. For iOS please consult the ipad plugin.
See the version history for this tool.
Found a bug?
If you encounter problems with this script, please turn to the Flowplayer Flash plugin forum with a link to a minimal sample page (no extra html, css, javascript) demonstrating the issue.
来自 http://flash.flowplayer.org/plugins/streaming/rtmp.html
| 附件 | 大小 |
|---|---|
 flowplayer-rtmp.zip | 280.53 KB |