Question

我在一个页面上有多个来自不同网站（Youtube，Vimeo，Dailymotion等）的视频。我想给用户一个类似于任何桌面媒体播放器的中央控制面板，包括暂停，播放，下一个视频，上一个视频和音量控制。

我怎样才能做到这一点？它甚至可能吗？我知道Youtube有api，但其他网站怎么样？是否有适用于所有这些API的通用API？

由于

Answer 1

<script type="text/javascript" src="http://www.youtube.com/player_api"></script>
<script>


    var player1st;
    var player2nd;
    function onYouTubePlayerAPIReady() { 
    player1st = new YT.Player('frame1st', {events: {'onStateChange': onPlayerStateChange}}); 
    player2nd = new YT.Player('frame2nd', {events: {'onStateChange': onPlayerStateChange}});
        }


    //function onYouTubePlayerAPIReady() { player2nd = new YT.Player('frame2nd', {events: {'onStateChange': onPlayerStateChange}}); }


    function onPlayerStateChange(event) {
    alert(event.target.getPlayerState());

    }

</script>






<iframe id="frame1st" style="position: relative; height: 220px; width: 400px" src="http://www.youtube.com/embed/1g30Xyh6Wqc?rel=0&amp;enablejsapi=1"></iframe><br>
<a href="javascript: void(0)" onclick="player1st.playVideo(); return false">play1st</a><br>
<a href="javascript: void(0)" onclick="player1st.pauseVideo(); return false">pause1st</a><br>
<a href="javascript: void(0)" onclick="player1st.stopVideo(); return false">stop1st</a>




<iframe id="frame2nd" style="position: relative; height: 220px; width: 400px" src="http://www.youtube.com/embed/T39hYJAwR40?rel=0&amp;enablejsapi=1"></iframe><br>

<a href="javascript: void(0)" onclick="player2nd.playVideo(); return false">play2nd</a><br>
<a href="javascript: void(0)" onclick="player2nd.pauseVideo(); return false">pause2nd</a><br>
<a href="javascript: void(0)" onclick="player2nd.stopVideo(); return false">stop2nd</a>

在单页中控制多个嵌入视频

1 个答案: