Bagaimana cara menjeda pemutar YouTube saat menyembunyikan iframe?

Saya memiliki div tersembunyi yang berisi video YouTube dalam format <iframe>. Saat pengguna mengklik link, div ini menjadi terlihat, kemudian pengguna dapat memutar video.

Saat pengguna menutup panel, pemutaran video harus dihentikan. Bagaimana saya bisa mencapai ini?

Kode:

<!-- link to open popupVid -->
<p><a href="javascript:;" onClick="document.getElementById('popupVid').style.display='';">Click here</a> to see my presenting showreel, to give you an idea of my style - usually described as authoritative, affable and and engaging.</p>

<!-- popup and contents -->
<div id="popupVid" style="position:absolute;left:0px;top:87px;width:500px;background-color:#D05F27;height:auto;display:none;z-index:200;">

  <iframe width="500" height="315" src="http://www.youtube.com/embed/T39hYJAwR40" frameborder="0" allowfullscreen></iframe>

  <br /><br /> 
  <a href="javascript:;" onClick="document.getElementById('popupVid').style.display='none';">
  close
  </a>
</div><!--end of popupVid -->

Cara termudah untuk mengimplementasikan perilaku ini adalah dengan memanggil metode pauseVideodan playVideo, bila perlu. Terinspirasi oleh hasil jawaban saya sebelumnya , saya telah menulis fungsi tanpa plugin untuk mencapai perilaku yang diinginkan.

Satu-satunya penyesuaian:

• Saya telah menambahkan fungsi, toggleVideo
• Saya telah menambahkan ?enablejsapi=1ke URL YouTube, untuk mengaktifkan fitur tersebut

Demo: http://jsfiddle.net/ZcMkt/
Kode:

<script>
function toggleVideo(state) {
    // if state == 'hide', hide. Else: show video
    var div = document.getElementById("popupVid");
    var iframe = div.getElementsByTagName("iframe")[0].contentWindow;
    div.style.display = state == 'hide' ? 'none' : '';
    func = state == 'hide' ? 'pauseVideo' : 'playVideo';
    iframe.postMessage('{"event":"command","func":"' + func + '","args":""}', '*');
}
</script>

<p><a href="javascript:;" onClick="toggleVideo();">Click here</a> to see my presenting showreel, to give you an idea of my style - usually described as authoritative, affable and and engaging.</p>

<!-- popup and contents -->
<div id="popupVid" style="position:absolute;left:0px;top:87px;width:500px;background-color:#D05F27;height:auto;display:none;z-index:200;">
   <iframe width="500" height="315" src="http://www.youtube.com/embed/T39hYJAwR40?enablejsapi=1" frameborder="0" allowfullscreen></iframe>
   <br /><br />
   <a href="javascript:;" onClick="toggleVideo('hide');">close</a>

Berikut adalah jQuery yang mengambil jawaban RobW untuk digunakan menyembunyikan / menjeda iframe di jendela modal:

    function toggleVideo(state) {
        if(state == 'hide'){
            $('#video-div').modal('hide');
            document.getElementById('video-iframe'+id).contentWindow.postMessage('{"event":"command","func":"pauseVideo","args":""}', '*');
        }
        else {
            $('#video-div').modal('show');
            document.getElementById('video-iframe'+id).contentWindow.postMessage('{"event":"command","func":"playVideo","args":""}', '*');
        }
    }

