複数のメッセージバスイベントを監視する

メッセージバスを使用して複数のイベントを監視することができます。

少し高度な次の例は、メッセージバスを使用して複数のイベントを監視し、それぞれの イベントに対して確認メッセージを表示する方法を説明しています。

: 次の例では、V3 Flashプレイヤー用と同じコードが使用できます。ただしhtml5-priorityフラグを 削除してください。

参考例:複数のイベントを監視する

次の例はメッセージバスを使用してイベントを監視する方法を説明しています。

<!DOCTYPE HTML>
<html>
<head>
 <meta http-equiv="Content-type" content="text/html; charset=utf-8">
 <title>Keynote V3 Demo</title>
 <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/
 jquery.min.js'></script>
</head>

<body>

 <div id='events'>
   <p>Loading</p>
 </div>

 <script src='http://player.ooyala.com/v3/56b64d61eeb84e4bb58ff6aa68c4de32
 ?platform=html5-priority'></script>


 
 <div id="playerV3Container" style="width:500px; height:300px; 
 background:black;"></div>
 
 <script type="text/javascript">
   OO.ready(function() {
     $('#events').append("<p>OOReady</p>");

     window.oop = OO.Player.create('playerV3Container', 
     "45cmZqNDrKn7TvtpfGa9k9fQSeyK4VaI", {
       autoplay:true,
       onCreate: function(player) {
         var pastFirstSecond = false;
         player.mb.subscribe(OO.EVENTS.PLAYER_CREATED, 'keynote', function() 
         { $('#events').append("<p>PlayerCreated</p>"); });
         player.mb.subscribe(OO.EVENTS.PLAYBACK_READY, 'keynote', function() 
         { $('#events').append("<p>PlayerReady</p>"); });
         player.mb.subscribe(OO.EVENTS.PLAYING, 'keynote', function() 
         { $('#events').append("<p>Playing</p>"); });
         player.mb.subscribe(OO.EVENTS.PLAYHEAD_TIME_CHANGED, 'keynote', 
         function(event, time) {
           if(!pastFirstSecond && time > 1) {
             pastFirstSecond = true;
             $('#events').append("<p>Played 1 sec</p>");
           }
         });          
       }
     });
     
   });
 </script>

</body>
</html>

この記事はお役にたちましたか?