Tạm dừng nhúng Youtube khi phát Soundcloud nhúng

Question

Tôi có một blog nhạc chứa nhiều trình phát âm thanh và trình phát âm thanh nhúng khác nhau.

Điều tôi muốn làm là ngăn không cho âm thanh phát cùng một lúc. Nói cách khác trong khi tôi đang chơi một video youtube, nếu tôi bấm để chơi soundcloud nhúng tôi muốn người chơi youtube tạm dừng và ngược lại.

Tôi đã phát triển mã tạm dừng trình phát trực tuyến youtube nếu tôi nhấp để phát một trình phát youtube khác (soundcloud đã thực hiện điều này vốn có). Tôi chỉ cần làm cho nó tương thích chéo. Thực sự sẽ đánh giá cao một số trợ giúp, cảm ơn.

var playerCurrentlyPlaying = null; 
var players = {} 
YT_ready(function() { 
    $(".youtube_embed").each(function() { 
     var identifier = this.id; 
     var frameID = getFrameID(identifier); 
     if (frameID) { 
      players[frameID] = new YT.Player(frameID, { 
       events: { 
        "onStateChange": function(event){ 
         if (event.data == YT.PlayerState.PLAYING) 
         { 
          if(playerCurrentlyPlaying != null && 
           playerCurrentlyPlaying != frameID) 
          callPlayer(playerCurrentlyPlaying , 'pauseVideo'); 
          playerCurrentlyPlaying = frameID; 
         } 
        } 
       } 
      }); 
     } 
    }); 
}); 

Tôi đã sử dụng chức năng từ các nguồn: Listening for Youtube Event in JavaScript or jQuery

YouTube iframe API: how do I control a iframe player that's already in the HTML?

YouTube API Target (multiple) existing iframe(s)

rendered HTML sử dụng UniqueID():

<span class="soundcloud_embed" id="soundcloud_post_312"> 
    <iframe id="ui-id-1" width="100%" height="166" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F103518792&show_artwork=true&secret_token=s-LnOTK"></iframe> 
</span> 

<span class="youtube_embed" id="youtube_post_309"> 
    <iframe id="ui-id-2" width="528" height="190" src="//www.youtube.com/embed/Y3CYKXBEtf0" frameborder="0" allowfullscreen></iframe> 
</span> 

Answer 1

Trước hết, mọi thứ sẽ được đơn giản hóa rất nhiều nếu bạn có thể để có được một ID vào iframe bản thân, như thế này:

<span class="soundcloud_embed"> 
    <iframe width="100%" height="166" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F4997623" id="sound1"></iframe> 
</span> 
<span class="soundcloud_embed"> 
    <iframe width="100%" height="166" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F105153133" id="sound2"></iframe> 
</span> 
<span class="youtube_embed"> 
    <iframe width="400" height="225" src="//www.youtube.com/embed/tv8WgLEIPBg" id="vid1" frameborder="0" allowfullscreen></iframe> 
</span> 
<span class="youtube_embed"> 
    <iframe width="400" height="225" src="//www.youtube.com/embed/FmICU1gMAAw" id="vid2" frameborder="0" allowfullscreen></iframe> 
</span> 

Nếu bạn không muốn hack gem auto_html mà bạn đề cập để nhận ID, bạn có thể sử dụng chức năng .uniqueId() của jquery để tạo chúng trên tất cả iframe hoặc sử dụng phương thức trợ giúp getFrameID() từ bài đăng bạn đã đề cập (và dường như đã sử dụng).

Để dễ dàng nhận hai API (Youtube và Soundcloud) để có thể trả lời các sự kiện của nhau, bạn có thể sử dụng một vài đối tượng điều khiển để theo dõi người chơi nào đang ở trên trang của bạn và cái nào trong số họ hiện đang phát (chiến lược này tương tự như chiến lược mà bạn đã giới thiệu, nhưng được mở rộng để có thể theo dõi người chơi nào thuộc về API nào). Với tính năng này, hãy xác định hàm tạm dừng chung đóng vai trò như một trình bao bọc đơn giản cho cả hai API:

var playerCurrentlyPlaying = {"api":null,"frameID":null}; 
var players = {"yt":{},"sc":{}}; 

pauseCurrentPlayer=function() { 
    var api=playerCurrentlyPlaying["api"], 
     frameid=playerCurrentlyPlaying["frameID"]; 

    switch(api) { 
    case "yt": 
     players[api][frameid].pauseVideo(); 
     break; 
    case "sc": 
     players[api][frameid]["widget"].pause(); 
     break; 
    } 
}; 

