Home / Posts / Web, PHP, HTML / Tinymce. Вставка видео на сайт /


Tinymce. Вставка видео на сайт



 Чтобы вставить видео на сайт, как известно, нужно поместить специальный код вставки видео на страницу html в нужном месте. Но это довольно неудобно, когда требуется опубликовать много роликов, да еще и с периодичностью неделя-месяц. Просто-напросто забываешь этот код. Поэтому я решил задействовать визуальный редактор Tinymce, с помощью которого и пишу статью.

 В общем-то в tinymce уже есть плагин media, который принимает ссылку от файл-менеджера и, в зависимости от типа ролика, выдает конкретный код.

 

 визуальный редактор tinymce  Вставка видео на сайт

 

 В правом окне мы видим тот код, который будет вставлен на нашу страницу.

 Все бы ничего, но вот только стандартный видеоплеер tinymce может, к примеру, не подойти к дизайну сайта, или просто не понравиться. В моем же случае он вообще не открывался, а выдавал ошибку что-то типа "не найден MIME- тип", "не определен MIME тип", нечто в этом духе. Я без понятия, что за чудак придумал все эти MIME типы, неужели просто нельзя воспроизвести видео файл !

 Можно, конечно, и вручную править эту ссылку, но замучаешься...

 Чтобы нужный нам код появлялся в окне сразу, нужно немного отредактировать файл плагина, находится он обычно по ссылке  /js/tinymce/plugins/media/plugin.js, по крайней мере в четвертой версии редактора.

 Первым делом находим там функцию guessMime и прописываем возвращаемые типы для видеофайлов flv, FLV, mov, MOV - именно с ними и придется работать. Меняем всё на 'application/x-shockwave-flash'.

 

function guessMime(url) {
if (url.indexOf('.mp3') != -1) {
return 'audio/mpeg';
}
if (url.indexOf('.MP3') != -1) {
return 'audio/mpeg';
}
if (url.indexOf('.wav') != -1) {
return 'audio/wav';
}
if (url.indexOf('.mp4') != -1) {
/*return 'video/mp4';*/
return 'application/x-shockwave-flash';
}
if (url.indexOf('.MP4') != -1) {
/*return 'video/mp4';*/
return 'application/x-shockwave-flash';
}
if (url.indexOf('.mov') != -1) {
/*return 'video/mp4';*/
return 'application/x-shockwave-flash';
}
if (url.indexOf('.MOV') != -1) {
/*return 'video/mp4';*/
return 'application/x-shockwave-flash';
}
if (url.indexOf('.webm') != -1) {
return 'video/webm';
}
if (url.indexOf('.ogg') != -1) {
return 'video/ogg';
}
if (url.indexOf('.swf') != -1) {
return 'application/x-shockwave-flash';
}
if (url.indexOf('.flv') != -1) {
return 'application/x-shockwave-flash';
}
if (url.indexOf('.FLV') != -1) {
return 'application/x-shockwave-flash';
}
return '';
}

 

 Теперь, в другой части файла нужно просто заменить подставляемый кусок кода видеоплеера на свой - какой нравится. Я, к примеру, выбрал Spruto player - простой, удобный и не глючный. Ищем в скрипте условный переход else if (data.source1mime == "application/x-shockwave-flash") , и меняем стандартный код плеера на свой, не забывая подставлять переменные data.width, data.source и тд.

 

if (data.type == "iframe") {
html += '<iframe src="' + data.source1 + '" width="' + data.width + '" height="' + data.height + '"></iframe>';
} else if (data.source1mime == "application/x-shockwave-flash") {
html += '<object width="' + data.width + '" height="' + data.height + '"><script type="text/javascript" src="../spruto/player.js"></script> <script class="splayer"> var params = {"playlist":[{"video":[{"url":"http://dr-spear.com/' + data.source1 + '"}],"duration":0,"posterUrl":""}],"uiLanguage":"ru","width":' + data.width + ',"height":' + data.height + ',"design":{"skinName":"basic","color":{"scheme":"dark","buttonBg":"","buttonNormal":"#FFFFFF","buttonHover":"#97A841"}}}; player.embed(params); </script></object>';
}

 

 В этом окне уже отредактированная часть кода. Этот плеер также воспроизводит видео с youtube. Можно, кстати, и назначить свой аудиоплеер. Чуть пониже, буквально через несколько строк, находится код аудиоплеера. 


,






Еще статьи по теме


Tinymce. Вставка примеров кода на страницу html
Антиспам для комментариев, или как обойтись без капчи




Свежие статьи


Как сделать аппаратное сцепление
Педали для компьютера своими руками со сцеплением
Коробка передач для ПК своими руками
Светодиодный фонарик своими руками
Лабораторный блок питания на LM317 LM337 с предрегулятором



Главная



Комментарии (0)










Поиск