HTML5 वीडियो टैग में Youtube वीडियो स्रोत दिखाएं?

116

मैं YouTube वीडियो स्रोत को HTML5 <video>टैग में डालने का प्रयास कर रहा हूं , लेकिन यह काम नहीं करता है। कुछ Googling के बाद, मुझे पता चला कि HTML5 स्रोत के रूप में YouTube वीडियो URL का समर्थन नहीं करता है।

क्या आप YouTube वीडियो एम्बेड करने के लिए HTML5 का उपयोग कर सकते हैं? यदि नहीं, तो क्या कोई वर्कअराउंड है?

html youtube embedded-video

— श्री
स्रोत

1

एक IFrame समाधान नीचे दिए गए अनुसार stackoverflow.com/questions/5157377/… को वर्कअराउंड के रूप में पर्याप्त होना चाहिए।

— एस मैडेन

15

चरण 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स्ट्रिंग कितनी देर तक काम करेगी।

अभी भी खुद को परख रहा हूं।

संपादित करें (28 जुलाई, 2011) : ध्यान दें कि यह वीडियो src उस ब्राउज़र के लिए विशिष्ट है जिसे आप पृष्ठ स्रोत को पुनः प्राप्त करने के लिए उपयोग करते हैं। मुझे लगता है कि YouTube इस HTML को गतिशील रूप से (कम से कम वर्तमान में) परीक्षण में उत्पन्न करता है यदि मैं फ़ायरफ़ॉक्स में कॉपी करता हूं तो यह फ़ायरफ़ॉक्स में काम करता है, लेकिन उदाहरण के लिए क्रोम नहीं।

— साइमन फ्लैक
स्रोत

77

समाप्ति और तथ्य यह है कि यह केवल एक विशिष्ट ब्राउज़र में काम करता है इस समाधान को बहुत बेकार बना देता है।

— 21

1

क्या यह सभी youtube वीडियो चलाने में सक्षम है?

— राज पवन गुमडाल

2

YouTube सैद्धांतिक रूप से अपने सभी वीडियो के लिए अंतर्निहित संग्रहण URL बदल सकता है यदि वे किसी भी समय चाहें। srcउपरोक्त विशेषता में प्रदान किया गया URL संभवत: दीर्घकालिक कार्य करने की गारंटी नहीं है।

— क्रिस पीटर्स

1

हां, उपयोगी जानकारी लेकिन एक बुरे विचार की तरह लगती है। YouTube किसी भी समय प्रत्यक्ष वीडियो लिंक तक पहुंच को बंद करने का निर्णय ले सकता है।

— ओलिवर मोरन

36

यह जवाब अब काम नहीं करता है, लेकिन मैं एक समाधान की तलाश कर रहा हूं।

के रूप में । 2015/02/24। एक वेबसाइट (youtubeinmp4) है जो आपको यूट्यूब वीडियो डाउनलोड करने की अनुमति देती है .mp4 format, आप <video>टैग में यूट्यूब वीडियो एम्बेड करने के साथ इसे (कुछ जावास्क्रिप्ट के साथ) शोषण कर सकते हैं । इस क्रिया में इसका एक डेमो है।

पेशेवरों

लागू करने के लिए काफी आसान है ।
काफी तेजी से सर्वर प्रतिक्रिया वास्तव में (यह है कि ज्यादा नहीं ले करता है वीडियो को पुनः प्राप्त करने के लिए)।
अमूर्त (स्वीकृत समाधान, भले ही यह ठीक से काम किया हो, केवल तभी लागू होगा जब आप पहले से जानते थे कि आप कौन से वीडियो चलाने जा रहे हैं, यह किसी भी उपयोगकर्ता के लिए url इनपुट के लिए काम करता है)।

विपक्ष

यह स्पष्ट रूप से youtubeinmp4.comसर्वर और डाउनलोडिंग लिंक प्रदान करने के उनके तरीके (जो एक <video>स्रोत के रूप में पारित किया जा सकता है ) पर निर्भर करता है , इसलिए यह उत्तर भविष्य में मान्य नहीं हो सकता है।
आप वीडियो की गुणवत्ता का चयन नहीं कर सकते।

