130

YouTube の動画ソースを HTML5 タグに入れようとしています<video>が、うまくいきません。グーグルで調べた結果、HTML5 は YouTube ビデオの URL をソースとしてサポートしていないことがわかりました。

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

4

8 に答える 8

38

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

の時点で。2015/02/24 . でYouTube 動画をダウンロードできるWeb サイト (youtubeinmp4)があります。これを (JavaScript を使用して) 悪用して、YouTube 動画をタグ.mp4 formatに埋め込むことができます。<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>

あまり一般的ではありませんが、短縮された URLをタグ内youtu.beの属性としてsrc直接使用する非常に小さいものです。<video>

于 2015-02-24T03:50:41.937 に答える
14

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

<video/>ステップ 2:ソース内のタグを見つける

controls="controls"ステップ 3:動画タグに追加:<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 では機能しません。

于 2011-03-17T20:19:51.150 に答える
-4

誰かがこの質問に出くわした場合に備えて、YouTube ビデオを埋め込む適切な方法はembed、次のようにタグを使用することです。 <embed src="https://www.youtube-nocookie.com/embed/DelkRGZCtTs" width="100%" height="333">

于 2021-04-08T21:43:34.287 に答える
-10

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

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

<iframe type="text/html" 
    width="640" 
    height="385" 
    src="http://www.youtube.com/embed/VIDEO_ID"
    frameborder="0">
</iframe>
于 2011-03-17T20:56:51.197 に答える