แสดงแหล่งที่มาของวิดีโอ Youtube ลงในแท็กวิดีโอ HTML5 หรือไม่

ฉันกำลังพยายามใส่แหล่งที่มาของวิดีโอ YouTube ลงใน<video>แท็กHTML5 แต่ดูเหมือนจะไม่ได้ผล หลังจาก Googling บางส่วนฉันพบว่า HTML5 ไม่รองรับ URL ของวิดีโอ YouTube เป็นแหล่งที่มา

คุณสามารถใช้ HTML5 เพื่อฝังวิดีโอ YouTube ได้หรือไม่? ถ้าไม่มีมีวิธีแก้ปัญหาหรือไม่?

ขั้นตอนที่ 1: เพิ่มลง&html5=Trueใน URL youtube ที่คุณชื่นชอบ

ขั้นตอนที่ 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 กรกฎาคม 2554) :โปรดทราบว่า src วิดีโอนี้ใช้เฉพาะกับเบราว์เซอร์ที่คุณใช้เพื่อดึงแหล่งที่มาของหน้า ฉันคิดว่า Youtube สร้าง HTML นี้แบบไดนามิก (อย่างน้อยก็ในปัจจุบัน) ดังนั้นในการทดสอบว่าฉันคัดลอกใน Firefox สิ่งนี้ใช้ได้ใน Firefox แต่ไม่ใช่ Chrome

คำตอบนี้ใช้ไม่ได้อีกต่อไป แต่ฉันกำลังหาวิธีแก้ไข

ณ. 2558/02/24. มีเว็บไซต์ (youtubeinmp4)ที่ให้คุณดาวน์โหลดวิดีโอ youtube .mp4 formatได้คุณสามารถใช้ประโยชน์จากสิ่งนี้ (ด้วย JavaScript บางส่วน) เพื่อหลีกเลี่ยงการฝังวิดีโอ youtube ใน<video>แท็ก นี่คือตัวอย่างของการดำเนินการนี้

ข้อดี

• ค่อนข้างง่ายต่อการใช้
• การตอบสนองของเซิร์ฟเวอร์ค่อนข้างรวดเร็วจริง ๆ (ใช้เวลาไม่มากในการดึงข้อมูลวิดีโอ)
• Abstraction (วิธีแก้ปัญหาที่ได้รับการยอมรับแม้ว่าจะทำงานได้อย่างถูกต้อง แต่จะใช้ได้ก็ต่อเมื่อคุณรู้ล่วงหน้าว่าคุณกำลังจะเล่นวิดีโอใดซึ่งใช้ได้กับ 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 ไม่ได้เป็นเพียงวิดีโอ แต่โดยทั่วไปเป็นหน้าเว็บที่มีตรรกะในการตรวจจับสิ่งที่ผู้ใช้ของคุณสนับสนุนและวิธีที่พวกเขาสามารถเล่นวิดีโอ youtube โดยใช้ HTML5 หรือแฟลชหรือปลั๊กอินอื่น ๆ ตามสิ่งที่มีอยู่ในพีซีของผู้ใช้ นี่คือสาเหตุที่คุณประสบปัญหาในการใช้แท็กวิดีโอกับวิดีโอ youtube

YouTube มี API สำหรับนักพัฒนาเพื่อฝังวิดีโอ youtube ลงในเพจของคุณ

ฉันสร้าง JSFiddle เป็นตัวอย่างจริง: http://jsfiddle.net/zub16fgt/

และคุณสามารถอ่านเพิ่มเติมเกี่ยวกับ API ของ YouTube ได้ที่นี่: https://developers.google.com/youtube/iframe_api_reference#Getting_Started

โค้ดสามารถพบได้ด้านล่าง

ใน HTML ของคุณ:

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

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

คำตอบที่ง่ายที่สุดคือ W3schools https://www.w3schools.com/html/html_youtube.asp

1. อัปโหลดวิดีโอของคุณไปยัง Youtube
2. สังเกตรหัสวิดีโอ
3. ตอนนี้เขียนโค้ดนี้ใน HTML5 ของคุณ

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

วิธีทำแบบที่hooktubeทำยังไง? พวกเขาไม่ได้ใช้ URL ของวิดีโอสำหรับองค์ประกอบ html5 แต่เป็น URL ตัวเปลี่ยนเส้นทางวิดีโอของ Google ที่เรียกใช้วิดีโอนั้น ดูวิธีที่พวกเขานำเสนอวิดีโอสุ่ม 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 เป็น mp3ได้กลายเป็นสัตว์ประหลาดที่สร้างรายได้อย่างมากซึ่งส่งคืน download.html ครึ่งหนึ่งของคำขอดาวน์โหลดวิดีโอ ... น่ารำคาญ ...

ลิงก์ 2 ลิงก์ในคำตอบนี้เป็นประสบการณ์ส่วนตัวของฉันกับแหล่งข้อมูลทั้งสอง hooktube นั้นดีและสดแค่ไหนและช่วยหลีกเลี่ยงการเซ็นเซอร์และข้อ จำกัด ทางภูมิศาสตร์ได้อย่างไร .. ลองดูสิว่ามันเจ๋งมาก และ youtubeinmp4 เป็นสัตว์ประหลาดป๊อปอัพที่ตอนนี้รู้จักกันในชื่อ ConvertInMp4 ...

ด้วยแท็ก iframe ใหม่ที่ฝังอยู่ในเว็บไซต์ของคุณโค้ดจะตรวจจับโดยอัตโนมัติว่าคุณกำลังใช้เบราว์เซอร์ที่รองรับ HTML5 หรือไม่

รหัส iframe สำหรับการฝังวิดีโอ YouTube มีดังต่อไปนี้เพียงแค่คัดลอกรหัสวิดีโอและแทนที่ในโค้ดด้านล่าง:

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