Tiếp theo, bạn sẽ muốn xác định hai hàm riêng biệt; video đầu tiên sẽ được gọi bất cứ khi nào sự kiện phát trên YouTube được ghi lại và sự kiện thứ hai bất cứ khi nào sự kiện phát Soundcloud được ghi lại. Hiện tại, Soundcloud HTML5 Widget có một vài lỗi buộc buộc phải bao gồm một số hack khá xấu - cụ thể là sự kiện Play đôi khi không được kích hoạt khi bạn phát âm thanh Soundcloud lần đầu tiên. May mắn thay, sự kiện Play_Progress là, vì vậy chúng tôi có thể tận dụng điều đó, nhưng cũng phải bao gồm một workaround vì vậy nó không tạo ra một tình trạng chủng tộc khi tạm dừng một âm thanh và bắt đầu một video:

onYTPlay =function(frameid) { 
    if (playerCurrentlyPlaying["frameID"]!=frameid && playerCurrentlyPlaying["frameID"]!=null) { 
    pauseCurrentPlayer(); 
    } 
    playerCurrentlyPlaying["api"]="yt"; 
    playerCurrentlyPlaying["frameID"]=frameid; 
}; 

onSCPlay=function(frameid,event) { 
    if (event==SC.Widget.Events.PLAY||players["sc"][frameid]["firstplay"]==true) { 
    if (playerCurrentlyPlaying["api"]=="yt") { // because any soundcloud player will be automatically paused by another soundcloud event, we only have to worry if the currently active player is Youtube 
     pauseCurrentPlayer(); 
    } 
    playerCurrentlyPlaying["api"]="sc"; 
    playerCurrentlyPlaying["frameID"]=frameid; 
    players["sc"][frameid]["firstplay"]=false; 
    } 
}; 

Cuối cùng, sau đó bạn có thể thêm móc của bạn để nhúng Youtube và nhúng Soundcloud, ghi nhớ các hack chúng ta phải đưa vào cho sự kiện Soundcloud Play.Đừng quên để nhúng API Soundcloud Widget (<script src="w.soundcloud.com/player/api.js"; type="text/javascript"></script>), và sau đó sử dụng mã này để làm cam kết ràng buộc của bạn:

var tag = document.createElement('script'); 
tag.src = "https://www.youtube.com/iframe_api"; 
var firstScriptTag = document.getElementsByTagName('script')[0]; 
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); 

function onYouTubeIframeAPIReady() { 
    $(".youtube_embed iframe").each(function() { 
    players["yt"][$(this).attr('id')] = new YT.Player($(this).attr('id'), { 
     events: { 'onStateChange': onYTPlayerStateChange } 
    }); 
    }); 
} 

onYTPlayerStateChange = function(event) { 
    if (event.data==YT.PlayerState.PLAYING) { 
    onYTPlay(event.target.a.id); 
    } 
}; 

(function(){ 
    $(".soundcloud_embed iframe").each(function() { 
     var frameid=$(this).attr('id'); 
     players["sc"][frameid]={}; 
     players["sc"][frameid]={"widget":SC.Widget(document.getElementById(frameid)),"firstplay":true}; 
     players["sc"][frameid]["widget"].bind(SC.Widget.Events.READY, function() { 
     players["sc"][frameid]["widget"].bind(SC.Widget.Events.PLAY, function() { 
     onSCPlay(frameid,SC.Widget.Events.PLAY); 
     }); 
     players["sc"][frameid]["widget"].bind(SC.Widget.Events.PLAY_PROGRESS, function() { 
     onSCPlay(frameid,SC.Widget.Events.PLAY_PROGRESS); 
     }); 
    }); 
    }); 
    }()); 

Cách tiếp cận này được thiết lập để xử lý nhiều cầu thủ của cả hai API, và nên được mở rộng nếu decently bạn muốn hỗ trợ các tiện ích phương tiện nhúng khác (miễn là chúng phơi bày một sự kiện khi chúng bắt đầu phát và chúng có khả năng tạm dừng người chơi theo chương trình).

Answer 2

nó possi ble. kiểm tra phụ tùng api sân chơi. bạn có thể xem tất cả các sự kiện của tiểu bang từ tiện ích iframe soundcloud. điều này có thể được thực hiện trên flash nhúng quá. https://w.soundcloud.com/player/api_playground.html

xem cho SC.Widget.Events.PLAY {"loadedProgress":0,"currentPosition":0,"relativePosition":0} sự kiện trên bắt đầu chơi