Установка mediaelementjs

[meow]

Помогите поставить http://mediaelementjs.com/ на 3.1.10
Это проигрыватель, который многократно лучше audio в HTML5.

Мне нужно составить BBCode.

Что сделано:
1. Залит весь пак на сервер.
2. В overall_header.html внутри head прописано:

<script src="{ROOT_PATH}player/build/jquery.js"></script>
<script src="{ROOT_PATH}player/build/mediaelement-and-player.min.js"></script>
<link rel="stylesheet" href="{ROOT_PATH}player/build/mediaelementplayer.min.css" />
<link rel="stylesheet" href="{ROOT_PATH}player/build/mejs-skins.css" />

3. Такой BBCode

Код: Выделить всё

[mp3]{URL}[/mp3]

Html замена:

<player id="player2" src="{URL}" type="audio/mp3" controls="controls"></player><script>
$var player = new MediaElementPlayer("#player"); player.play(); </script>

выдает ошибку в консоли:

Код: Выделить всё

Uncaught SyntaxError: Unexpected identifier
    at eval (<anonymous>)
    at jquery.min.js:2
    at Function.globalEval (jquery.min.js:2)
    at n.fn.init.domManip (jquery.min.js:3)
    ....

Весь интернет перерыт, не знаю что делать.

[Sumanai]

Посмотрите, как это сделано в phpBBex: код в шапке не нужен, так как он замедляет загрузку и возникает дублирование jquery.
В общем случае вам нужно добавить в своё расширение в файл события шаблона overall_footer_after.html код типа

Код: Выделить всё

<script src="{ROOT_PATH}assets/mejs/mediaelement.js?assets_version={T_ASSETS_VERSION}"></script>
<script>
(function(){
	var s = document.createElement('link');
	s.setAttribute('rel', 'stylesheet');
	s.setAttribute('href', '{ROOT_PATH}assets/mejs/mediaelement.css');
	document.getElementsByTagName("head")[0].appendChild(s);
})();
</script>

Файлы из каталога \assets\mejs\ дистрибутива phpBBex сложить у себя по аналогичному пути, хотя по идее можно и сменить пути на другие.
А инициализацию производить отложено, в ббкоде типа

Код: Выделить всё

<audio id="attach_audio" preload="none" controls>
	<source src="{URL}" type="audio/mp3">
</audio>
<script>
function addListener(obj, type, listener) {
	if (obj.addEventListener) {
		obj.addEventListener(type, listener, false);
		return true;
	} else if(obj.attachEvent) {
		obj.attachEvent('on' + type, listener);
		return true;
	}
	return false;
}
addListener(window, 'load', function() {
	jQuery(function($)
	{
		$('#attach_audio_{_file.ATTACH_ID}').mediaelementplayer();
	});
});
</script>

Главный минус- невозможность вставить более двух плееров. В phpBBex используется уникальный идентификатор на основе ID вложения, у вас так не выйдет. Впрочем, ваш код, если его исправить, обладает тем же недостатком.
По идее, нужно сохранять ссылку на текущий контекст и использовать его вместо ID, но я с яваскриптом не дружу.

[meow]

Огромное спасибо за помощь. Запустилось.
А самое главное прояснилось в голове как это принципиально работает.

Главный минус- невозможность вставить более двух плееров. В phpBBex используется уникальный идентификатор на основе ID вложения, у вас так не выйдет. Впрочем, ваш код, если его исправить, обладает тем же недостатком.
По идее, нужно сохранять ссылку на текущий контекст и использовать его вместо ID, но я с яваскриптом не дружу.

Да, недостаток очевиден.
Рассматриваю Soundmanager 2 как возможный плеер, но он не умеет выдирать названия треков из mp3. Но блин красивый.
http://www.schillmania.com/projects/sou ... mo/bar-ui/
А вы сами что используете как плеер для phpbb?

[meow]

Если кому интересно, то нашелся грамотный человек, добавивший Native поддержку аудио в phpbb.
Играет прям с attachment`ов.

Применить можно отсюда.
https://github.com/phpbb/phpbb/pull/4439/files

[Sumanai]

Если кому интересно, то нашелся грамотный человек, добавивший Native поддержку аудио в phpbb.

Фигня. В phpBBex это сделано лучше.

Играет прям с attachment`ов.

Как в phpBBex. Только там используется стандартный элемент, а в эксе- уже упомянутый mediaelementjs, создающий единое оформление и добавляющий поддержку старым браузерам.

[Balamut]

а крестиком он вышивать умеет?

[Sumanai]

Нет, это веб-форум.