Tampilkan sumber video Youtube ke dalam tag video HTML5?

Saya mencoba memasukkan sumber video YouTube ke dalam <video>tag HTML5 , tetapi tampaknya tidak berhasil. Setelah beberapa Googling, saya menemukan bahwa HTML5 tidak mendukung URL video YouTube sebagai sumber.

Bisakah Anda menggunakan HTML5 untuk menyematkan video YouTube? Jika tidak, apakah ada solusi lain?

Langkah 1: tambahkan &html5=Trueke url youtube favorit Anda

Langkah 2: Temukan <video/>tag di sumber

Langkah 3: Tambahkan controls="controls"ke tag video:<video controls="controls"..../>

Contoh:

<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>

Perhatikan sepertinya ada beberapa expirehal. Saya tidak tahu berapa lama srctali itu akan bekerja.

Masih menguji diriku sendiri.

Edit (28 Juli 2011) : Perhatikan bahwa src video ini khusus untuk browser yang Anda gunakan untuk mengambil sumber halaman. Saya pikir Youtube menghasilkan HTML ini secara dinamis (setidaknya saat ini) jadi dalam pengujian jika saya menyalin di Firefox ini berfungsi di Firefox, tetapi tidak di Chrome, misalnya.

Jawaban ini tidak berfungsi lagi, tetapi saya sedang mencari solusi.

Sejak . 2015/02/24. terdapat sebuah situs web (youtubeinmp4) yang memungkinkan Anda untuk mengunduh video youtube .mp4 format, Anda dapat memanfaatkan ini (dengan beberapa JavaScript) untuk lolos dengan menyematkan video youtube dalam <video>tag. Berikut adalah demo dari tindakan ini.

Pro

• Cukup mudah diterapkan .
• Respons server yang cukup cepat sebenarnya (tidak perlu terlalu banyak untuk mengambil video).
• Abstraksi (solusi yang diterima, meskipun berfungsi dengan baik, hanya akan berlaku jika Anda tahu sebelumnya video mana yang akan Anda putar, ini berfungsi untuk setiap url yang dimasukkan pengguna).

Kontra

• Ini jelas tergantung pada youtubeinmp4.comserver dan cara mereka menyediakan tautan unduhan (yang dapat diberikan sebagai <video>sumber), jadi jawaban ini mungkin tidak valid di masa mendatang.

• Anda tidak dapat memilih kualitas video.

JavaScript (setelah 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;
        }
    }
}

Penggunaan (Penuh)

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

Format video standar.

Penggunaan (Mini)

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

Sedikit kurang umum tetapi lebih kecil, menggunakan url yang dipersingkat youtu.besebagai srcatribut langsung di <video>tag.

Semoga membantu! :)

The <video>tag dimaksudkan untuk beban dalam sebuah video dari format yang didukung (yang mungkin berbeda oleh browser).

Tautan penyematan YouTube bukan hanya video, namun biasanya merupakan laman web yang berisi logika untuk mendeteksi apa yang didukung pengguna Anda dan bagaimana mereka dapat memutar video youtube, menggunakan HTML5, atau flash, atau beberapa plugin lain berdasarkan apa yang tersedia di PC pengguna. Inilah sebabnya mengapa Anda mengalami kesulitan menggunakan tag video dengan video youtube.

YouTube memang menawarkan API pengembang untuk menyematkan video youtube ke halaman Anda.

Saya membuat JSFiddle sebagai contoh langsung: http://jsfiddle.net/zub16fgt/

Dan Anda dapat membaca lebih lanjut tentang API YouTube di sini: https://developers.google.com/youtube/iframe_api_reference#Getting_Started

Kode juga dapat ditemukan di bawah

Di HTML Anda:

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

Di Javascript Anda:

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
    }
});

Jawaban termudah diberikan oleh W3schools. https://www.w3schools.com/html/html_youtube.asp

1. Unggah video Anda ke Youtube
2. Catat ID Video
3. Sekarang tulis kode ini di HTML5 Anda.

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

bagaimana kalau melakukannya dengan cara hooktube melakukannya? mereka tidak benar-benar menggunakan URL video untuk elemen html5, tetapi url pengalihan video google yang memanggil video itu. lihat di sini bagaimana mereka menyajikan beberapa video acak 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>

kode untuk halaman video berikut https://hooktube.com/watch?v=72UO0v5ESUo

youtube ke mp3 di sisi lain telah berubah menjadi monster yang sangat menghasilkan uang yang sekarang kembali download.html pada setengah dari permintaan download video ... mengganggu ...

2 tautan dalam jawaban ini adalah pengalaman pribadi saya dengan kedua sumber tersebut. bagaimana hooktube bagus dan segar dan benar-benar membantu menghindari sensor dan pembatasan geografis .. lihatlah, itu cukup keren. dan youtubeinmp4 adalah monster popup yang sekarang dikenal sebagai ConvertInMp4 ...

Dengan tag iframe baru yang disematkan di situs Anda, kode akan secara otomatis mendeteksi apakah Anda menggunakan browser yang mendukung HTML5 atau tidak.

Kode iframe untuk penyematan video YouTube adalah sebagai berikut, cukup salin ID Video dan ganti kode di bawah ini:

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