YoutubeビデオソースをHTML5ビデオタグに表示しますか？

YouTube動画ソースをHTML5 <video>タグに挿入しようとしていますが、うまくいかないようです。グーグルで調べたところ、HTML5がソースとしてYouTube動画のURLをサポートしていないことがわかりました。

HTML5を使用してYouTube動画を埋め込むことはできますか？そうでない場合、回避策はありますか？

ステップ1：&html5=Trueお気に入りのYouTube URLに追加する

ステップ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文字列がどのくらいの期間動作するかわかりません。

まだ自分でテストしています。

編集（2011年7月28日）：このビデオsrcは、ページソースを取得するために使用するブラウザに固有のものであることに注意してください。YoutubeはこのHTMLを動的に（少なくとも現在のところ）生成するので、Firefoxでコピーした場合、これはFirefoxでは機能しますが、Chromeでは機能しません。

この答えはもう機能しませんが、解決策を探しています。

現在。2015/02/24 にYouTube動画をダウンロードできるWebサイト（youtubeinmp4）があります。.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>

あまり一般的ではありませんが、タグ内の属性youtu.beとして短縮URL をsrc直接使用することで、かなり小さくなります<video>。

それが役に立てば幸い！:)

この<video>タグは、サポートされている形式（ブラウザーによって異なる場合があります）のビデオをロードするためのものです。

YouTubeの埋め込みリンクは動画だけではなく、通常、ユーザーがサポートしているものや、ユーザーのPCで利用可能なものに基づいてHTML5を使用してYouTube動画を再生する方法、またはその他のプラグインを検出するロジックを含むWebページです。これが、YouTube動画でvideoタグを使用するのに苦労している理由です。

YouTubeは、ページにYouTube動画を埋め込むための開発者APIを提供しています。

私はJSFiddleをライブの例として作成しました：http ://jsfiddle.net/zub16fgt/

YouTube APIの詳細については、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
    }
});

最も簡単な答えはW3schoolsによって与えられます。 https://www.w3schools.com/html/html_youtube.asp

1. Youtubeに動画をアップロードする
2. ビデオIDに注意してください
3. 次に、このコードをHTML5に記述します。

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

フックチューブのようにやってみませんか？実際にはhtml5要素のビデオURLを使用しませんが、そのビデオを呼び出すGoogleビデオリダイレクターのURLを使用します。彼らがいくつかの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つのリンクは、両方のリソースでの個人的な経験です。どのようにフックチューブは素晴らしく新鮮で、検閲や地理的制限を回避するのに実際に役立ちます。youtubeinmp4はポップアップモンスターで、現在ConvertInMp4として知られています...

新しいiframeタグがWebサイトに埋め込まれているため、コードは、HTML5をサポートするブラウザーを使用しているかどうかを自動的に検出します。

YouTube動画を埋め込むためのiframeコードは次のとおりです。動画IDをコピーして、以下のコードで置き換えます。

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