Elemen html yang dirujuk adalah modal div itu sendiri (# video-div) yang memanggil metode show / hide, dan iframe (# video-iframe) yang memiliki url video seperti src = "" dan memiliki sufiks enablejsapi = 1 ? yang memungkinkan kontrol terprogram dari pemutar (mis.

Untuk lebih lanjut tentang html lihat jawaban RobW.

Berikut adalah potongan jQuery sederhana untuk menjeda semua video di halaman berdasarkan jawaban RobW dan DrewT:

jQuery("iframe").each(function() {
  jQuery(this)[0].contentWindow.postMessage('{"event":"command","func":"pauseVideo","args":""}', '*')
});

Hai, cara mudah adalah dengan mengatur src dari video menjadi tidak ada, sehingga video akan hilang saat disembunyikan dan kemudian atur kembali src ke video yang Anda inginkan ketika Anda mengklik tautan yang membuka video .. untuk melakukan yang cukup menyetel id ke iframe youtube dan memanggil fungsi src menggunakan id itu seperti ini:

<script type="text/javascript">
function deleteVideo()
{
document.getElementById('VideoPlayer').src='';
}

function LoadVideo()
{
document.getElementById('VideoPlayer').src='http://www.youtube.com/embed/WHAT,EVER,YOUTUBE,VIDEO,YOU,WHANT';
}
</script>

<body>

<p onclick="LoadVideo()">LOAD VIDEO</P>
<p onclick="deleteVideo()">CLOSE</P>

<iframe id="VideoPlayer" width="853" height="480" src="http://www.youtube.com/WHAT,EVER,YOUTUBE,VIDEO,YOU,HAVE" frameborder="0" allowfullscreen></iframe>

</boby>

Karena Anda perlu menyetel ?enablejsapi=truesrc dari iframe sebelum Anda dapat menggunakan playVideo/ pauseVideoperintah yang disebutkan dalam jawaban lain , mungkin berguna untuk menambahkan ini secara terprogram melalui Javascript (terutama jika, misalnya Anda ingin perilaku ini diterapkan pada video yang disematkan oleh pengguna yang baru saja memotong dan menempelkan kode semat YouTube). Dalam hal ini, sesuatu seperti ini mungkin berguna:

function initVideos() {

  // Find all video iframes on the page:
  var iframes = $(".video").find("iframe");

  // For each of them:
  for (var i = 0; i < iframes.length; i++) {
    // If "enablejsapi" is not set on the iframe's src, set it:
    if (iframes[i].src.indexOf("enablejsapi") === -1) {
      // ...check whether there is already a query string or not:
      // (ie. whether to prefix "enablejsapi" with a "?" or an "&")
      var prefix = (iframes[i].src.indexOf("?") === -1) ? "?" : "&amp;";
      iframes[i].src += prefix + "enablejsapi=true";
    }
  }
}

... jika Anda document.readymengaktifkannya, semua iframe dalam div dengan kelas "video" akan enablejsapi=trueditambahkan ke sumbernya, yang memungkinkan perintah playVideo / pauseVideo untuk bekerja padanya.

(nb. contoh ini menggunakan jQuery untuk satu baris yang disetel var iframes, tetapi pendekatan umum harus bekerja dengan baik dengan Javascript murni jika Anda tidak menggunakan jQuery).

Anda dapat menghentikan video dengan memanggil stopVideo()metode pada instance pemutar YouTube sebelum menyembunyikan div misalnya

player.stopVideo()

Untuk detail lebih lanjut lihat di sini: http://code.google.com/apis/youtube/js_api_reference.html#Playback_controls

Cara RobW bekerja sangat baik untuk saya. Untuk orang-orang yang menggunakan jQuery, inilah versi sederhana yang akhirnya saya gunakan:

var iframe = $(video_player_div).find('iframe');

var src = $(iframe).attr('src');      

$(iframe).attr('src', '').attr('src', src);

Dalam contoh ini "video_player" adalah div induk yang berisi iframe.

Saya ingin berbagi solusi yang saya buat dengan menggunakan jQuery yang berfungsi jika Anda memiliki beberapa video YouTube yang disematkan pada satu halaman. Dalam kasus saya, saya telah menetapkan popup modal untuk setiap video sebagai berikut:

<div id="videoModalXX">
...
    <button onclick="stopVideo(videoID);" type="button" class="close"></button>
    ...
    <iframe width="90%" height="400" src="//www.youtube-nocookie.com/embed/video_id?rel=0&enablejsapi=1&version=3" frameborder="0" allowfullscreen></iframe>
...
</div>

Dalam hal ini, videoModalXX mewakili ID unik untuk video tersebut. Kemudian, fungsi berikut menghentikan video:

function stopVideo(id)
{
    $("#videoModal" + id + " iframe")[0].contentWindow.postMessage('{"event":"command","func":"pauseVideo","args":""}', '*');
}

Saya menyukai pendekatan ini karena ini membuat video dijeda di tempat yang Anda tinggalkan jika Anda ingin kembali dan terus menonton nanti. Ini berfungsi dengan baik untuk saya karena mencari iframe di dalam modal video dengan id tertentu. Tidak diperlukan ID elemen YouTube khusus. Mudah-mudahan, seseorang juga akan merasakan manfaatnya.

hapus saja src dari iframe

$('button.close').click(function(){
    $('iframe').attr('src','');;
});

Jawaban Rob W membantu saya mengetahui cara menjeda video melalui iframe saat penggeser disembunyikan. Namun, saya membutuhkan beberapa modifikasi sebelum saya bisa membuatnya bekerja. Berikut cuplikan html saya:

<div class="flexslider" style="height: 330px;">
  <ul class="slides">
    <li class="post-64"><img src="http://localhost/.../Banner_image.jpg"></li>
    <li class="post-65><img  src="http://localhost/..../banner_image_2.jpg "></li>
    <li class="post-67 ">
        <div class="fluid-width-video-wrapper ">
            <iframe frameborder="0 " allowfullscreen=" " src="//www.youtube.com/embed/video-ID?enablejsapi=1 " id="fitvid831673 "></iframe>
        </div>
    </li>
  </ul>
</div>

Perhatikan bahwa ini berfungsi pada localhosts dan juga seperti yang disebutkan Rob W " enablejsapi = 1 " telah ditambahkan ke akhir URL video.

Berikut adalah file JS saya:

jQuery(document).ready(function($){
    jQuery(".flexslider").click(function (e) {
        setTimeout(checkiframe, 1000); //Checking the DOM if iframe is hidden. Timer is used to wait for 1 second before checking the DOM if its updated

    });
});

function checkiframe(){
    var iframe_flag =jQuery("iframe").is(":visible"); //Flagging if iFrame is Visible
    console.log(iframe_flag);
    var tooglePlay=0;
    if (iframe_flag) {                                //If Visible then AutoPlaying the Video
        tooglePlay=1;
        setTimeout(toogleVideo, 1000);                //Also using timeout here
    }
    if (!iframe_flag) {     
        tooglePlay =0;
        setTimeout(toogleVideo('hide'), 1000);  
    }   
}

function toogleVideo(state) {
    var div = document.getElementsByTagName("iframe")[0].contentWindow;
    func = state == 'hide' ? 'pauseVideo' : 'playVideo';
    div.postMessage('{"event":"command","func":"' + func + '","args":""}', '*');
}; 

Juga, sebagai contoh yang lebih sederhana, lihat ini di JSFiddle

Pendekatan ini membutuhkan jQuery. Pertama, pilih iframe Anda:

var yourIframe = $('iframe#yourId');
//yourId or something to select your iframe.

Sekarang Anda memilih tombol putar / jeda dari iframe ini dan klik

$('button.ytp-play-button.ytp-button', yourIframe).click();

Saya harap ini akan membantu Anda.

Jawaban RobW di sini dan di tempat lain sangat membantu, tetapi saya merasa kebutuhan saya jauh lebih sederhana. Saya telah menjawab ini di tempat lain , tetapi mungkin akan berguna di sini juga.

Saya memiliki metode di mana saya membentuk string HTML untuk dimuat di UIWebView:

NSString *urlString = [NSString stringWithFormat:@"https://www.youtube.com/embed/%@",videoID];

preparedHTML = [NSString stringWithFormat:@"<html><body style='background:none; text-align:center;'><script type='text/javascript' src='http://www.youtube.com/iframe_api'></script><script type='text/javascript'>var player; function onYouTubeIframeAPIReady(){player=new YT.Player('player')}</script><iframe id='player' class='youtube-player' type='text/html' width='%f' height='%f' src='%@?rel=0&showinfo=0&enablejsapi=1' style='text-align:center; border: 6px solid; border-radius:5px; background-color:transparent;' rel=nofollow allowfullscreen></iframe></body></html>", 628.0f, 352.0f, urlString];

Anda dapat mengabaikan hal styling dalam string yang disiapkanHTML. Aspek pentingnya adalah:

• Menggunakan API untuk membuat objek "YT.player". Pada satu titik, saya hanya memiliki video di tag iFrame dan itu mencegah saya untuk mereferensikan objek "player" nanti dengan JS.
• Saya telah melihat beberapa contoh di web di mana tag skrip pertama (yang memiliki tag src iframe_api) dihilangkan, tapi saya pasti membutuhkannya agar ini berfungsi.
• Membuat variabel "player" di awal skrip API. Saya juga telah melihat beberapa contoh yang menghilangkan baris itu.
• Menambahkan tag id ke iFrame untuk direferensikan dalam skrip API. Saya hampir melupakan bagian itu.
• Menambahkan "enablejsapi = 1" di akhir tag src iFrame. Itu membuat saya berhenti sebentar, karena saya awalnya memilikinya sebagai atribut tag iFrame, yang tidak berfungsi / tidak berfungsi untuk saya.

Saat saya perlu menjeda video, saya hanya menjalankan ini:

[webView stringByEvaluatingJavaScriptFromString:@"player.pauseVideo();"];

Semoga membantu!

Ini berfungsi dengan baik bagi saya dengan pemutar YT

 createPlayer(): void {
  return new window['YT'].Player(this.youtube.playerId, {
  height: this.youtube.playerHeight,
  width: this.youtube.playerWidth,
  playerVars: {
    rel: 0,
    showinfo: 0
  }
});
}

this.youtube.player.pauseVideo ();

Jawaban yang lebih ringkas, elegan, dan aman: tambahkan “? Enablejsapi = 1” di akhir URL video, lalu buat dan rangkai objek biasa yang mewakili perintah jeda:

const YouTube_pause_video_command_JSON = JSON.stringify(Object.create(null, {
    "event": {
        "value": "command",
        "enumerable": true
    },
    "func": {
        "value": "pauseVideo",
        "enumerable": true
    }
}));

Gunakan Window.postMessagemetode untuk mengirim string JSON yang dihasilkan ke dokumen video yang disematkan:

// |iframe_element| is defined elsewhere.
const video_URL = iframe_element.getAttributeNS(null, "src");
iframe_element.contentWindow.postMessage(YouTube_pause_video_command_JSON, video_URL);

Pastikan Anda menentukan URL video untuk argumen Window.postMessagemetode tersebut targetOriginguna memastikan bahwa pesan Anda tidak akan dikirim ke penerima yang tidak diinginkan.