Одним из популярных видео-проектов в интернете на сегодняшний день является сайт youtube.com. В виду популярности проекта ссылки на видео могут быть использованы довольно часто и на других сайтах. К примеру, впролне обуздана возможность вставки видео с ютуба на других сайтах, с использованием iframe.
Рассмотрим пример, как можно автоматизировать этот процесс. Первоначально у нас будет ссылка на какое-либо видео. Мы же будет вставлять это видео на страницу, с использованием этой ссылки.
Суть в том, что нам нужно извлечь значение параметра «v» из ссылки, это и есть идентификатор видео. После этого остается лишь правильно вставить фрейм с ссылкой сформированной с помощью этого параметра.
Приступаем, для наглядности сделаем форму для вставки ссылки на видео:
<form method="post"> <input type="text" name="url" size="100"><br> <input type="submit" name="send" value="Отправить"> </form>
Делаем обработчик формы:
if (isset($_POST['url']) && filter_var($_POST['url'],FILTER_VALIDATE_URL,FILTER_FLAG_PATH_REQUIRED)){ $videoID = getYoutubeVideoID($_POST['url']); } else { $videoID = false; }
Функция getYoutubeVideoID() извлекает идентификатор видео на ютюбе, и помещается в переменную $videoID.
Вставка iframe:
<?if ($videoID != false){?> <iframe width="560" height="315" src="http://www.youtube.com/embed/<?=$videoID?>?autoplay=0" frameborder="0"></iframe> <?}?>
Код функции getYoutubeVideoID():
// получение ID видео из URL function getYoutubeVideoID($url){ // допустимые доменые имена в ссылке $names = array('www.youtube.com','youtube.com'); // разбор адреса $up = parse_url($url); // проверка параметров if (isset($up['host']) && in_array($up['host'],$names) && isset($up['query']) && strpos($up['query'],'v=') !== false){ // достаем параметр ID $lp = explode('v=',$url); // отсекаем лишние параметры $rp = explode('&',$lp[1]); // возвращаем строку, либо false return (!empty ($rp[0]) ? $rp[0] : false); } return false; }
Ну и как полагается в конце: исходник и пример работы.
UPD: Добавляю альтернативный вариант реализации без использования PHP
В данном примере всё реализовано без использования PHP. В этом случае ссылка добавляется в элемент iframe посредством использования кода на JavaScript и библиотеки JQuery.
Не забудьте предварительно подключить библиотеку JQuery перед использованием кода примера.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
Форма для ввода ссылки, а так же сам элемент iframe:
<iframe width="560" height="315" src="" frameborder="0" id="video-frame"></iframe> <form> <input type="text" id="ylink" placeholder="Укажите ссылку на ролик в YouTube"> <input type="button" name="getlink" value="Вставить видео"> </form>
Обработчик события нажатия кнопки на форме:
// реакция на событие клика по кнопке на форме $('input[name="getlink"]').on("click",function(){ // проверяем наличие записи в поле ввода if ($("#ylink").val() != ''){ // получаем строку из поля ввода, разбиваем её на части (от знака =) var url_obj = $("#ylink").val().split('='); // проверяем наличие нужной записи if (typeof url_obj == 'object' && '1' in url_obj){ // формируем ссылку для iframe var link = 'http://www.youtube.com/embed/'+url_obj[1]+'?autoplay=0'; // добавляем ссылку в атрибут src элемента iframe $("#video-frame").attr("src", link); } else { alert('Не удалось получить параметр ссылки'); } } });
Этот код выдаёт ошибку
// реакция на событие клика по кнопке на форме
Здесь ошибка---> $('input[name="getlink"]').on("click",function(){
// проверяем наличие записи в поле ввода
if ($("#ylink").val() != ''){
// получаем строку из поля ввода, разбиваем её на части (от знака =)
var url_obj = $("#ylink").val().split('=');
// проверяем наличие нужной записи
if (typeof url_obj == 'object' && '1' in url_obj){
// формируем ссылку для iframe
var link = 'http://www.youtube.com/embed/'+url_obj[1]+'?autoplay=0';
// добавляем ссылку в атрибут src элемента iframe
$("#video-frame").attr("src", link);
} else {
alert('Не удалось получить параметр ссылки');
}
}
});