Показать источник видео с YouTube в теге HTML5?

Question

Показать источник видео с YouTube в теге HTML5?

Я пытаюсь вставить источник видео YouTube в HTML5 <video> тег, но это не похоже на работу. После некоторого поиска в Google я обнаружил, что HTML5 не поддерживает URL видео YouTube в качестве источника.

Можете ли вы использовать HTML5 для встраивания видео на YouTube? Если нет, есть ли обходной путь?

141

html html5 youtube embedded-video

Источник

user377739 01 мар '11 в 16:34

11 ответов

Решение

Этот ответ больше не работает, но я ищу решение.

По состоянию на . 2015/02/24. есть веб-сайт (youtubeinmp4), который позволяет загружать видео с YouTube в .mp4 format, вы можете использовать это (с некоторым JavaScript), чтобы избежать встраивания видео YouTube в <video> теги. Вот демонстрация этого в действии.

Pros

Довольно легко реализовать.
На самом деле довольно быстрый ответ сервера (для извлечения видео не требуется много времени).
Абстракция (принятое решение, даже если оно работает должным образом, будет применимо, только если вы заранее знали, какие видео вы собираетесь воспроизводить, это работает для любого введенного пользователем URL).

Cons

Это, очевидно, зависит от youtubeinmp4.com серверы и их способ предоставления ссылки для скачивания (которая может быть передана как <video> источник), поэтому этот ответ может быть недействительным в будущем.
Вы не можете выбрать качество видео.

JavaScript (после `load`)

videos = document.querySelectorAll("video");
for (var i = 0, l = videos.length; i < l; i++) {
    var video = videos[i];
    var src = video.src || (function () {
        var sources = video.querySelectorAll("source");
        for (var j = 0, sl = sources.length; j < sl; j++) {
            var source = sources[j];
            var type = source.type;
            var isMp4 = type.indexOf("mp4") != -1;
            if (isMp4) return source.src;
        }
        return null;
    })();
    if (src) {
        var isYoutube = src && src.match(/(?:youtu|youtube)(?:\.com|\.be)\/([\w\W]+)/i);
        if (isYoutube) {
            var id = isYoutube[1].match(/watch\?v=|[\w\W]+/gi);
            id = (id.length > 1) ? id.splice(1) : id;
            id = id.toString();
            var mp4url = "http://www.youtubeinmp4.com/redirect.php?video=";
            video.src = mp4url + id;
        }
    }
}

Использование (полное)

<video controls="true">
    <source src="www.youtube.com/watch?v=3bGNuRtlqAQ" type="video/mp4" />
</video>

Стандартный формат видео.

Использование (Мини)

<video src="youtu.be/MLeIBFYY6UY" controls="true"></video>

Чуть менее распространенный, но довольно маленький, используя youtube.be сокращенный URL и src атрибут непосредственно в <video> тег.

Надеюсь, поможет!:)

39

Источник

user3750762 24 фев '15 в 03:50

Я создал действительно небольшую (4,89 КБ) библиотеку javascript именно для этой функции.

Найдено на моем GitHub здесь: https://github.com/thelevicole/youtube-to-html5-loader/

Это очень просто:

<video data-yt2html5="https://www.youtube.com/watch?v=ScMzIvxBSi4"></video>

<script src="https://cdn.jsdelivr.net/gh/thelevicole/youtube-to-html5-loader@2.0.0/dist/YouTubeToHtml5.js"></script>
<script>new YouTubeToHtml5();</script>

Рабочий пример здесь: https://jsfiddle.net/thelevicole/5g6dbpx3/1/

Библиотека извлекает идентификатор видео из атрибута данных и отправляет запрос в https://www.youtube.com/get_video_info?video_id=. Он декодирует ответ, который включает информацию о потоковой передаче, которую мы можем использовать для добавления источника в <video> тег.

28

Источник

user3804924 18 ноя '20 в 16:49

<video> Тег предназначен для загрузки в видео поддерживаемого формата (который может отличаться в зависимости от браузера).

Ссылки YouTube для встраивания - это не просто видео, это, как правило, веб-страницы, которые содержат логику для определения того, что поддерживает ваш пользователь и как они могут воспроизводить видео на YouTube, используя HTML5 или flash, или какой-либо другой плагин на основе того, что доступно на ПК пользователя. Вот почему вам трудно использовать тег видео с видео на YouTube.

YouTube предлагает API для разработчиков, чтобы встроить видео YouTube на свою страницу.

Я сделал JSFiddle как живой пример: http://jsfiddle.net/zub16fgt/

Подробнее об API YouTube можно прочитать здесь: https://developers.google.com/youtube/iframe_api_reference.

Кодекс также можно найти ниже

В вашем HTML:

<div id="player"></div>

В вашем Javascript:

var onPlayerReady = function(event) {
    event.target.playVideo();  
};

// The first argument of YT.Player is an HTML element ID. 
// YouTube API will replace my <div id="player"> tag 
// with an iframe containing the youtube video.

var player = new YT.Player('player', {
    height: 320,
    width: 400,
    videoId : '6Dc1C77nra4',
    events : {
        'onReady' : onPlayerReady
    }
});

28

Источник

user4685664 22 мар '15 в 01:32

