Bagaimana cara menjeda pemutar YouTube saat menyembunyikan iframe?

86

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 -->
javascript  youtube-api  youtube-javascript-api 
— 0161-Jon
sumber
Saya tidak yakin, tetapi Anda mungkin harus menemukan cara untuk menghentikan video atau menghapus video dari div dan tidak hanya menyembunyikannya ..
— aniri
kamu harus menerima jawabannya.
— Activatedgeek

Jawaban:

189

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>
— Rob W.
sumber
1
Yup pasti membutuhkan kotak centang hijau jika ini berhasil. Saya mengambil solusi ini juga - hal yang bagus, saya memiliki bingkai video ini dalam Accordion jQueryUI jadi saya perlu melampirkannya ke setiap acara pemicu.
— jeffkee
Hanya ingin menunjukkan bahwa, sayangnya, API YouTube membuat Anda menggunakan tanda kutip ganda untuk pesan yang dikirim melalui postMessage. Anda tidak dapat beralih ke tanda kutip ganda luar dan tanda kutip tunggal bagian dalam, misalnya.
— Yordania
1
@Jordan Itu sangat masuk akal karena pesannya diharapkan JSON. JSON, menurut definisi, menggunakan tanda kutip ganda untuk mengutip kunci dan nilai.
— Rob W
2
Jika ada yang tertarik, saya memperbarui kode untuk berhenti memutar video saat Anda mengklik tombol "Tutup" pada modal bootstrap 3. $ ("# MyModal-close") .click (function () {var div = document.getElementById ("MyModal-videoWrapper"); var iframe = div.getElementsByTagName ("iframe") [0] .contentWindow; iframe.postMessage ('{"event": "command", "func": "' + 'pauseVideo' + '", "args": ""}', '*');});
— Ryan Walton
10
Harap dicatat Anda harus menambahkan ?enablejsapi=1ke URL embedding iframe seperti ini: <iframe class="embed-responsive-item" src="//www.youtube.com/embed/WIZUeIDFALw?html5=1&enablejsapi=1" allowfullscreen></iframe>atau tidak akan berfungsi :)
— dineth
23

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.

— DrewT
sumber
5
Tingkat keterbacaan apa yang mengubah? bersyarat jika / lain tetapi terima kasih telah memulai saya dalam hal ini. Saya hanya merasa saya memiliki sesuatu untuk ditambahkan secara valid.
— DrewT
15

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":""}', '*')
});
— kuartarian
sumber
jika Anda tidak ingin menggunakan jQuery, kode di dalam fungsi 'each' adalah sama setelah Anda membatalkan referensi objek jQuery. yaitu node.contentWindow. ...
— mattdlockyer
Bagaimana cara membalikkan ini untuk memutar lagi saat video ditampilkan lagi?
— Carl Papworth
Cukup ganti "pauseVideo" dengan "playVideo". Contoh: jsfiddle.net/ora2kqzq/1
— kuartarian
Itu tidak lagi berfungsi ... bahkan ketika saya mencoba {"event":"command","func":"playVideo","args":[],"id":1,"channel":"widget"}setelah {"event":"listening","id":1,"channel":"widget"}itu apa yang diposkan oleh api iframe YT.Player ke youtube embed.
— NoBugs
9

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>
— Paula
sumber
4
Peringatan: Modifikasi pada iframe's srcdengan javascript akan secara tidak sengaja mendorong window.history, menyebabkan masalah Tombol Kembali.
— Jordan Arseno
Terima kasih Jordan! Saya sendiri baru mulai menggunakan jawaban ini dan tidak menyadari perilaku ini. Lebih baik mengetahui sekarang daripada nanti :)
— MMachinegun
Peringatan yang adil bagi siapa pun yang mencoba metode ini: Ini dapat menyebabkan kelambatan yang sangat mencolok jika Anda menggunakan ini untuk beralih di antara div yang berisi iframe embed untuk YouTube. Hati-hati.
— Muhammad Abdul-Rahim
6

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

— Nick F.
sumber
4

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.

— skribbz14.dll
sumber
4

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.

— Poldon
sumber
Ini bekerja dengan baik tanpa banyak kode. Saya memiliki beberapa video YT di halaman dan hanya menunjukkan jempol YT dan membutuhkan solusi stop / pause. Dan dengan mengubah pauseVideo menjadi playVideo, saya dapat memulai video saat diperluas menjadi lebar kolom penuh
— WebDude0482
2

hapus saja src dari iframe

$('button.close').click(function(){
    $('iframe').attr('src','');;
});
— rakesh kejriwal
sumber
Tapi dia mungkin ingin terus bermain saat pengguna mengklik buka.
— Coda Chang
Saudaraku, onclick lagi tambahkan src melalui jquery, itu akan bekerja
— rakesh kejriwal
1

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

— Fahim Hossain
sumber
1

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.

— hong4rc
sumber
0

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!

— Brian
sumber
Jika Anda bertanya-tanya mengapa tidak ada suara positif, itu karena itu bukan javascript sehingga tidak berguna untuk kasus penggunaan OP yang merupakan iframe yang merujuk pada url embed youtube bukan aplikasi iOS.
— Vroo
@Vroo Ya, saya mengerti. Hanya ingin meninggalkan jawaban ini di sini seandainya orang iOS lain datang ke sini dan menemukan pertanyaan ini seperti yang saya lakukan.
— Brian
0

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 ();

— HuyLe
sumber
0

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.

— Patrick Dark
sumber
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.