Здравствуйте, помогите, пожалуйста, каким-нибудь советом.
Нужно в административной части в визуальном редакторе инфоблока вставлять в материал файл mp3. В публичной части на этом месте должен появляться html5-плеер. Должна быть возможность выравнивать плеер по центру, справа или слева.
При вставке файла должен появляться диалог для загрузки файла с локального компьютера.
Файлов может быть несколько в одном материале.
В визуальном редакторе это должно отображаться как плеер или картинка-заглушка.
Сейчас это работает так - есть сниппет с кодом плеера:
Код |
---|
<sc ript> $(document).ready(function(){ $("#jquery_jplayer_1").jPlayer({ ready: function () { $(this).jPlayer("setMedia", { mp3:"/upload/iblock/471/471e97efebd892189a05309e31cddbd4.mp3" }); }, swfPath: "/bitrix/templates/main/jplayer/js", supplied: "mp3", cssSelectorAncestor: "#jp_container_1", wmode: "window" }); }); </sc ript> <div id="jquery_jplayer_1" class="jp-jplayer"></div> <div id="jp_container_1" class="jp-audio jp-in"> <div class="jp-type-single"> <div class="jp-gui jp-interface"> <ul class="jp-controls"> <li><a href="jav * ascript:;" class="jp-play" tabindex="1">play</a></li> <li><a href="jav * ascript:;" class="jp-pause" tabindex="1">pause</a></li> <li><a href="jav * ascript:;" class="jp-stop" tabindex="1">stop</a></li> <li><a href="jav * ascript:;" class="jp-mute" tabindex="1" title="mute">mute</a></li> <li><a href="jav * ascript:;" class="jp-unmute" tabindex="1" title="unmute">unmute</a></li> </ul> <div class="jp-progress"> <div class="jp-seek-bar"> <div class="jp-play-bar"></div> </div> </div> <div class="jp-volume-bar"> <div class="jp-volume-bar-value"></div> </div> <div class="jp-time-holder"> <div class="jp-current-time"></div> <div class="jp-duration"></div> </div> </div> </div> </div> |
Путь к файлу меняется вручную.
Чтобы добавить несколько файлов, нужно в четырех местах поменять индекс (jquery_jplayer_1, jp_container_1).
В визуальном редакторе это выглядит так:
Есть какой-нибудь способ упростить все это?