1

Стоит простая вроде задача, пользователи копируют ссылку на видео из YOutube, мы сохраняем эту переменную, а вот как вставить? Теги HTML5 не работают.

<video controls width="400" height="300">
  <source src="video.mp4" type="video/mp4"><!-- MP4 для Safari, IE9, iPhone, iPad, Android, и Windows Phone 7 -->
  <source src="video.webm" type="video/webm"><!-- WebM/VP8 для Firefox4, Opera, и Chrome -->
  <source src="video.ogv" type="video/ogg"><!-- Ogg/Vorbis для старых версий браузеров Firefox и Opera -->
  <object data="video.swf" type="application/x-shockwave-flash"><!-- добавляем видеоконтент для устаревших браузеров, в которых нет поддержки элемента video -->
    <param name="movie" value="video.swf">
  </object>
</video>

Не хочется их загружать всякой ерундой типа "Зайдите сюда. кнопку нажмите эту, здесь скопируйте, здесь обрежьте и только потом вставляйте код...", нужно чтобы они смогли брать ссылку из браузера.

2 ответа 2

3

Есть достаточно простое решение.

<object width="425" height="350" data="https://www.youtube.com/v/Ahg6qcgoay4" type="application/x-shockwave-flash"><param name="src" value="https://www.youtube.com/v/Ahg6qcgoay4"/></object>

Вот эта часть у вас будет статичной всегда https://www.youtube.com/v/

А вот так выглядит ссылка целиком: https://www.youtube.com/v/$LINK

Где $LINK - это последняя строка на видео.

Чтобы посмотреть работоспособность тега, скопируйте его и вставьте на сайте https://codepen.io в левое поле с надписью HTML.

Это максимально простой и предсказуемый способ встраивания видео.

Значения object width и height можно задавать в %. Например width="100%" height="auto"

2

Вам нужно вставлять не через тег <video>, а через <embed> или <iframe>

Ссылку от пользователя вида https://www.youtube.com/watch?v=xxxxxxxxx преобразовать в

<iframe width="1241" height="698" src="https://www.youtube.com/embed/xxxxxxxxx" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

преобразовать сумеете?

1
  • Спасибо! Оба варианта ответа работают. Преобразовать получилось.
    – Vovvka
    Commented 28 окт. 2020 в 2:50

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.