Tampilkan sumber video Youtube ke dalam tag video HTML5?


116

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?


1
Solusi IFrame seperti yang diberikan di bawah ini oleh stackoverflow.com/questions/5157377/… sudah cukup sebagai solusi.
S Meaden

Jawaban:


15

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.


77
Kedaluwarsa dan fakta bahwa itu hanya berfungsi di browser tertentu membuat solusi ini sangat tidak berguna.
pjv

1
Apakah itu mampu memutar SEMUA video youtube?
Raj Pawan Gumdal

2
YouTube secara teoritis dapat mengubah URL penyimpanan yang mendasari untuk semua video mereka jika mereka mau kapan saja. URL yang diberikan pada srcatribut di atas mungkin tidak dijamin berfungsi untuk jangka panjang.
Chris Peters

1
Ya, informasi yang berguna tetapi kedengarannya seperti ide yang buruk. YouTube dapat memutuskan untuk menutup akses ke tautan video langsung kapan saja.
Oliver Moran

36

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! :)


Fungsinya bagus dan berfungsi pada Mozilla dan Chrome tetapi bagaimana mengatur lebar dan tinggi video jika <video> memiliki lebar 100% dan tinggi 200px.
Anmol Ratan Mohla

Saya telah menerapkan solusi ini, tetapi 2 hari kemudian, YT memblokirnya. Ini tidak berfungsi lagi. :(
apires

sayangnya ini tidak berfungsi lagi. Dulu bekerja dengan baik. Saya harap ada solusi lain untuk itu!
Chamily

19

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

Saya baru-baru ini mendapat masalah ini: Layar penuh tidak lagi didukung di iPad! Contoh jsfiddle Anda sempurna untuk diilustrasikan: Di pc berfungsi, di iPad tidak. ..Saya kira saya harus mengajukan pertanyaan baru tentang ini, tetapi seseorang di sini mungkin dapat berkomentar?
Snorvarg

1
@Snorvarg Jawaban saya seharusnya berfungsi di semua browser yang mendukung HTML5, yang selama Anda menjalankan versi iOS (10+) yang agak baru di iPad Anda, itu akan berfungsi. Jika Anda tidak perlu mengontrol video secara terprogram, Anda dapat mencoba menggunakan API sematan iframe sederhana. Anda dapat menemukan contohnya di sini developers.google.com/youtube/iframe_api_reference#Examples , atau lihat jawaban vinayvasyani. Jika Anda masih mengalami masalah, saya akan mengajukan pertanyaan baru menggunakan pedoman "Cara Mengajukan Pertanyaan yang Baik" yang terdapat di stackoverflow.com/help/how-to-ask .
Norman Breau

@Snorvarg Saya menemukan productforums.google.com/forum/#!topic/youtube/q7cAnPlN_-Y ini , masalah serupa yang terjadi di Firefox dan telah diselesaikan karena mereka perlu meminta izin layar penuh. Jadi saya berani bertaruh itulah sebabnya layar penuh tidak berfungsi di iPad Anda, yang sayangnya iOS Safari tampaknya tidak mendukung. Solusi alternatifnya adalah dengan menambahkan tombol layar penuh Anda sendiri dan cukup ubah ukuran pemutar iframe ke lebar / tinggi layar Anda.
Norman Breau

1
Terima kasih atas tip dan tautan Anda. Saya menambahkan pertanyaan beberapa hari yang lalu, di sini: stackoverflow.com/questions/49650040/… Tapi setelah beberapa saat, saya memutuskan untuk membuat tombol layar penuh sendiri seperti yang Anda usulkan, dan berfungsi dengan baik.
Snorvarg

Bagus sekali, namun saya menemukan kesalahan "TypeError: YT.Player bukan konstruktor", seperti yang dijelaskan di sini: stackoverflow.com/questions/52062169/… . Seperti yang ditunjukkan oleh (satu-satunya) jawaban, ini hasil dari pemuatan skrip asinkron dan API belum siap saat dipanggil. Ini dapat dihindari dengan mengimplementasikan onYouTubeIframeAPIReadyfungsi (dan meletakkan blok kode terakhir dari kode di atas di dalamnya).
jakob.j


-3

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


-6

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>

23
iframeTag "baru" ? iframetelah ada selama berabad-abad…
Zearin

11
Ini bukan solusi untuk jawabannya, ini dengan jelas menyatakan tag video dan bukan iframe ...
TGarrett

7
Mungkin OP hanya tidak mengetahui keberadaan iframetag tersebut dan karena itulah dia langsung menanyakan tentang videotag tersebut. Jika tidak, dia tidak akan bertanya apakah HTML5 (secara umum) mendukung video Youtube, tetapi dia akan membatasi pertanyaan tersebut pada videotag. Dia bahkan bertanya "apakah ada solusi untuk itu?" dalam kalimat terakhirnya, jadi jawaban ini benar-benar valid.
Daniel Muñoz Parsapoormoghadam

1
Untuk menyematkan video youtube.com di blog blogger.com saya, iframe adalah satu-satunya solusi yang nyaman. Selain itu, kode sematan yang dihasilkan youtube.com adalah tag iframe. Selain itu, w3schools.com merekomendasikan iframe: http://www.w3schools.com/html/html_youtube.asp . Dimana tag video tidak disebutkan.
noobninja

1
Untuk berjaga-jaga jika ada yang penasaran ... Masalahnya adalah menggunakan tag video bukanlah pendekatan yang tepat untuk video YouTube karena URL publik untuk menyematkan video YouTube bukanlah sumber media yang sebenarnya. Itulah kenapa ada orang yang menyarankan menggunakan iframe. Mencoba menggunakan tag video berarti Anda akan menggunakan URL pribadi yang mungkin berubah di masa mendatang. Ini seperti mencoba mengakses anggota pribadi dalam bahasa berorientasi objek. Anda dapat melihat dokumentasi resmi YouTube di sini developers.google.com/youtube/iframe_api_reference#Examples
Norman Breau
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.