จะหยุดเล่น YouTube ชั่วคราวเมื่อซ่อน iframe ได้อย่างไร

Question 1

ฉันมี div ที่ซ่อนอยู่ซึ่งมีวิดีโอ YouTube ในไฟล์<iframe>. เมื่อผู้ใช้คลิกที่ลิงค์ div นี้จะปรากฏให้เห็นผู้ใช้ควรจะเล่นวิดีโอได้

เมื่อผู้ใช้ปิดแผงวิดีโอควรหยุดเล่น ฉันจะบรรลุเป้าหมายนี้ได้อย่างไร?

รหัส:

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

Question 2

วิธีที่ง่ายที่สุดในการนำพฤติกรรมนี้ไปใช้คือการเรียกใช้pauseVideoและplayVideoวิธีการเมื่อจำเป็น แรงบันดาลใจจากผลลัพธ์ของคำตอบก่อนหน้าของฉันฉันได้เขียนฟังก์ชันที่ไม่มีปลั๊กอินเพื่อให้บรรลุพฤติกรรมที่ต้องการ

การปรับเปลี่ยนเพียงอย่างเดียว:

ฉันได้เพิ่มฟังก์ชั่น toggleVideo
ฉันได้เพิ่ม?enablejsapi=1URL ของ YouTube เพื่อเปิดใช้งานคุณลักษณะนี้

การสาธิต: http://jsfiddle.net/ZcMkt/
รหัส:

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

Question 3

นี่คือ jQuery ใช้กับคำตอบของ RobW สำหรับการใช้การซ่อน / หยุด iframe ชั่วคราวในหน้าต่างโมดอล:

    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":""}', '*');
        }
    }

องค์ประกอบ html ที่อ้างถึงคือ modal div เอง (# video-div) ที่เรียกเมธอด show / hide และ iframe (# video-iframe) ซึ่งมี url ของวิดีโอเป็น src = "" และมีคำต่อท้ายenablejsapi = 1 เหรอ? ซึ่งช่วยให้สามารถควบคุมโปรแกรมเล่นได้ (เช่น

สำหรับข้อมูลเพิ่มเติมเกี่ยวกับ html โปรดดูคำตอบของ RobW

Question 4

นี่คือตัวอย่าง jQuery ง่ายๆในการหยุดวิดีโอทั้งหมดในหน้าชั่วคราวโดยอ้างอิงจากคำตอบของ RobW และ DrewT:

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

Question 5

วิธีง่ายๆคือการตั้งค่า src ของวิดีโอเป็นอะไรเลยเพื่อที่วิดีโอจะหมดไปในขณะที่ซ่อนอยู่จากนั้นตั้งค่า src กลับไปที่วิดีโอที่คุณต้องการเมื่อคุณคลิกที่ลิงค์ที่เปิดวิดีโอ .. เพื่อทำ เพียงตั้งค่า id เป็น iframe ของ youtube และเรียกใช้ฟังก์ชัน src โดยใช้ id นั้นดังนี้

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

Question 6

เนื่องจากคุณต้องตั้งค่า?enablejsapi=trueใน src ของ iframe ก่อนจึงจะสามารถใช้คำสั่งplayVideo/ ที่pauseVideoกล่าวถึงในคำตอบอื่น ๆได้การเพิ่มสิ่งนี้โดยใช้โปรแกรมผ่าน Javascript อาจเป็นประโยชน์ (โดยเฉพาะอย่างยิ่งหากคุณต้องการให้พฤติกรรมนี้นำไปใช้กับวิดีโอที่ฝังโดยอื่น ๆ ผู้ใช้ที่เพิ่งตัดและวางโค้ดฝัง YouTube) ในกรณีนี้สิ่งนี้อาจเป็นประโยชน์:

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";
    }
  }
}

... หากคุณเรียกใช้สิ่งนี้document.readyiframe ทั้งหมดใน div ที่มีคลาสของ "วิดีโอ" จะenablejsapi=trueถูกเพิ่มลงในซอร์สซึ่งจะทำให้คำสั่ง playVideo / pauseVideo ทำงานได้

(nb. ตัวอย่างนี้ใช้ jQuery สำหรับหนึ่งบรรทัดที่กำหนดvar iframesแต่วิธีการทั่วไปควรใช้ได้ดีกับ Javascript แท้หากคุณไม่ได้ใช้ jQuery)

Question 7

คุณสามารถหยุดวิดีโอได้โดยเรียกใช้stopVideo()เมธอดบนอินสแตนซ์โปรแกรมเล่น YouTube ก่อนที่จะซ่อน div เช่น

player.stopVideo()

ดูรายละเอียดเพิ่มเติมได้ที่นี่: http://code.google.com/apis/youtube/js_api_reference.html#Playback_controls

Question 8

วิธีของ RobW ทำงานได้ดีสำหรับฉัน สำหรับคนที่ใช้ jQuery นี่คือเวอร์ชันที่เรียบง่ายที่ฉันใช้:

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

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

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

ในตัวอย่างนี้ "video_player" คือ div พาเรนต์ที่มี iframe

Question 9

ฉันต้องการแบ่งปันวิธีแก้ปัญหาที่ฉันคิดขึ้นโดยใช้ jQuery ที่ใช้งานได้หากคุณมีวิดีโอ YouTube หลายรายการฝังอยู่ในหน้าเดียว ในกรณีของฉันฉันได้กำหนดป๊อปอัปโมดอลสำหรับแต่ละวิดีโอดังนี้:

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