जावास्क्रिप्ट (बाद में `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>

टैग में सीधे विशेषता के youtu.beरूप में छोटे url का उपयोग करते हुए थोड़ा कम सामान्य लेकिन काफी छोटा है ।src<video>

आशा करता हूँ की ये काम करेगा! :)

— अपरिभाषित
स्रोत

अच्छा कार्य और मोज़िला और क्रोम पर काम करता है लेकिन वीडियो की चौड़ाई और ऊंचाई कैसे सेट करें यदि <वीडियो> में 100% चौड़ाई और 200px ऊंचाई है।

— अनमोल रतन मोहला

मैंने इस समाधान को लागू किया है, लेकिन 2 दिन बाद, YT ने इसे अवरुद्ध कर दिया। यह काम नहीं करता है। :(

— apires

यह दुर्भाग्य से अब और काम नहीं करता है। यह बहुत अच्छा काम करता था। मुझे आशा है कि इसके लिए एक और समाधान है!

— चामिल

19

<video>टैग एक समर्थित प्रारूप (जो ब्राउज़र द्वारा भिन्न हो सकती है) के एक वीडियो में लोड करने के लिए है।

YouTube एम्बेड लिंक केवल वीडियो नहीं हैं, वे आमतौर पर वे वेबपेज होते हैं जिनमें यह पता लगाने के लिए तर्क होता है कि आपका उपयोगकर्ता क्या समर्थन करता है और वे HTML5 या फ़्लैश का उपयोग करके YouTube वीडियो कैसे चला सकते हैं, या उपयोगकर्ताओं के पीसी पर उपलब्ध कुछ अन्य प्लगइन पर आधारित है। यही कारण है कि आपको यूट्यूब वीडियो के साथ वीडियो टैग का उपयोग करने में कठिनाई हो रही है।

YouTube आपके पृष्ठ में YouTube वीडियो एम्बेड करने के लिए एक डेवलपर API प्रदान करता है।

मैंने एक जीवंत उदाहरण के रूप में एक JSField बनाया: http://jsfiddle.net/zub16fgt/

और आप यहां YouTube API के बारे में अधिक पढ़ सकते हैं: https://developers.google.com/youtube/iframe_api_reference#Getting_Started

नीचे कोड भी पाया जा सकता है

आपके 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
    }
});

— नॉर्मन Breau
स्रोत

मुझे हाल ही में यह समस्या मिली: फुलस्क्रीन अब iPad पर समर्थित नहीं है! आपका jsfiddle-example उदाहरण के लिए एकदम सही है: पीसी पर यह काम करता है, iPad पर नहीं। .. मुझे लगता है कि मुझे इस पर एक नया प्रश्न पूछना चाहिए, लेकिन यहां कोई व्यक्ति टिप्पणी कर सकता है?

— स्नोरवरग

1

@Snorvarg मेरा उत्तर किसी भी HTML5 अनुरूप ब्राउज़र पर काम करना चाहिए, जब तक कि आप अपने iPad पर iOS (10+) का हालिया संस्करण संस्करण चला रहे हों, तो उसे काम करना चाहिए। यदि आपको प्रोग्राम को वीडियो को नियंत्रित करने की आवश्यकता नहीं है, तो आप साधारण iframe एम्बेड API का उपयोग करके प्रयास कर सकते हैं। आप यहां एक उदाहरण पा सकते हैं। Developers.google.com/youtube/iframe_api_reference#Examples , या vinayvasyani का उत्तर देखें। यदि आपको अभी भी कोई समस्या है, तो मैं stackoverflow.com/help/how-to-ask पर पाए गए "How to Ask a Good Question" दिशा-निर्देशों का उपयोग करके एक नया प्रश्न पूछूंगा ।

— नॉर्मन ब्रेउ

@Snorvarg मैं इस उत्पाद में आया था। इसलिए मैं शर्त लगाने को तैयार हूं कि आपके आईपैड पर पूरी स्क्रीन काम नहीं कर रही है, जो दुर्भाग्य से आईओएस सफारी का समर्थन नहीं करता है। एक वैकल्पिक उपाय यह है कि आप अपने फुल स्क्रीन बटन को जोड़ें और आइफ्रेम प्लेयर को अपनी स्क्रीन की चौड़ाई / ऊंचाई पर आकार दें।

— नॉर्मन ब्रेउ

1

आपकी युक्तियों और लिंक के लिए धन्यवाद। मैंने कुछ दिन पहले एक सवाल जोड़ा था, यहां: stackoverflow.com/questions/49650040/… लेकिन थोड़ी देर बाद, मैंने खुद का फुलस्क्रीन बटन बनाने का फैसला किया जैसा आपने प्रस्तावित किया है, और यह ठीक काम करता है।

— स्नोवरगर्ल

महान सामान, हालांकि मैं "टाइपएयरर: वाईटी.लेयर एक निर्माता नहीं" त्रुटि में भाग गया, जैसा कि यहां वर्णित है: stackoverflow.com/questions/52062169/… । जैसा कि (केवल) उत्तर बताते हैं, अतुल्यकालिक स्क्रिप्ट लोड और एपीआई के परिणाम अभी तक तैयार नहीं किए जा रहे हैं जब कॉल किया जा रहा है। onYouTubeIframeAPIReadyफ़ंक्शन को लागू करने (और इसके अंदर उपरोक्त कोड के अंतिम कोड ब्लॉक को डालकर) से बचा जा सकता है ।

— jakob.j

1

सबसे आसान जवाब W3schools द्वारा दिया गया है। https://www.w3schools.com/html/html_youtube.asp

Youtube पर अपना वीडियो अपलोड करें
वीडियो आईडी नोट करें
अब इस कोड को अपने HTML5 में लिखें।

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

— सग्निक मजुमदार
स्रोत

-3

कैसे के बारे में इसे जिस तरह से हुकवॉच करता है? वे वास्तव में एचटीएमएल 5 तत्व के लिए वीडियो URL का उपयोग नहीं करते हैं, लेकिन उस वीडियो पर कॉल करने वाले Google वीडियो को पुनः निर्देशित करते हैं। यहां देखें कि कैसे वे कुछ निरंकुश यादृच्छिक वीडियो प्रस्तुत करते हैं ...

<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 से एमपी 3 अत्यंत विमुद्रीकृत राक्षस में बदल गया है जो वीडियो डाउनलोड के आधे अनुरोधों पर अब डाउनलोड करता है ... कष्टप्रद ...

इस उत्तर में 2 लिंक दोनों संसाधनों के साथ मेरे व्यक्तिगत अनुभव हैं। हुकवॉच कितना अच्छा और ताजा है और वास्तव में सेंसरशिप और जियो प्रतिबंधों से बचने में मदद करता है .. इसे देखें, यह बहुत अच्छा है। और youtubeinmp4 एक पॉपअप मॉन्स्टर है जिसे अब ConvertInMp4 के रूप में जाना जाता है ...

— सर्गेई किरेयेव
स्रोत

-6

आपकी वेबसाइट में एम्बेडेड नए iframe टैग के साथ, कोड स्वचालित रूप से पता लगा लेगा कि आप HTML5 का समर्थन करने वाले ब्राउज़र का उपयोग कर रहे हैं या नहीं।

YouTube वीडियो एम्बेड करने के लिए iframe कोड इस प्रकार है, बस वीडियो आईडी की प्रतिलिपि बनाएँ और नीचे दिए गए कोड में प्रतिस्थापित करें:

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

— vinayvasyani
स्रोत

23

"नया" iframeटैग? iframeउम्र के लिए चारों ओर गया है ...

— Zearin

11

यह उत्तर का हल नहीं है, यह स्पष्ट रूप से वीडियो टैग और आईफ्रेम नहीं बताता है ...

— TGarrett

7

शायद ओपी को iframeटैग के अस्तित्व के बारे में पता नहीं था और इसीलिए उन्होंने सीधे videoटैग के बारे में पूछा । अन्यथा उसने यह नहीं पूछा होता कि HTML5 (सामान्य रूप से) Youtube वीडियो का समर्थन करता है, लेकिन उसने इस प्रश्न को videoटैग में प्रतिबंधित कर दिया होता । उन्होंने यह भी पूछा "क्या इसके लिए कोई वर्कअराउंड है?" अपने अंतिम वाक्य में, इसलिए यह उत्तर पूरी तरह से मान्य है।

— डैनियल मुनोज परसापोर्मोगाडैम

1

मेरे blogger.com ब्लॉग में youtube.com वीडियो एम्बेड करने के लिए, iframe एकमात्र सुविधाजनक समाधान है। उसके ऊपर, एम्बेड कोड जो youtube.com उत्पन्न करता है, एक iframe टैग है। इसके अलावा, w3schools.com iframes की सिफारिश करता है: http://www.w3schools.com/html/html_youtube.asp । जहां वीडियो टैग का उल्लेख नहीं है।

— नोबिनजा

1

यदि कोई व्यक्ति उत्सुक है तो बस ... समस्या यह है कि वीडियो टैग का उपयोग करना YouTube वीडियो के लिए उचित दृष्टिकोण नहीं है क्योंकि YouTube वीडियो को एम्बेड करने के लिए सार्वजनिक URL वास्तविक मीडिया संसाधन नहीं हैं। यही कारण है कि वहाँ लोग आइफ्रेम का उपयोग करने का सुझाव दे रहे हैं। वीडियो टैग का उपयोग करने की कोशिश करने का मतलब होगा कि आप निजी URL का उपयोग कर रहे होंगे जो भविष्य में बदल सकते हैं। यह एक निजी सदस्य को ऑब्जेक्ट-ओरिएंटेड भाषा में एक्सेस करने का प्रयास करने जैसा है। आप यहां YouTube के आधिकारिक दस्तावेज़ देख सकते हैं। Developers.google.com/youtube/iframe_api_reference#Examples

— नॉर्मन ब्रेउ

HTML5 वीडियो टैग में Youtube वीडियो स्रोत दिखाएं?

यह जवाब अब काम नहीं करता है, लेकिन मैं एक समाधान की तलाश कर रहा हूं।

पेशेवरों

विपक्ष

जावास्क्रिप्ट (बाद में load)

उपयोग (पूर्ण)

उपयोग (मिनी)

जावास्क्रिप्ट (बाद में `load`)