Làm cách nào để tạm dừng trình phát YouTube khi ẩn iframe?

Tôi có một div ẩn chứa video YouTube trong <iframe>. Khi người dùng nhấp vào một liên kết, div này sẽ hiển thị, người dùng sau đó sẽ có thể phát video.

Khi người dùng đóng bảng điều khiển, video sẽ dừng phát lại. Làm thế nào tôi có thể đạt được điều này?

Mã:

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

Cách dễ nhất để thực hiện hành vi này là gọi các phương thức pauseVideovà playVideokhi cần thiết. Lấy cảm hứng từ kết quả của câu trả lời trước của tôi , tôi đã viết một hàm không plugin để đạt được hành vi mong muốn.

Các điều chỉnh duy nhất:

• Tôi đã thêm một chức năng, toggleVideo
• Tôi đã thêm vào ?enablejsapi=1URL của YouTube, để kích hoạt tính năng

Demo: http://jsfiddle.net/ZcMkt/
Mã:

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

Đây là câu trả lời của jQuery về câu trả lời của RobW để sử dụng ẩn / tạm dừng iframe trong cửa sổ phương thức:

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

Các phần tử html được đề cập đến là bản thân modal div (# video-div) gọi các phương thức show / hide và iframe (# video-iframe) có url video là src = "" và có hậu tố enablejsapi = 1 ? cho phép điều khiển trình phát theo chương trình (ví dụ:

Để biết thêm về html, hãy xem câu trả lời của RobW.

Đây là một đoạn mã jQuery đơn giản để tạm dừng tất cả các video trên trang dựa trên câu trả lời của RobW và DrewT:

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

Này, một cách đơn giản là chỉ cần đặt src của video thành không, để video sẽ giải mã trong khi nó bị ẩn, sau đó đặt src trở lại video bạn muốn khi bạn nhấp vào liên kết mở video .. để làm chỉ cần đặt một id cho iframe youtube và gọi hàm src bằng id đó như sau:

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

Vì bạn cần phải đặt ?enablejsapi=truetrong src của iframe trước khi có thể sử dụng các lệnh playVideo/ pauseVideođược đề cập trong các câu trả lời khác , nên có thể hữu ích nếu bạn thêm mã này theo chương trình thông qua Javascript (đặc biệt là nếu bạn muốn hành vi này áp dụng cho các video được nhúng bởi khác người dùng vừa cắt và dán mã nhúng YouTube). Trong trường hợp đó, một cái gì đó như thế này có thể hữu ích:

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

... nếu bạn bật điều này document.readythì tất cả iframe trong div có lớp "video" sẽ enablejsapi=trueđược thêm vào nguồn của chúng, điều này cho phép các lệnh playVideo / pauseVideo hoạt động trên chúng.

(nb. ví dụ này sử dụng jQuery cho một dòng được đặt var iframes, nhưng phương pháp chung sẽ hoạt động tốt với Javascript thuần nếu bạn không sử dụng jQuery).

Bạn có thể dừng video bằng cách gọi stopVideo()phương thức trên phiên bản trình phát YouTube trước khi ẩn ví dụ div

player.stopVideo()

Để biết thêm chi tiết, xem tại đây: http://code.google.com/apis/youtube/js_api_reference.html#Playback_controls

Cách của RobW rất hiệu quả đối với tôi. Đối với những người sử dụng jQuery, đây là một phiên bản đơn giản mà tôi đã sử dụng:

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

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

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

Trong ví dụ này "video_player" là div chính chứa iframe.

Tôi muốn chia sẻ một giải pháp mà tôi đã đưa ra bằng cách sử dụng jQuery hoạt động nếu bạn có nhiều video YouTube được nhúng trên một trang. Trong trường hợp của tôi, tôi đã xác định một cửa sổ bật lên theo phương thức cho mỗi video như sau:

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

Trong trường hợp này, videoModalXX đại diện cho một id duy nhất cho video. Sau đó, chức năng sau sẽ dừng video:

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

Tôi thích cách tiếp cận này vì nó giúp video tạm dừng ở nơi bạn đã dừng lại trong trường hợp bạn muốn quay lại và tiếp tục xem sau. Nó hoạt động tốt đối với tôi vì nó đang tìm kiếm iframe bên trong phương thức video với một id cụ thể. Không yêu cầu ID phần tử YouTube đặc biệt. Hy vọng rằng ai đó cũng sẽ thấy điều này hữu ích.

chỉ cần loại bỏ src của iframe

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

Câu trả lời của Rob W đã giúp tôi tìm ra cách tạm dừng video trên iframe khi thanh trượt bị ẩn. Tuy nhiên, tôi cần một số sửa đổi trước khi có thể hoạt động. Đây là đoạn mã html của tôi:

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

Quan sát rằng điều này hoạt động trên máy chủ cục bộ và cũng như Rob W đã đề cập " enablejsapi = 1 " đã được thêm vào cuối URL video.

Sau đây là tệp JS của tôi:

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

Ngoài ra, như một ví dụ đơn giản hơn, hãy kiểm tra điều này trên JSFiddle

Cách tiếp cận này yêu cầu jQuery. Đầu tiên, chọn iframe của bạn:

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

Bây giờ bạn chọn nút play / pause của iframe này và nhấp vào nó

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

Tôi hy vọng nó sẽ giúp bạn.

Câu trả lời của RobW ở đây và những nơi khác rất hữu ích, nhưng tôi thấy nhu cầu của mình trở nên đơn giản hơn nhiều. Tôi đã trả lời điều này ở nơi khác , nhưng có lẽ nó cũng sẽ hữu ích ở đây.

Tôi có một phương pháp trong đó tôi tạo một chuỗi HTML để tải trong 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];

Bạn có thể bỏ qua nội dung tạo kiểu trong chuỗiHTML đã chuẩn bị. Các khía cạnh quan trọng là:

• Sử dụng API để tạo đối tượng "YT.player". Tại một thời điểm, tôi chỉ có video trong thẻ iFrame và điều đó đã ngăn tôi tham chiếu đối tượng "player" sau này với JS.
• Tôi đã thấy một vài ví dụ trên web trong đó thẻ script đầu tiên (thẻ có iframe_api src) bị bỏ qua, nhưng tôi chắc chắn cần điều đó để làm việc này.
• Tạo biến "trình phát" ở đầu tập lệnh API. Tôi cũng đã thấy một số ví dụ đã bỏ qua dòng đó.
• Thêm thẻ id vào iFrame để được tham chiếu trong tập lệnh API. Tôi gần như quên mất phần đó.
• Thêm "enablejsapi = 1" vào cuối thẻ src iFrame. Điều đó khiến tôi bị treo trong một thời gian, vì ban đầu tôi coi nó như một thuộc tính của thẻ iFrame, thẻ này không hoạt động / không hoạt động đối với tôi.

Khi cần tạm dừng video, tôi chỉ cần chạy như sau:

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

Hy vọng rằng sẽ giúp!

Điều này đang hoạt động tốt với tôi với trình phát 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 ();

Một câu trả lời ngắn gọn, trang nhã và an toàn hơn: thêm “? Enablejsapi = 1” vào cuối URL video, sau đó xây dựng và xâu chuỗi một đối tượng bình thường đại diện cho lệnh tạm dừng:

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

Sử dụng Window.postMessagephương thức để gửi chuỗi JSON kết quả đến tài liệu video được nhúng:

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

Đảm bảo bạn chỉ định URL video cho đối số Window.postMessagecủa phương pháp targetOriginđể đảm bảo rằng thư của bạn sẽ không được gửi đến bất kỳ người nhận không mong muốn nào.