С новым тегом iframe, встроенным в ваш сайт, код автоматически определит, используете ли вы браузер с поддержкой HTML5 или нет.

Ниже приведен код iframe для встраивания видео YouTube. Просто скопируйте идентификатор видео и замените его в приведенном ниже коде:

<iframe type="text/html" 
    width="640" 
    height="385" 
    src="http://www.youtube.com/embed/VIDEO_ID"
    frameborder="0">
</iframe>

2

Источник

user312965 17 мар '11 в 20:56

Самый простой ответ дает W3schools.https://www.w3schools.com/html/html_youtube.asp

Загрузите свое видео на Youtube
Обратите внимание на идентификатор видео
Теперь напишите этот код в своем HTML5.

<iframe width="640" height="520"
src="https://www.youtube.com/embed/<VideoID>">
</iframe>

1

Источник

user3921922 12 авг '20 в 14:43

Нет никакого способа сделать это без Javascript. Но замечательная библиотека MediaElement.js прекрасно подойдет для этой цели:

http://mediaelementjs.com/examples/?name=youtube

В приведенном выше примере показано использование видео YouTube с <video> тег, но также имеет запасной вариант для Flash для браузеров, которые его не поддерживают.

1

Источник

user133160 21 ноя '13 в 15:08

Шаги, чтобы следовать:

Откройте видео своего Youtube link,
Щелкните правой кнопкой мыши на видео. (Иногда держите правый клик)
Нажмите "Скопировать код для вставки". (Это будет автоматически копировать HTML Code)
Вставьте его в себя HTML,

0

Источник

user6733426 11 июл '18 в 06:51

Как насчет того, как это делает hooktube? на самом деле они не используют URL-адрес видео для элемента html5, а URL-адрес перенаправителя видео Google, который вызывает это видео. Посмотрите, как они представляют какое-то безнадежное случайное видео...

<video id="player-obj" controls="" src="https://redirector.googlevideo.com/videoplayback?ratebypass=yes&amp;mt=1510077993----SKIPPED----amp;utmg=ytap1,,hd720"><source>Your browser does not support HTML5 video.</video>

код для следующей видео страницы https://hooktube.com/watch?v=72UO0v5ESUo

С другой стороны, youtube to mp3 превратился в чрезвычайно монетизированного монстра, который теперь возвращает download.html на половину запросов на скачивание видео... раздражает...

2 ссылки в этом ответе относятся к моему личному опыту работы с обоими ресурсами. как hooktube хорош и свеж и на самом деле помогает избежать цензуры и географических ограничений... посмотрите, это круто. и youtubeinmp4 - это всплывающий монстр, теперь известный как ConvertInMp4...

-1

Источник

user1032498 07 ноя '17 в 18:18

Если кто-то наткнется на этот вопрос, отличный способ встроить видео YouTube - использовать embed тег, вот так: <embed src="https://www.youtube-nocookie.com/embed/DelkRGZCtTs" width="100%" height="333">

-3

Источник

user3157631 09 апр '21 в 00:43

<iframe allowfullscreen="true"
         allowscriptaccess="always"
         frameborder="0"
         height="100%"
         width="100%"
         scrolling="no"
         src="//www.youtube.com/embed/VIDEO_ID">
</iframe>

-6

Источник

user4326482 27 окт '15 в 09:47

Другие вопросы по тегам html html5 youtube embedded-video

user665045 17 мар '11 в 20:19 2011-03-17 20:19 · Accepted Answer · 2011-03-17 20:19

Шаг 1: добавить &html5=True на ваш любимый URL YouTube

Шаг 2: Найти <video/> тег в источнике

Шаг 3: Добавить controls="controls" на видео тег: <video controls="controls"..../>

Пример:

<video controls="controls" 
       class="video-stream" 
       x-webkit-airplay="allow" 
       data-youtube-id="N9oxmRT2YWw" 
       src="http://v20.lscache8.c.youtube.com/videoplayback?sparams=id%2Cexpire%2Cip%2Cipbits%2Citag%2Cratebypass%2Coc%3AU0hPRVRMVV9FSkNOOV9MRllD&amp;itag=43&amp;ipbits=0&amp;signature=D2BCBE2F115E68C5FF97673F1D797F3C3E3BFB99.59252109C7D2B995A8D51A461FF9A6264879948E&amp;sver=3&amp;ratebypass=yes&amp;expire=1300417200&amp;key=yt1&amp;ip=0.0.0.0&amp;id=37da319914f6616c"></video>

Обратите внимание, что некоторые expire вещи. Я не знаю как долго src Строка будет работать.

Все еще проверяю себя.

Изменить (28 июля 2011 г.). Обратите внимание, что этот видеоролик относится только к браузеру, который вы используете для получения источника страницы. Я думаю, что Youtube генерирует этот HTML динамически (по крайней мере, в настоящее время), поэтому при тестировании, если я копирую в Firefox, это работает в Firefox, но не в Chrome, например.

Показать источник видео с YouTube в теге HTML5?

11 ответов

Этот ответ больше не работает, но я ищу решение.

Pros

Cons

JavaScript (после load)

Использование (полное)

Использование (Мини)

JavaScript (после `load`)