วิธีฝังวิดีโอ YouTube ที่เล่นอัตโนมัติใน iframe ได้อย่างไร

ฉันกำลังพยายามฝังวิดีโอ iframe เวอร์ชั่นใหม่ของ YouTube และนำไปเล่นอัตโนมัติ

เท่าที่ฉันสามารถบอกได้ไม่มีวิธีการทำเช่นนี้โดยการแก้ไขธงไปยัง URL มีวิธีการใช้ JavaScript & API หรือไม่

ใช้งานได้ใน Chrome แต่ไม่ใช่ Firefox 3.6 (คำเตือน: วิดีโอ RickRoll):

<iframe width="420" height="345" src="http://www.youtube.com/embed/oHg5SJYRHA0?autoplay=1" frameborder="0" allowfullscreen></iframe>

API JavaScript สำหรับ iframe ฝังอยู่ แต่ยังคงโพสต์เป็นคุณลักษณะทดลอง

อัปเดต: iframe API ได้รับการสนับสนุนอย่างสมบูรณ์ในขณะนี้และ"การสร้างออบเจ็กต์ YT.Player - ตัวอย่างที่ 2"แสดงวิธีตั้งค่า "เล่นอัตโนมัติ" ใน JavaScript

โค้ดที่ฝังตัวของ youtube ปิดการเล่นอัตโนมัติโดยค่าเริ่มต้น เพียงเพิ่มautoplay=1ที่ส่วนท้ายของแอตทริบิวต์ "src" ตัวอย่างเช่น:

<iframe src="http://www.youtube.com/embed/xzvScRnF6MU?autoplay=1" width="960" height="447" frameborder="0" allowfullscreen></iframe>

ตั้งแต่เดือนเมษายน 2018 Google ทำการเปลี่ยนแปลงบางอย่างกับนโยบายแบบอัตโนมัติ ดังนั้นคุณจะต้องทำสิ่งนี้:

<iframe src="https://www.youtube.com/embed/VIDEO_ID?autoplay=1" allow='autoplay'></iframe>

สิงหาคม 2561 ฉันไม่พบตัวอย่างการทำงานเกี่ยวกับการติดตั้ง iframe คำถามอื่น ๆ ที่เกี่ยวข้องกับ Chrome เท่านั้นซึ่งให้ไปเล็กน้อย

คุณจะต้องปิดเสียงmute=1เพื่อเล่นอัตโนมัติบน Chrome FF และ IE ทำงานได้ดีโดยใช้autoplay=1เป็นพารามิเตอร์

<iframe src="//www.youtube.com/embed/{{YOUTUBE-ID}}?autoplay=1&mute=1" name="youtube embed" allow="autoplay; encrypted-media" allowfullscreen></iframe>

iframe 2014 ฝังวิธีการฝังวิดีโอ youtube ด้วยการเล่นอัตโนมัติและไม่มีวิดีโอที่แนะนำตอนท้ายของคลิป

rel=0&autoplay 

ตัวอย่างด้านล่าง:

<iframe width="640" height="360" src="//www.youtube.com/embed/JWgp7Ny3bOo?rel=0&amp;autoplay=1" frameborder="0" allowfullscreen></iframe>

ในตอนท้ายของ iframe src ให้เพิ่ม&enablejsapi=1เพื่ออนุญาตให้ js API ใช้กับวิดีโอ

แล้วด้วย jquery:

jQuery(document).ready(function( $ ) {
  $('.video-selector iframe')[0].contentWindow.postMessage('{"event":"command","func":"playVideo","args":""}', '*');
});

สิ่งนี้ควรเล่นวิดีโอบนเอกสารโดยอัตโนมัติ

โปรดทราบว่าคุณสามารถใช้สิ่งนี้ภายในฟังก์ชั่นคลิกเพื่อคลิกที่องค์ประกอบอื่นเพื่อเริ่มวิดีโอ

ที่สำคัญคุณไม่สามารถเริ่มวิดีโออัตโนมัติบนอุปกรณ์มือถือได้ดังนั้นผู้ใช้จะต้องคลิกที่ตัวเล่นวิดีโอเพื่อเริ่มวิดีโอ

แก้ไข: จริง ๆ แล้วฉันไม่แน่ใจ 100% เกี่ยวกับเอกสารแล้ว iframe จะพร้อมเพราะ YouTube ยังสามารถโหลดวิดีโอได้ จริงๆแล้วฉันใช้ฟังก์ชันนี้ในฟังก์ชั่นคลิก:

$('.video-container').on('click', function(){
  $('video-selector iframe')[0].contentWindow.postMessage('{"event":"command","func":"playVideo","args":""}', '*');
  // add other code here to swap a custom image, etc
});

ธงหรือพารามิเตอร์ที่คุณสามารถใช้กับ IFRAME และวัตถุฝังมีเอกสารที่นี่ รายละเอียดเกี่ยวกับพารามิเตอร์ที่ทำงานกับสิ่งที่ผู้เล่นยังกล่าวถึงอย่างชัดเจน:

เครื่องเล่นและพารามิเตอร์ผู้เล่นในตัวของ YouTube

