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

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

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

Ответы

Ответ 1

Шаг 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 г.). Обратите внимание, что это видео src специфично для браузера, который вы используете для извлечения источника страницы. Я думаю, что Youtube генерирует этот HTML динамически (по крайней мере в настоящее время), поэтому при тестировании, если я копирую в Firefox, это работает, например, в Firefox, но не в Chrome.

Ответ 2

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

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

Pros

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

Против

  • Очевидно, что это зависит от серверов 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>

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

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

Ответ 3

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

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

YouTube предлагает API разработчика для встраивания видео на YouTube.

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

Подробнее о API YouTube вы можете узнать здесь: https://developers.google.com/youtube/iframe_api_reference#Getting_Started

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

В вашем 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
    }
});

Ответ 4

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

Код iframe для встраивания видео YouTube выглядит следующим образом: просто скопируйте идентификатор видео и замените его в следующем коде:

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

Ответ 5

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

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

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

Ответ 6

Шаги:

  1. Откройте видео- link Youtube.
  2. Щелкните правой кнопкой мыши по видео. (Иногда держите правый клик)
  3. Нажмите "Копировать код вставки". (Он будет автоматически копировать HTML Code)
  4. Вставьте его в свой HTML.

Ответ 7

Попробуйте это, он будет работать

<object width="640" height="390">
  <param name="movie"
         value="https://www.youtube.com/v/atI4JKFQYoU"></param>
  <param name="allowScriptAccess" value="always"></param>
  <embed src="https://www.youtube.com/v/atI4JKFQYoU"
         type="application/x-shockwave-flash"
         allowscriptaccess="always"
         width="422" height="258"></embed>
</object>

Ответ 8

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

<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 в mp3, с другой стороны, превратился в чрезвычайно монетизированного монстра, который теперь возвращает download.html на половину запросов на скачивание видео... раздражает...

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

Ответ 9

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