YouTube 동영상 소스를 HTML5 동영상 태그에 표시 하시겠습니까?

YouTube 동영상 소스를 HTML5 <video>태그 에 넣으려고 하는데 작동하지 않는 것 같습니다. 인터넷 검색을 한 후 HTML5가 YouTube 동영상 URL을 소스로 지원하지 않는다는 것을 알게되었습니다.

HTML5를 사용하여 YouTube 동영상을 삽입 할 수 있습니까? 그렇지 않은 경우 해결 방법이 있습니까?

1 단계 : &html5=True좋아하는 YouTube URL에 추가

2 단계 : <video/>소스에서 태그 찾기

3 단계 : controls="controls"동영상 태그에 추가 :<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 일) : 이 동영상 소스는 페이지 소스를 검색하는 데 사용하는 브라우저에 따라 다릅니다. Youtube는 동적으로 (적어도 현재) HTML을 생성한다고 생각하므로 Firefox에서 복사하면 테스트에서 Firefox에서는 작동하지만 Chrome에서는 작동하지 않습니다.

이 답변은 더 이상 작동하지 않지만 해결책을 찾고 있습니다.

현재 . 2015/02/24. 에서 youtube 비디오를 다운로드 할 수 있는 웹 사이트 (youtubeinmp4) 가 .mp4 format있습니다.이를 악용 (일부 JavaScript 사용)하여 <video>태그에 youtube 비디오를 삽입 할 수 있습니다 . 여기 에 실제 데모 가 있습니다.

장점

• 구현하기 매우 쉽습니다 .
• 실제로 서버 응답이 상당히 빠릅니다 (비디오를 검색하는 데 그렇게 많이 걸리지 않습니다).
• 추상화 (올바르게 작동하더라도 허용되는 솔루션은 재생할 비디오를 미리 알고있는 경우에만 적용 할 수 있으며 사용자 입력 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>

도움이 되었기를 바랍니다. :)

<video>태그 (브라우저가 다를 수 있음)이 지원되는 형식의 영상에서 하중을 의미한다.

YouTube 삽입 링크는 단순한 동영상이 아니라 일반적으로 사용자가 지원하는 항목과 HTML5 또는 플래시를 사용하여 YouTube 동영상을 재생하는 방법을 감지하는 로직이 포함 된 웹 페이지 또는 사용자 PC에서 사용할 수있는 항목을 기반으로하는 기타 플러그인입니다. 이것이 YouTube 동영상에서 동영상 태그를 사용하는 데 어려움을 겪고있는 이유입니다.

YouTube는 페이지에 YouTube 동영상을 삽입하는 개발자 API를 제공합니다.

라이브 예제로 JSFiddle을 만들었습니다. http://jsfiddle.net/zub16fgt/

https://developers.google.com/youtube/iframe_api_reference#Getting_Started 에서 YouTube API에 대해 자세히 알아볼 수 있습니다.

코드는 아래에서도 찾을 수 있습니다.

HTML에서 :

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

자바 스크립트에서 :

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

가장 쉬운 대답은 W3schools입니다. https://www.w3schools.com/html/html_youtube.asp

1. Youtube에 비디오 업로드
2. 비디오 ID를 적어 둡니다.
3. 이제 HTML5에이 코드를 작성하십시오.

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

hooktube가하는 방식으로 하는 것은 어떻습니까? 실제로 html5 요소에 동영상 URL을 사용하지 않지만 해당 동영상을 호출하는 Google 동영상 리디렉터 URL을 사용합니다. 여기 그들이 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>

코드는 다음 비디오 페이지 https://hooktube.com/watch?v=72UO0v5ESUo입니다.

반면에 youtube to mp3 는 비디오 다운로드 요청의 절반에 대해 download.html을 반환하는 매우 수익을 창출하는 괴물로 변했습니다.

이 답변의 두 링크는 ​​두 리소스에 대한 개인적인 경험에 대한 것입니다. hooktube가 멋지고 신선하고 실제로 검열과 지리적 제한을 피하는 데 도움이되는 방법 .. 확인해보세요. 꽤 멋지네요. youtubeinmp4는 현재 ConvertInMp4로 알려진 팝업 몬스터입니다.

웹 사이트에 새 iframe 태그가 삽입되면 코드가 HTML5를 지원하는 브라우저를 사용하는지 여부를 자동으로 감지합니다.

YouTube 동영상을 삽입하기위한 iframe 코드는 다음과 같습니다. 동영상 ID를 복사하고 아래 코드로 바꾸면됩니다.

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