Pokazać źródło wideo YouTube w tagu wideo HTML5?

116

Próbuję umieścić źródło wideo YouTube w <video>tagu HTML5 , ale wygląda na to, że nie działa. Po pewnym googlowaniu odkryłem, że HTML5 nie obsługuje adresów URL filmów z YouTube jako źródła.

Czy możesz używać HTML5 do osadzania filmów z YouTube? Jeśli nie, czy jest jakieś obejście?

sri
źródło
1
Rozwiązanie IFrame podane poniżej przez stackoverflow.com/questions/5157377/… powinno wystarczyć jako obejście.
S Meaden

Odpowiedzi:

15

Krok 1: dodaj &html5=Truedo swojego ulubionego adresu URL YouTube

Krok 2: Znajdź <video/>tag w źródle

Krok 3: Dodaj controls="controls"do tagu wideo:<video controls="controls"..../>

Przykład:

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

Zauważ, że wydaje się, że jest expirecoś. Nie wiem, jak długo srcbędzie działać sznurek.

Wciąż testuję siebie.

Edytuj (28 lipca 2011 r.) : Zwróć uwagę, że to źródło wideo jest specyficzne dla przeglądarki używanej do pobierania źródła strony. Myślę, że Youtube generuje ten HTML dynamicznie (przynajmniej obecnie), więc podczas testowania, jeśli skopiuję w Firefoksie, działa to w Firefoksie, ale nie na przykład w Chrome.

Simon Flack
źródło
77
Wygaśnięcie i fakt, że działa tylko w określonej przeglądarce sprawia, że ​​to rozwiązanie jest dość bezużyteczne.
pjv
1
Czy jest w stanie odtwarzać WSZYSTKIE filmy z YouTube'a?
Raj Pawan Gumdal
2
YouTube mógłby teoretycznie zmienić podstawowe adresy URL przechowywania dla wszystkich swoich filmów, gdyby chcieli w dowolnym momencie. srcPrawdopodobnie nie ma gwarancji, że adres URL podany w powyższym atrybucie będzie działał przez długi czas.
Chris Peters,
1
Tak, przydatne informacje, ale brzmi to jak zły pomysł. YouTube może w dowolnym momencie zdecydować o zamknięciu dostępu do bezpośredniego łącza wideo.
Oliver Moran,
36

Ta odpowiedź już nie działa, ale szukam rozwiązania.

Stan na dzień . 2015/02/24. istnieje strona internetowa (youtubeinmp4), która umożliwia pobieranie filmów z YouTube .mp4 format, możesz to wykorzystać (z niektórymi JavaScriptami), aby uniknąć osadzania filmów z YouTube w <video>tagach. Oto demo tego w akcji.

Plusy

  • Dość łatwe do wdrożenia .
  • Właściwie dość szybka odpowiedź serwera (pobranie filmów nie zajmuje dużo czasu).
  • Abstrakcja (przyjęte rozwiązanie, nawet gdyby działało poprawnie, miałoby zastosowanie tylko wtedy, gdybyś wiedział wcześniej, które filmy zamierzasz odtwarzać, działa to dla każdego adresu URL wprowadzonego przez użytkownika).

Cons

  • Zależy to oczywiście od youtubeinmp4.comserwerów i ich sposobu dostarczania linku do pobierania (który można podać jako <video>źródło), więc ta odpowiedź może nie być aktualna w przyszłości.

  • Nie możesz wybrać jakości wideo.


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

Wykorzystanie (pełne)

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

Standardowy format wideo.

Użycie (mini)

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

Nieco mniej powszechne, ale znacznie mniejsze, przy użyciu skróconego adresu URL youtu.bejako srcatrybutu bezpośrednio w <video>tagu.

Mam nadzieję, że to pomoże! :)

nieokreślony
źródło
Niezła funkcja i działa na Mozilli i Chrome, ale jak ustawić szerokość i wysokość wideo, jeśli <video> ma 100% szerokości i 200px wysokości.
Anmol Ratan Mohla
Wdrożyłem to rozwiązanie, ale 2 dni później YT je zablokowało. To już nie działa. :(
apires
to już niestety nie działa. Kiedyś działało świetnie. Mam nadzieję, że jest na to inne rozwiązanie!
Chamilyan
19

<video>Tag ma obciążenia w wideo obsługiwanego formatu (który może różnić się o przeglądarce).

Linki do umieszczania w YouTube to nie tylko filmy, są to zazwyczaj strony internetowe zawierające logikę umożliwiającą wykrycie, co obsługuje użytkownik i jak mogą odtwarzać wideo z YouTube, używając HTML5 lub Flash, lub innej wtyczki w oparciu o to, co jest dostępne na komputerze użytkownika. Dlatego masz trudności z używaniem tagu wideo z filmami z YouTube.

YouTube oferuje programistyczny interfejs API do osadzania wideo z YouTube na swojej stronie.

Zrobiłem JSFiddle jako przykład na żywo: http://jsfiddle.net/zub16fgt/

Więcej o interfejsie YouTube API możesz przeczytać tutaj: https://developers.google.com/youtube/iframe_api_reference#Getting_Started

Kod można również znaleźć poniżej

W swoim HTML:

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

W Twoim 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
    }
});
Norman Breau
źródło
Niedawno napotkałem ten problem: pełny ekran nie jest już obsługiwany na iPadzie! Twój przykład z jsfiddle doskonale ilustruje: na PC to działa, na iPadzie nie. .. chyba powinienem zadać nowe pytanie w tej sprawie, ale może ktoś tutaj może skomentować?
Snorvarg
1
@Snorvarg Moja odpowiedź powinna działać na każdej przeglądarce zgodnej z HTML5, która powinna działać, o ile używasz raczej najnowszej wersji iOS (10+) na iPadzie. Jeśli nie potrzebujesz programowego sterowania wideo, możesz spróbować użyć prostego interfejsu API osadzania elementów iframe. Przykład możesz znaleźć tutaj developers.google.com/youtube/iframe_api_reference#Examples lub wyświetlić odpowiedź vinayvasyani. Jeśli nadal masz problem, zadałbym nowe pytanie, korzystając ze wskazówek „Jak zadać dobre pytanie” na stackoverflow.com/help/how-to-ask .
Norman Breau,
@Snorvarg Natknąłem się na ten produktforums.google.com/forum/#!topic/youtube/q7cAnPlN_-Y , podobny problem występujący w Firefoksie i został rozwiązany, ponieważ musieli zażądać uprawnień do pełnego ekranu. Jestem więc gotów się założyć, że dlatego pełny ekran nie działa na Twoim iPadzie, którego niestety iOS Safari nie obsługuje. Alternatywnym rozwiązaniem jest dodanie własnego przycisku pełnego ekranu i zmiana rozmiaru odtwarzacza iframe na szerokość / wysokość ekranu.
Norman Breau,
1
Dzięki za wskazówki i linki. Dodałem pytanie kilka dni temu, tutaj: stackoverflow.com/questions/49650040/ ... Ale po jakimś czasie zdecydowałem się utworzyć własny przycisk pełnoekranowy, tak jak proponowałeś i działa dobrze.
Snorvarg
Świetnie, jednak napotkałem błąd „TypeError: YT.Player nie jest konstruktorem”, jak opisano tutaj: stackoverflow.com/questions/52062169/… . Jak wskazuje (jedyna) odpowiedź, wynika to z asynchronicznego ładowania skryptu, a interfejs API nie jest jeszcze gotowy do wywołania. Można tego uniknąć poprzez zaimplementowanie onYouTubeIframeAPIReadyfunkcji (i umieszczenie w niej ostatniego bloku powyższego kodu).
jakob.j
1

