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
Антиспам для комментариев, или как обойтись без капчи




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


Часы на газоразрядных индикаторах ИН-8
Инфракрасный барьер своими руками
Светодиодное освещение - продолжение эволюции
Часы на газоразрядных индикаторах ИН-12 (Nixie Clock)
Светодиодное освещение своими руками



Главная



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











Мужской Проект

Подписка


Поиск