Otomatik oynatılan bir YouTube videosunu iframe'e nasıl yerleştirebilirim?

Bir YouTube videosunun yeni iframe sürümünü yerleştirmeye ve otomatik oynatmaya çalışıyorum.

Anlayabildiğim kadarıyla, URL'ye bayraklar değiştirerek bunu yapmanın bir yolu yok. JavaScript ve API kullanarak bunu yapmanın bir yolu var mı?

Bu Chrome'da çalışır ancak Firefox 3.6'da kullanılamaz (uyarı: RickRoll video):

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

İframe gömer için JavaScript API var, ancak hala deneysel bir özellik olarak yayınlanır.

GÜNCELLEME: iframe API'sı artık tam olarak desteklenmektedir ve "YT.Player nesneleri oluşturma - Örnek 2" , JavaScript'te "otomatik oynatmanın" nasıl ayarlanacağını gösterir.

YouTube'un gömülü kodunda varsayılan olarak otomatik oynatma özelliği kapalıdır. autoplay=1"Src" özelliğinin sonuna ekleyin . Örneğin:

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

Nisan 2018'den bu yana Google, Otomatik Oynatma Politikasında bazı değişiklikler yaptı . Yani böyle bir şey yapmanız gerekecek:

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

Ağustos 2018 iframe uygulamasında çalışan bir örnek bulamadım. Diğer sorular yalnızca Chrome ile ilgiliydi, bu da biraz verdi.

mute=1Chrome'da otomatik oynatmak için sesi kapatmanız gerekir . FF ve IE autoplay=1parametre olarak gayet iyi çalışıyor gibi görünüyor .

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

2014 iframe, bir youtube videosunu otomatik oynatmaya ve klibin sonunda önerilen video içermemeye yerleştirdi

rel=0&autoplay 

Aşağıda Örnek:.

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

iframe src'nin sonunda &enablejsapi=1, js API'sının videoda kullanılmasına izin vermek için ekleyin

ve sonra jquery ile:

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

bu videoyu otomatik olarak dokümanda oynatmalıdır.

videoyu başlatmak için başka bir öğeyi tıklamak için bunu bir tıklama işlevi içinde de kullanabileceğinizi unutmayın

Daha da önemlisi, mobil cihazdaki videoları otomatik olarak başlatamazsınız, böylece kullanıcılar videoyu başlatmak için her zaman video oynatıcının kendisine tıklamak zorunda kalırlar

Düzenleme: Aslında belgede% 100 emin değilim. İframe hazır olacak, çünkü YouTube hala videoyu yüklüyor olabilir. Aslında bu işlevi bir tıklama işlevi içinde kullanıyorum:

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

Bayraklar , yoksa buraya belgelenen IFRAME ve nesnesi yerleştirme ile kullanabileceğiniz parametreler; hangi parametrenin hangi oynatıcıyla çalıştığıyla ilgili ayrıntılar da açıkça belirtilmiştir:

YouTube Gömülü Oynatıcıları ve Oynatıcı Parametreleri

autoplayTüm oyuncular (AS3, AS2 ve HTML5) tarafından desteklendiğini göreceksiniz .

Bilmeyenler için birden fazla sorgu ipucu (geçmiş ve gelecek beni)

Eğer url ile tek bir sorgu yapıyorsanız sadece mjhm cevabında gösterildiği gibi?autoplay=1 çalışır

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

Birden fazla sorgu yapıyorsanız, ilkinin bir ?süre ile başladığını , geri kalanının ise bir&

İlgili videoları kapatmak ancak otomatik oynatmayı etkinleştirmek istediğinizi varsayalım ...

Bu çalışıyor

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

ve bu işe yarıyor

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

Ama bunlar işe yaramayacak ..

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

örnek karşılaştırmalar

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

Daha fazla bilgi

Birden çok sorgu dizesi kullanma hakkında daha fazla bilgi için aşağıdakiLocal'ın cevabını okuyun

Mayıs 2018'de Chrome 66'da çalışan mjhm tarafından kabul edilen cevabı allow=autoplayalmak için iframe'e ve enable_js=1sorgu dizesine ekledim :

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

Günümüzde iframe etiketine yeni bir "allow" özelliği ekliyorum, örneğin:

allow = "ivmeölçer; otomatik oynatma; şifreli ortam; jiroskop; resim içinde resim"

Son kod:

<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 - Eklenti &enablejsapi=1içinIFRAME SRC

2 - jQuery işlevi:

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

İyi çalışıyor

Javascript API'sini kullanmak için,

<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'u kimliğiyle çalmak için:

swfobject.embedSWF

başvuru: https://developers.google.com/youtube/js_api_reference dergisi

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

Aralık 2018,

Tepki için bir AUTOPLAY, LOOP, MUTE youtube videosu arıyorsunuz.

Diğer cevaplar işe yaramadı.

Bir kütüphane ile bir çözüm buldum: tepki-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}
            />
        )
    }

}