HTML5 или Flash Player для потоковой передачи из Amazon Cloudfront
Я хочу передавать аудио / видео файлы в плеере. Проигрыватель может быть проигрывателем HTML5 или Flash, в зависимости от того, поддерживается ли HTML5 audio() браузером клиента или нет? Потоковым сервером, который я рассматриваю, является AMAZON Cloudfront. Я ознакомился с руководством в Амазонке http://docs.amazonwebservices.com/AmazonCloudFront/latest/DeveloperGuide/RTMPStreaming.html но в нем рассказывается только о Flash Player. Можно ли использовать проигрыватель HTML5 с потоковым мультимедиа из Amazon Cloudfront?
2 ответа
В дистрибутивах ACF (Amazon CloudFront) Flash Media Server используется для потоков RTMP, поэтому сами по себе дистрибутивы CF не являются полным решением в отношении предоставления возможностей потоковой передачи и для проигрывателей / устройств без флэш-памяти!
Это оставляет вам 2 варианта;
- предлагать потоковую передачу только пользователям флэш-памяти / устройствам с возможностью регулярной прогрессивной загрузки через HTML5 ИЛИ
- Настройте медиасервер WOWZA для потоковой передачи содержимого в режиме HTML.
В любом случае, это может быть достигнуто с помощью режимов проигрывателя [] var, где вы можете указать различные параметры настройки, такие как путь / файл и другие переменные, такие как streamer & provider, в своем списке воспроизведения / проигрывателе соответственно.
Пример Предположим, у вас есть следующие настройки;
- Ведро, "my-music.s3.amazonaws.com/". Здесь вы храните ваши медиа. Например, "my-music.s3.amazonaws.com/audio/" для аудио и "my-music.s3.amazonaws.com/video/" для видео.
- Потоковый дистрибутив RTMP с вашим источником my-music.s3.amazonaws.com/. Это будет флешвар вашего стримера, что-то вроде "XXXXXXXXXXX.cloudfront.net/cfx/st/".
- MP3 находится в папке "/audio/song.mp3".
Чтобы это работало либо во Flash (с RTMP-потоком), либо в HTML5 (в качестве прогрессивной загрузки), вам необходимо настроить проигрыватель следующим образом...
<script type="text/javascript">
/* set var baseURL to your media BUCKET
NOT your streaming distribution */
var baseURL = "https://my-music.s3.amazonaws.com/";
jwplayer('mediaplayer').setup({
'id': 'playerID',
'width': '480',
'height': '270',
'file': 'audio/song.mp3', /* change to your song/video path */
'provider': 'rtmp',
'streamer': 'rtmp://XXXXXXXXXXX.cloudfront.net/cfx/st/',
'modes': [
{
type: 'flash',
/* set the location of your SWF object */
src: 'https://my-player.s3.amazonaws.com/plugins/jwplayer/player.swf'
},
{
type: 'html5',
config: {
/* prepend your BUCKET URL (baseURL var) to the file path */
'file': baseURL + 'audio/song.mp3',
/* set provider */
'provider': 'video'
}
}
]
});
</script>
Конечно, если вы используете CMS, виджет, плагин или модуль для управления вашими игроками, вы, вероятно, сможете просматривать и редактировать эти параметры на экране администратора или, наоборот, устанавливать их программно.
Следует отметить, что порядок размещения объектов типа в массиве mode[] - это порядок, в котором JW-плеер будет пытаться загрузить.
Для получения дополнительной информации см. Режимы JW Embedder здесь.
Предложение двойной потоковой передачи Если вы хотите предлагать потоковую передачу с использованием HTML5, вы должны использовать тот же подход, соответственно изменяя атрибуты streamer, provider в объекте типа html5.
Надеюсь, что это полезно!
Гез
JWplayer будет очень легко выполнять как html5, так и потоковую передачу из Cloudfront.
Подробности смотрите в следующем... http://www.longtailvideo.com/support/jw-player/jw-player-for-flash-v5/49/using-cloudfront
Джон