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

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

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

плюсы

• довольно легко реализовать.
• совсем быстрый ответ сервера на самом деле (это не займет так много, чтобы получить видео).
• абстрагирование (принятое решение, даже если оно работает правильно, будет применимо только в том случае, если вы заранее знаете, какие видео вы собираетесь воспроизводить, это работает для любого введенного пользователя 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>

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

надеюсь, что это помогает! :)

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

встраиваемые ссылки YouTube-это не просто видео, это обычно веб-страницы, которые содержат логику для определения того, что поддерживает ваш пользователь и как они могут воспроизводить видео youtube, используя HTML5 или flash или какой-либо другой плагин на основе того, что доступно на ПК пользователей. Вот почему вы испытываете трудности с использованием тега video с видео 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
    }
});

это невозможно сделать без Javascript. Но замечательный Медиаэлемент.JS библиотека будет прекрасно работать для этой цели:

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

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

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

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

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

действия:

1. откройте видео вашего Youtube link.
2. Правой Кнопкой Мыши на видео. (Иногда удерживайте правую кнопку мыши)
3. нажмите на кнопку "копировать код вставки". (Это будет автоматическое копирование HTML Code)
4. вставить его в свой собственный HTML.

Как насчет того, чтобы сделать это так hooktube не так ли? они фактически не используют URL-адрес видео для элемента html5, но url-адрес Google video redirector, который вызывает это видео. проверить вот как они представляют некоторые 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 С другой стороны, превратился в чрезвычайно монетизировать монстр что возвращает теперь скачать.html на половину запросов на скачивание видео... раздражающий...

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

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