ในกรณีนี้ videoModalXX แสดงรหัสเฉพาะสำหรับวิดีโอ จากนั้นฟังก์ชั่นต่อไปนี้จะหยุดวิดีโอ:

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

ฉันชอบวิธีนี้เพราะทำให้วิดีโอหยุดชั่วคราวจากจุดที่คุณค้างไว้เผื่อว่าคุณต้องการย้อนกลับไปดูในภายหลัง มันทำงานได้ดีสำหรับฉันเพราะมันกำลังมองหา iframe ภายในโมดอลวิดีโอที่มีรหัสเฉพาะ ไม่จำเป็นต้องใช้รหัสองค์ประกอบพิเศษของ YouTube หวังว่าจะมีคนพบว่าสิ่งนี้มีประโยชน์เช่นกัน

Question 10

เพียงแค่ลบ src ของ iframe

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

Question 11

คำตอบของ Rob W ช่วยให้ฉันทราบวิธีหยุดวิดีโอชั่วคราวบน iframe เมื่อแถบเลื่อนซ่อนอยู่ แต่ฉันต้องการการปรับเปลี่ยนบางอย่างก่อนที่จะสามารถใช้งานได้ นี่คือตัวอย่าง html ของฉัน:

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

สังเกตว่าสิ่งนี้ใช้ได้กับlocalhostsและตามที่ Rob W กล่าวถึง " enablejsapi = 1 " ถูกเพิ่มไว้ที่ท้าย URL ของวิดีโอ

ต่อไปนี้เป็นไฟล์ JS ของฉัน:

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":""}', '*');
};

นอกจากนี้เพื่อเป็นตัวอย่างที่ง่ายกว่าให้ลองใช้JSFiddle

Question 12

วิธีนี้ต้องใช้ jQuery ขั้นแรกเลือก iframe ของคุณ:

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

ตอนนี้คุณเลือกปุ่มเล่น / หยุดชั่วคราวของ iframe นี้แล้วคลิก

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

ฉันหวังว่ามันจะช่วยคุณได้

Question 13

คำตอบของ RobW ที่นี่และที่อื่น ๆ มีประโยชน์มาก แต่ฉันพบว่าความต้องการของฉันง่ายกว่ามาก ฉันตอบสิ่งนี้ไว้ที่อื่นแล้ว แต่บางทีมันอาจจะมีประโยชน์ที่นี่ด้วย

ฉันมีวิธีการที่ฉันสร้างสตริง HTML เพื่อโหลดใน 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];

คุณสามารถเพิกเฉยต่อการจัดแต่งทรงผมในสตริง HTML ที่เตรียมไว้ ประเด็นสำคัญ ได้แก่

ใช้ API เพื่อสร้างออบเจ็กต์ "YT.player" จนถึงจุดหนึ่งฉันมีเพียงวิดีโอในแท็ก iFrame และทำให้ฉันไม่สามารถอ้างอิงออบเจ็กต์ "player" ในภายหลังด้วย JS ได้
ฉันเคยเห็นตัวอย่างบางส่วนบนเว็บที่แท็กสคริปต์แรก (แท็กที่มีแท็ก iframe_api src) ถูกละไว้ แต่ฉันต้องการสิ่งนั้นอย่างแน่นอนเพื่อให้การทำงานนี้ทำงานได้
การสร้างตัวแปร "player" ที่จุดเริ่มต้นของสคริปต์ API ฉันยังได้เห็นตัวอย่างบางส่วนที่ละเว้นบรรทัดนั้น
การเพิ่มแท็ก id ให้กับ iFrame เพื่ออ้างอิงในสคริปต์ API ฉันเกือบลืมส่วนนั้นไปแล้ว
การเพิ่ม "enablejsapi = 1" ต่อท้ายแท็ก iFrame src นั่นทำให้ฉันหยุดพักชั่วคราวเนื่องจากตอนแรกฉันมีมันเป็นแอตทริบิวต์ของแท็ก iFrame ซึ่งไม่ได้ผล / ไม่ได้ผลสำหรับฉัน

เมื่อฉันต้องการหยุดวิดีโอชั่วคราวฉันจะเรียกใช้สิ่งนี้:

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

หวังว่าจะช่วยได้!

Question 14

สิ่งนี้ทำงานได้ดีสำหรับฉันกับผู้เล่น 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 ();

Question 15

คำตอบที่กระชับหรูหราและปลอดภัยยิ่งขึ้น: เพิ่ม“? enablejsapi = 1” ต่อท้าย URL ของวิดีโอจากนั้นสร้างและผูกวัตถุธรรมดาที่แทนคำสั่งหยุดชั่วคราว:

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

ใช้Window.postMessageวิธีการส่งสตริง JSON ที่เป็นผลลัพธ์ไปยังเอกสารวิดีโอที่ฝัง:

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

ตรวจสอบให้แน่ใจว่าคุณระบุ URL ของวิดีโอสำหรับอาร์กิวเมนต์Window.postMessageของเมธอดtargetOriginเพื่อให้แน่ใจว่าข้อความของคุณจะไม่ถูกส่งไปยังผู้รับที่ไม่ได้ตั้งใจ