Почему mediaelement.js не воспроизводит файлы.m4a при использовании резервной копии Flash?

Question

У меня проблема с mediaelement.js при воспроизведении файлов с расширением.m4a в браузерах, которые изначально не поддерживают кодек AAC.

Chrome проигрывателя загружается, и первая минута аудио буферизуется, но файл никогда не воспроизводится.

В чем дело?

Answer 1

Это известная проблема с mediaelement.js. Это связано с плагином Flash, требующим воспроизведения файлов AAC с использованием класса NetStream, а не класса Sound.

Однако есть обходной путь: вы можете указать элементу мультимедиа обрабатывать файл как видео, тогда все будет работать как надо. Задавать pluginVars: 'isvideo=true' при инициализации плеера. Например

$('#player').mediaelementplayer({
            pluginVars: 'isvideo=true',
        });

Вам также может понадобиться сообщить mediaelement, что плагин Flash способен обрабатывать mime-тип audio/mp4 (по какой-то причине он в настоящее время обрабатывает только audio/m4a). Найдите файл mejs.plugins.flash в файле mediaelement-and-player.js и добавьте "audio/m4a".

Обратите внимание, что это не повлияет на браузеры, которые изначально обрабатывают файлы AAC; он вступит в игру только тогда, когда потребуется резервный Flash.

Еще одно замечание: недавно я обнаружил, что если этот обходной путь применяется без разбора, файлы MP3 могут не воспроизводиться. Поэтому вам нужно определить, когда файл имеет формат MP4/M4A, и применить его только тогда.

Answer 2

Чтобы расширить ответ @samuel-jack, вот как я решил проблему с Firefox, неспособным воспроизводить аудио AAC в оболочке.m4a, используя mediaelement.js, способом, который также позволяет воспроизводить mp3.

1. Отредактируйте mediaelement-and-player.js или mediaelement-and-player.min.js и добавьте "audio/m4a" к mejs.plugins.flash.types массив.

2. Убедитесь, что файлы.mp4 обслуживаются с правильным типом MIME; добавьте это к вашей конфигурации apache:

   AddType audio/mp4 m4a
   

3. Используйте HTML аналогично следующему. $mime_type переменная, которую я использую, содержит audio/mp4 для аудиофайлов AAC mp4 и audio/mpeg для обычных mp3 файлов.

   <audio controls preload="metadata">
       <source src="file.m4a" type="<?php echo $mime_type; ?>">
       <object width="100%" height="30" type="application/x-shockwave-flash" data="flashmediaelement.swf">
           <param name="movie" value="flashmediaelement.swf" />
           <param name="flashvars" value="controls=true&amp;file=file.m4a" />
       </object>
   </audio>
   

4. Загрузите сценарий медиаэлемента и запустите его для каждого файла отдельно. Нам нужно выборочно включать isvideo=true взломать, когда атрибут типа источника звука содержит audio/mp4,

   $('audio,video').each(function(i) {
       // Need to add the 'isvideo' hack for 'audio/mp4' media types.
       var plugin_vars = ($(this).children('source').attr('type').search('audio/mp4') > -1) ? 'isvideo=true' : '';
       $(this).mediaelementplayer({
           audioWidth: '100%',
           videoWidth: '100%',
           startVolume: 1.0,
           pluginVars: plugin_vars
       });
   });
   

Это хорошо работает для файлов.m4a и.mp3 в Firefox 25 и 31, Chrome 36 и Safari 7 в OS X, а также в Firefox 31 в Windows 7.