Najłatwiejszej odpowiedzi udzielają W3schools. https://www.w3schools.com/html/html_youtube.asp

  1. Prześlij swój film na YouTube
  2. Zwróć uwagę na identyfikator wideo
  3. Teraz napisz ten kod w swoim HTML5.
<iframe width="640" height="520"
src="https://www.youtube.com/embed/<VideoID>">
</iframe>
Sagnik Majumder
źródło
-3

co powiesz na zrobienie tego tak, jak robi to hooktube ? w rzeczywistości nie używają adresu URL wideo dla elementu html5, ale URL przekierowania wideo Google, który wywołuje ten plik wideo. zobacz, jak przedstawiają jakieś despacito losowe wideo ...

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

kod dotyczy następującej strony wideo https://hooktube.com/watch?v=72UO0v5ESUo

z drugiej strony youtube na mp3 zmienił się w niezwykle zarabiającego potwora, który zwraca teraz download.html na połowę żądań pobrania wideo ... irytujące ...

2 linki w tej odpowiedzi dotyczą moich osobistych doświadczeń z obydwoma zasobami. jak hooktube jest fajny i świeży i faktycznie pomaga uniknąć cenzury i ograniczeń geograficznych ... sprawdź to, jest całkiem fajny. a youtubeinmp4 to potwór wyskakujący, znany teraz jako ConvertInMp4 ...

Sergey Kireyev
źródło
-6

Po umieszczeniu nowego tagu iframe w witrynie kod automatycznie wykryje, czy używasz przeglądarki obsługującej HTML5, czy nie.

Kod iframe do umieszczania filmów z YouTube jest następujący - po prostu skopiuj identyfikator wideo i zamień w poniższym kodzie:

<iframe type="text/html" 
    width="640" 
    height="385" 
    src="http://www.youtube.com/embed/VIDEO_ID"
    frameborder="0">
</iframe>
vinayvasyani
źródło
23
iframeZnacznik „Nowy” ? iframeistnieje od wieków…
Zearin,
11
To nie jest rozwiązanie odpowiedzi, jasno określa tag wideo, a nie iframe ...
TGarrett
7
Może OP po prostu nie wiedział o istnieniu iframetagu i dlatego bezpośrednio zapytał o videotag. W przeciwnym razie nie zapytałby, czy HTML5 (generalnie) obsługuje filmy z YouTube, ale ograniczyłby pytanie do videotagu. Zapytał nawet „czy jest jakieś obejście tego problemu?” w swoim ostatnim zdaniu, więc ta odpowiedź jest całkowicie poprawna.
Daniel Muñoz Parsapoormoghadam
1
Jeśli chcesz osadzić filmy z youtube.com na moim blogu blogger.com, iframe to jedyne wygodne rozwiązanie. Ponadto kod do umieszczenia na stronie generowany przez youtube.com to tag iframe. Ponadto w3schools.com poleca iframe: http://www.w3schools.com/html/html_youtube.asp . Gdzie nie wspomniano o tagu wideo.
noobninja
1
Na wszelki wypadek, jeśli ktoś jest ciekawy ... Problem polega na tym, że użycie tagu wideo nie jest właściwym podejściem do filmów z YouTube, ponieważ publiczne adresy URL do umieszczania filmów z YouTube nie są rzeczywistymi zasobami medialnymi. Dlatego niektórzy sugerują używanie ramek iframe. Próba użycia tagu wideo będzie oznaczać, że będziesz używać prywatnych adresów URL, które mogą ulec zmianie w przyszłości. To tak, jakby próbować uzyskać dostęp do prywatnego członka w języku zorientowanym obiektowo. Możesz wyświetlić oficjalną dokumentację YouTube tutaj developers.google.com/youtube/iframe_api_reference#Examples
Norman Breau