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 варианта;

  1. предлагать потоковую передачу только пользователям флэш-памяти / устройствам с возможностью регулярной прогрессивной загрузки через HTML5 ИЛИ
  2. Настройте медиасервер WOWZA для потоковой передачи содержимого в режиме HTML.

В любом случае, это может быть достигнуто с помощью режимов проигрывателя [] var, где вы можете указать различные параметры настройки, такие как путь / файл и другие переменные, такие как streamer & provider, в своем списке воспроизведения / проигрывателе соответственно.


Пример Предположим, у вас есть следующие настройки;

  1. Ведро, "my-music.s3.amazonaws.com/". Здесь вы храните ваши медиа. Например, "my-music.s3.amazonaws.com/audio/" для аудио и "my-music.s3.amazonaws.com/video/" для видео.
  2. Потоковый дистрибутив RTMP с вашим источником my-music.s3.amazonaws.com/. Это будет флешвар вашего стримера, что-то вроде "XXXXXXXXXXX.cloudfront.net/cfx/st/".
  3. 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

Джон

Другие вопросы по тегам