Làm cách nào để nhúng video YouTube tự động phát trong iframe?

Tôi đang cố gắng nhúng phiên bản iframe mới của video YouTube và để nó tự động phát.

Theo như tôi có thể nói, không có cách nào để làm điều này bằng cách sửa đổi các cờ thành URL. Có cách nào để làm điều đó bằng cách sử dụng JavaScript & API không?

Điều này hoạt động trong Chrome nhưng không phải Firefox 3.6 (cảnh báo: video RickRoll):

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

Các API Javascript để nhúng iframe tồn tại, nhưng vẫn được đăng là một tính năng thử nghiệm.

CẬP NHẬT: API iframe hiện được hỗ trợ đầy đủ và "Tạo các đối tượng YT.Player - Ví dụ 2" cho thấy cách đặt "tự động phát" trong JavaScript.

Mã nhúng của youtube đã tự động tắt theo mặc định. Chỉ cần thêm autoplay=1vào cuối thuộc tính "src". Ví dụ:

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

Kể từ tháng 4 năm 2018, Google đã thực hiện một số thay đổi đối với Chính sách tự động phát . Vì vậy, bạn sẽ phải làm một cái gì đó như thế này:

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

Tháng 8 năm 2018 tôi đã không tìm thấy một ví dụ hoạt động về việc triển khai iframe. Các câu hỏi khác chỉ liên quan đến Chrome, điều này đã khiến nó mất đi một chút.

Bạn sẽ phải tắt âm thanh mute=1để tự động phát trên Chrome. FF và IE dường như chỉ hoạt động tốt autoplay=1khi sử dụng làm tham số.

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

Iframe 2014 nhúng vào cách nhúng video youtube với tự động phát và không có video được đề xuất nào ở cuối clip

rel=0&autoplay 

Ví dụ dưới đây :.

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

ở cuối ifrc src, hãy thêm &enablejsapi=1để cho phép API js được sử dụng trên video

và sau đó với jquery:

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

cái này sẽ tự động phát video trên document. yet

lưu ý rằng bạn cũng có thể sử dụng chức năng này bên trong chức năng nhấp để nhấp vào yếu tố khác để bắt đầu video

Quan trọng hơn, bạn không thể tự động bắt đầu video trên thiết bị di động để người dùng sẽ luôn phải nhấp vào chính trình phát video để bắt đầu video

Chỉnh sửa: Tôi thực sự không chắc chắn 100% về tài liệu. Đã có iframe sẽ sẵn sàng, vì YouTube vẫn có thể tải video. Tôi thực sự đang sử dụng chức năng này bên trong chức năng nhấp chuột:

$('.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
});

Các cờ hoặc tham số mà bạn có thể sử dụng với các nhúng IFRAME và ĐỐI TƯỢNG được ghi lại ở đây; các chi tiết về tham số nào hoạt động với những gì người chơi cũng được đề cập rõ ràng:

Thông số trình phát và trình phát nhúng của YouTube

Bạn sẽ nhận thấy rằng autoplayđược hỗ trợ bởi tất cả người chơi (AS3, AS2 và HTML5).

Nhiều mẹo truy vấn cho những người không biết (qua tôi và tương lai tôi)

Nếu bạn đang thực hiện một truy vấn duy nhất với url, chỉ ?autoplay=1hoạt động như được hiển thị bởi câu trả lời của mjhm

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

Nếu bạn đang thực hiện nhiều truy vấn, hãy nhớ truy vấn đầu tiên bắt đầu bằng một ?lúc&

Giả sử bạn muốn tắt các video liên quan nhưng bật tự động phát ...

Những công việc này

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

và điều này hoạt động

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

Nhưng những thứ này sẽ không hoạt động ..

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

so sánh ví dụ

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

thêm thông tin

Đọc trả lời của NextLocal bên dưới để biết thêm thông tin về việc sử dụng nhiều chuỗi truy vấn

Để có câu trả lời được chấp nhận bởi mjhm hoạt động trên Chrome 66 vào tháng 5 năm 2018, tôi đã thêm vào allow=autoplayiframe và enable_js=1chuỗi truy vấn:

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

Ngày nay, tôi bao gồm một thuộc tính mới "cho phép" trên thẻ iframe, ví dụ:

allow = "gia tốc kế, tự động phát, mã hóa phương tiện; con quay hồi chuyển; hình ảnh trong ảnh"

Mã cuối cùng là:

<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 - thêm &enablejsapi=1vàoIFRAME SRC

2 - Chức năng jQuery:

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

Hoạt động tốt

Để sử dụng api javascript,

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

Để phát youtube với id:

swfobject.embedSWF

tham khảo: https://developers.google.com/youtube/js_api_Vference tạp chí

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

Tháng 12 năm 2018,

Tìm kiếm một video youtube AUTOPLAY, LOOP, MUTE để phản ứng.

Các câu trả lời khác đã không làm việc.

Tôi tìm thấy một giải pháp với một thư viện: Reac-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}
            />
        )
    }

}