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

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?

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.

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

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

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>

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

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>