คุณจะสังเกตเห็นว่าautoplayผู้เล่นทุกคนได้รับการสนับสนุน (AS3, AS2 และ HTML5)

เคล็ดลับการสืบค้นหลายคำแนะนำสำหรับผู้ที่ไม่รู้จัก (ผ่านมาและอนาคตฉัน)

หากคุณกำลังทำแบบสอบถามเดียวด้วย URL เพียงแค่?autoplay=1ทำงานตามที่แสดงโดยคำตอบของ mjhm

<iframe src="https://www.youtube.com/embed/oHg5SJYRHA0?autoplay=1"></iframe>

หากคุณกำลังทำแบบสอบถามหลายรายการโปรดจำไว้ว่าคำถามแรกจะเริ่มต้นด้วย?ขณะที่ส่วนที่เหลือเริ่มต้นด้วย&

สมมติว่าคุณต้องการปิดวิดีโอที่เกี่ยวข้อง แต่เปิดใช้งานการเล่นอัตโนมัติ ...

วิธีนี้ใช้ได้ผล

<iframe src="https://www.youtube.com/embed/oHg5SJYRHA0?rel=0&autoplay=1"></iframe>

และงานนี้

<iframe src="https://www.youtube.com/embed/oHg5SJYRHA0?autoplay=1&rel=0"></iframe>

แต่สิ่งเหล่านี้จะไม่ทำงาน ..

<iframe src="https://www.youtube.com/embed/oHg5SJYRHA0?rel=0?autoplay=1"></iframe>

<iframe src="https://www.youtube.com/embed/oHg5SJYRHA0&autoplay=1&rel=0"></iframe>

ตัวอย่างการเปรียบเทียบ

https://jsfiddle.net/Hastig/p4dpo5y4/

ข้อมูลเพิ่มเติม

อ่านคำตอบของ NextLocal ด้านล่างสำหรับข้อมูลเพิ่มเติมเกี่ยวกับการใช้สตริงการสืบค้นจำนวนมาก

หากต้องการให้คำตอบที่ยอมรับโดย mjhm ทำงานกับ Chrome 66 ในเดือนพฤษภาคม 2018 ฉันได้เพิ่มallow=autoplayใน iframe และenable_js=1สตริงการสืบค้น:

<iframe allow=autoplay width="420px" height="345px" src="http://www.youtube.com/embed/oHg5SJYRHA0?autoplay=1&enable_js=1"></iframe>

ทุกวันนี้ฉันมีคุณลักษณะใหม่ "อนุญาต" ในแท็ก iframe ตัวอย่างเช่น:

allow = "accelerometer; autoplay; เข้ารหัส - สื่อ; ไจโรสโคป; ภาพในภาพ"

รหัสสุดท้ายคือ:

<iframe src="https://www.youtube.com/embed/[VIDEO-CODE]?autoplay=1" 
frameborder="0" style="width: 100%; height: 100%;"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"></iframe>

1 - เพิ่ม&enablejsapi=1ไปยังIFRAME SRC

2 - jQuery func:

  $('iframe#your_video')[0].contentWindow.postMessage('{"event":"command","func":"playVideo","args":""}', '*');

ทำงานได้ดี

ในการใช้จาวาสคริปต์ API

<script type="text/javascript" src="swfobject.js"></script>
  <div id="ytapiplayer">
    You need Flash player 8+ and JavaScript enabled to view this video.
  </div>

  <script type="text/javascript">

    var params = { allowScriptAccess: "always" };
    var atts = { id: "myytplayer" };
    swfobject.embedSWF("http://www.youtube.com/v/OyHoZhLdgYw?enablejsapi=1&playerapiid=ytplayer&version=3",
                       "ytapiplayer", "425", "356", "8", null, null, params, atts);

  </script>

วิธีเล่น youtube ด้วยรหัส:

swfobject.embedSWF

การอ้างอิง: https://developers.google.com/youtube/js_api_reference นิตยสาร

<iframe width="560" height="315" 
        src="https://www.youtube.com/embed/9IILMHo4RCQ?rel=0&amp;controls=0&amp;showinfo=0&amp;autoplay=1" 
        frameborder="0" allowfullscreen></iframe>

ธันวาคม 2561

กำลังมองหาวิดีโอตอบกลับอัตโนมัติของ AUTOPLAY, LOOP, MUTE youtube

คำตอบอื่น ๆ ใช้งานไม่ได้

ฉันพบวิธีแก้ปัญหาด้วยไลบรารี: react-youtube

class Video extends Component {

    _onReady(event) {
        // add mute
        event.target.mute();
        // add autoplay
        event.target.playVideo();
    }

    render() {
        const opts = {
            width: '100%',
            height: '700px',
            playerVars: {
                // remove video controls 
                controls: 0,
                // remove related video
                rel: 0
            }
        };

        return (
            <YouTube
                videoId="oHg5SJYRHA0"
                opts={opts}
                // add autoplay
                onReady={this._onReady}
                // add loop
                onEnd={this._onReady}
            />
        )
    }

}