{"id":2559,"date":"2011-05-07T14:10:06","date_gmt":"2011-05-07T18:10:06","guid":{"rendered":"http:\/\/judykat.com\/ken-judy\/?p=2559"},"modified":"2012-05-19T09:12:31","modified_gmt":"2012-05-19T13:12:31","slug":"making-layered-brightcove-player-player-api-beml","status":"publish","type":"post","link":"https:\/\/judykat.com\/ken-judy\/making-layered-brightcove-player-player-api-beml\/","title":{"rendered":"Making a layered brightcove player using the player api and beml"},"content":{"rendered":"<p><script language=\"JavaScript\" type=\"text\/javascript\" src=\"\/ken-judy\/wp-content\/uploads\/2011\/05\/SnsCompactListVideoPlayer.js\"><\/script><script language=\"JavaScript\" type=\"text\/javascript\" src=\"http:\/\/admin.brightcove.com\/js\/BrightcoveExperiences_all.js\"><\/script><script type=\"text\/javascript\">\n\t\t\tfunction onTemplateLoaded(experienceID) \n\t\t\t{\n\t\t\t\tnew SnsCompactListVideoPlayer(experienceID);\n\t\t\t}\n<\/script><\/p>\n<div style=\"float:left;width:350px;height:350px;padding:0 12px 24px 0\">\n\t\t<!-- Start of Brightcove Player \n\t\tBy use of this code snippet, I agree to the Brightcove Publisher T and C \n\t\tfound at https:\/\/accounts.brightcove.com\/en\/terms-and-conditions\/. \n\t\t--><br \/>\n\t\t<object id=\"myExperience\" class=\"BrightcoveExperience\"><param name=\"bgcolor\" value=\"#FFFFFF\" \/><param name=\"width\" value=\"350\" \/><param name=\"height\" value=\"350\" \/><param name=\"playerID\" value=\"928770637001\" \/><param name=\"playerKey\" value=\"AQ~~,AAAAAGF4K-k~,kv7GNuiTi7AEbGZYfQB0wVDeVxzHgbxb\" \/><param name=\"isVid\" value=\"true\" \/><param name=\"isUI\" value=\"true\" \/><param name=\"dynamicStreaming\" value=\"true\" \/><\/object><!-- \n\t\tThis script tag will cause the Brightcove Players defined above it to be created as soon\n\t\tas the line is read by the browser. If you wish to have the player instantiated only after\n\t\tthe rest of the HTML is processed and the page load is complete, remove the line.\n\t\t--><script type=\"text\/javascript\">brightcove.createExperiences();<\/script><br \/>\n\t\t<!-- End of Brightcove Player --><\/div>\n<p>My goal was to build a Brightcove player that the layers the videoplayer and playlist in the same space with a way of toggling from the one to the other. I wanted to create minimal code external to the player and I didn&#8217;t want to do any custom Flash development.<\/p>\n<p><strong>Brightcove Experience Markup Language (BEML)<\/strong><\/p>\n<p>Brightcove offers their customers the ability to customize players via an XML extension called <a href=\"http:\/\/www.google.com\/url?sa=t&#038;source=web&#038;cd=1&#038;ved=0CBwQFjAA&#038;url=http%3A%2F%2Fsupport.brightcove.com%2Fen%2Fdocs%2Fcustomizing-players-beml&#038;ei=MUDDTdXnD5SjtgenuvGkBQ&#038;usg=AFQjCNFY6S3NzKfFy8SMCjUhYYc6Tq-3Sw&#038;sig2=-UdnIWkPCz69gw4Ne6YoPg\">BEML<\/a> which has a complete, if terse, <a href=\"http:\/\/docs.brightcove.com\/en\/beml\/index.html\">DTDDoc<\/a>.<\/p>\n<p>I started with the BEML for a standard player template <a href=\"http:\/\/support.brightcove.com\/en\/docs\/player-templates#vidDrop\">Video with Dropdown<\/a>.<\/p>\n<p>It contains the video player and the playlist layout I want to use. I basically want to stack the one on top of the other.<\/p>\n<p>I duplicated it, renamed it and then edited the BEML.<\/p>\n<p>BEML layout is pretty straightforward. It reminded me of java AWT. Components are laid out in canvasses with either vertical (VBox) or horizontal (HBox) arrangements. <\/p>\n<div  style=\"background-color: black; color: white; white-space: pre; width: 550px; overflow: auto; margin:0 0 12px 0;padding: 5px; font-size: 11px; font-family: courier new,monospace;\">\n&lt;Runtime&gt;<br \/>  &lt;Theme name=&#8221;Deluxe&#8221; style=&#8221;Light&#8221;\/&gt;<br \/>  &lt;Layout id=&#8221;application&#8221; boxType=&#8221;vbox&#8221;&gt;<br \/>    &lt;VideoPlayer id=&#8221;videoPlayer&#8221; height=&#8221;275&#8243; video=&#8221;{videoList.selectedItem}&#8221;\/&gt;<br \/>    &lt;Spacer height=&#8221;3&#8243;\/&gt;<br \/>    &lt;ComboBox id=&#8221;playlistCombo&#8221; height=&#8221;25&#8243;\/&gt;<br \/>    &lt;List id=&#8221;videoList&#8221; rowHeight=&#8221;75&#8243; automaticAdvance=&#8221;true&#8221; data=&#8221;{playlistCombo.selectedItem.videoDTOs}&#8221; itemLeading=&#8221;2&#8243; selectOnClick=&#8221;true&#8221;&gt;<br \/>      &lt;ListItem boxType=&#8221;hbox&#8221;&gt;<br \/>        &lt;Spacer width=&#8221;8&#8243;\/&gt;<br \/>        &lt;VBox width=&#8221;80&#8243; height=&#8221;74&#8243; vAlign=&#8221;middle&#8221;&gt;<br \/>          &lt;ThumbnailButton height=&#8221;60&#8243; data=&#8221;{currentItem}&#8221; source=&#8221;{currentItem.thumbnailURL}&#8221;\/&gt;<br \/>        &lt;\/VBox&gt;<br \/>        &lt;Spacer width=&#8221;7&#8243;\/&gt;<br \/>        &lt;VBox&gt;<br \/>          &lt;Spacer height=&#8221;3&#8243;\/&gt;<br \/>          &lt;TitleLabel height=&#8221;18&#8243; text=&#8221;{currentItem.displayName}&#8221; truncate=&#8221;true&#8221;\/&gt;<br \/>          &lt;Label height=&#8221;52&#8243; multiline=&#8221;true&#8221; text=&#8221;{currentItem.shortDescription}&#8221; truncate=&#8221;true&#8221;\/&gt;<br \/>        &lt;\/VBox&gt;<br \/>        &lt;Spacer width=&#8221;3&#8243;\/&gt;<br \/>      &lt;\/ListItem&gt;<br \/>    &lt;\/List&gt;<br \/>  &lt;\/Layout&gt;<br \/>&lt;\/Runtime&gt;\n<\/div>\n<p>And there is an element called ViewStack which takes any child components and layers them one on top of the other.<\/p>\n<p>So, the first change was to place the UI within a ViewStack and then make sure the children of that ViewStack are the layers I want (if I didn&#8217;t wrap the components correctly the playlist combobox would be one layer and the playlist another).<\/p>\n<div  style=\"background-color: black; color: white; white-space: pre; width: 550px; overflow: auto; margin:0 0 12px 0;padding: 5px; font-size: 11px; font-family: courier new,monospace;\">\n&lt;Runtime&gt;<br \/>  &lt;Theme name=&#8221;Deluxe&#8221; style=&#8221;Light&#8221;\/&gt;<br \/>  &lt;Layout id=&#8221;application&#8221; boxType=&#8221;vbox&#8221;&gt;<br \/>    <span style=\"color:red;\">&lt;ViewStack id=&#8221;viewStack&#8221; selectedIndex=&#8221;0&#8243;&gt;<\/span><br \/>     <span style=\"color:red;\"> &lt;VBox&gt;<\/span><br \/>        &lt;VideoPlayer id=&#8221;videoPlayer&#8221; height=&#8221;275&#8243; video=&#8221;{videoList.selectedItem}&#8221;\/&gt;<br \/>        &lt;Spacer height=&#8221;3&#8243;\/&gt;<br \/>      <span style=\"color:red;\">&lt;\/VBox&gt;<\/span><br \/>      <span style=\"color:red;\">&lt;VBox&gt;<\/span><br \/>        &lt;ComboBox id=&#8221;playlistCombo&#8221; height=&#8221;25&#8243;\/&gt;<br \/>        &lt;List id=&#8221;videoList&#8221; rowHeight=&#8221;75&#8243; automaticAdvance=&#8221;true&#8221; data=&#8221;{playlistCombo.selectedItem.videoDTOs}&#8221; itemLeading=&#8221;2&#8243; selectOnClick=&#8221;true&#8221;&gt;<br \/>          &lt;ListItem boxType=&#8221;hbox&#8221;&gt;<br \/>            &lt;Spacer width=&#8221;8&#8243;\/&gt;<br \/>            &lt;VBox width=&#8221;80&#8243; height=&#8221;74&#8243; vAlign=&#8221;middle&#8221;&gt;<br \/>              &lt;ThumbnailButton height=&#8221;60&#8243; data=&#8221;{currentItem}&#8221; source=&#8221;{currentItem.thumbnailURL}&#8221;\/&gt;<br \/>            &lt;\/VBox&gt;<br \/>            &lt;Spacer width=&#8221;7&#8243;\/&gt;<br \/>            &lt;VBox&gt;<br \/>              &lt;Spacer height=&#8221;3&#8243;\/&gt;<br \/>              &lt;TitleLabel height=&#8221;18&#8243; text=&#8221;{currentItem.displayName}&#8221; truncate=&#8221;true&#8221;\/&gt;<br \/>              &lt;Label height=&#8221;52&#8243; multiline=&#8221;true&#8221; text=&#8221;{currentItem.shortDescription}&#8221; truncate=&#8221;true&#8221;\/&gt;<br \/>            &lt;\/VBox&gt;<br \/>            &lt;Spacer width=&#8221;3&#8243;\/&gt;<br \/>          &lt;\/ListItem&gt;<br \/>        &lt;\/List&gt;<br \/>      <span style=\"color:red;\">&lt;\/VBox&gt;<\/span><br \/>    <span style=\"color:red;\">&lt;\/ViewStack&gt;<\/span><br \/>  &lt;\/Layout&gt;<br \/>&lt;\/Runtime&gt;\n<\/div>\n<p>Next, I need a component that lets me toggle back and forth from the player to the playlist and back. I chose to use a simple link. I placed it directly below the ViewStack.<\/p>\n<div  style=\"background-color: black; color: white; white-space: pre; width: 550px; overflow: auto; margin:0 0 12px 0;padding: 5px; font-size: 11px; font-family: courier new,monospace;\">\n    <span style=\"color:red;\">&lt;VBox width=&#8221;100%&#8221; hAlign=&#8221;right&#8221; height=&#8221;24&#8243;&gt;<\/span><br \/>      <span style=\"color:red;\">&lt;Spacer height=&#8221;3&#8243;\/&gt;<\/span><br \/>      <span style=\"color:red;\">&lt;Link id=&#8221;moreOrLessLink&#8221; text=&#8221;Show more video&#8230;&#8221;\/&gt;<\/span><br \/>    <span style=\"color:red;\">&lt;\/VBox&gt;<\/span>\n<\/div>\n<p>Next, I added some text below the videoplayer for the title and short description of the video currently loaded into the player.<\/p>\n<div  style=\"background-color: black; color: white; white-space: pre; width: 550px; overflow: auto; margin:0 0 12px 0;padding: 5px; font-size: 11px; font-family: courier new,monospace;\">\n         <span style=\"color:red;\">&lt;HBox&gt;<\/span><br \/>          <span style=\"color:red;\">&lt;Spacer width=&#8221;6&#8243;\/&gt;<\/span><br \/>          <span style=\"color:red;\">&lt;VBox&gt;<\/span><br \/>            <span style=\"color:red;\">&lt;TitleLabel id=&#8221;maintitle&#8221; height=&#8221;18&#8243; text=&#8221;{videoPlayer.video.displayName}&#8221; truncate=&#8221;true&#8221;\/&gt;<\/span><br \/>            <span style=\"color:red;\">&lt;Label multiline=&#8221;true&#8221; height=&#8221;54&#8243; text=&#8221;{videoPlayer.video.shortDescription}&#8221; truncate=&#8221;true&#8221;\/&gt;<\/span><br \/>          <span style=\"color:red;\">&lt;\/VBox&gt;<\/span><br \/>          <span style=\"color:red;\">&lt;Spacer width=&#8221;6&#8243;\/&gt;<\/span><br \/>        <span style=\"color:red;\">&lt;\/HBox&gt;<\/span>\n<\/div>\n<p>Finally, some inline <a href=\"http:\/\/support.brightcove.com\/en\/docs\/themes-and-styles-player-templates\">CSS as allowed within the BEML dtd<\/a> in order to have the text fit in the TitleLabel I just added and here&#8217;s the complete BEML for the revised player:<\/p>\n<div  style=\"background-color: black; color: white; white-space: pre; width: 550px; overflow: auto; margin:0 0 12px 0;padding: 5px; font-size: 11px; font-family: courier new,monospace;\">\n&lt;Runtime&gt;<br \/>  &lt;Theme name=&#8221;<span style=\"color:red;\">Flat<\/span>&#8221; style=&#8221;Light&#8221;\/&gt;<br \/>&lt;\/Style&gt;<\/span><br \/>  <span style=\"color:red;\">&lt;Style id=&#8221;maintitle&#8221;&gt;&lt;![CDATA[ .titleText<\/span><br \/>     <span style=\"color:red;\">{<\/span><br \/>  <span style=\"color:red;\">font-size:16;<\/span><br \/>  <span style=\"color:red;\">font-weight:bold;<\/span><br \/>  <span style=\"color:red;\">}<\/span><br \/>  <span style=\"color:red;\">]]&gt;&lt;\/Style&gt;<\/span><br \/>  &lt;Layout id=&#8221;application&#8221; boxType=&#8221;vbox&#8221;&gt;<br \/>    <span style=\"color:red;\">&lt;ViewStack id=&#8221;viewStack&#8221; selectedIndex=&#8221;0&#8243;&gt;<\/span><br \/>     <span style=\"color:red;\"> &lt;VBox&gt;<\/span><br \/>        &lt;VideoPlayer id=&#8221;videoPlayer&#8221; height=&#8221;275&#8243; video=&#8221;{videoList.selectedItem}&#8221;\/&gt;<br \/>        &lt;Spacer height=&#8221;3&#8243;\/&gt;<br \/>        <span style=\"color:red;\">&lt;HBox&gt;<\/span><br \/>          <span style=\"color:red;\">&lt;Spacer width=&#8221;6&#8243;\/&gt;<\/span><br \/>          <span style=\"color:red;\">&lt;VBox&gt;<\/span><br \/>            <span style=\"color:red;\">&lt;TitleLabel id=&#8221;maintitle&#8221; height=&#8221;18&#8243; text=&#8221;{videoPlayer.video.displayName}&#8221; truncate=&#8221;true&#8221;\/&gt;<\/span><br \/>            <span style=\"color:red;\">&lt;Label multiline=&#8221;true&#8221; height=&#8221;54&#8243; text=&#8221;{videoPlayer.video.shortDescription}&#8221; truncate=&#8221;true&#8221;\/&gt;<\/span><br \/>          <span style=\"color:red;\">&lt;\/VBox&gt;<\/span><br \/>          <span style=\"color:red;\">&lt;Spacer width=&#8221;6&#8243;\/&gt;<\/span><br \/>        <span style=\"color:red;\">&lt;\/HBox&gt;<\/span><br \/>      <span style=\"color:red;\">&lt;\/VBox&gt;<\/span><br \/>      <span style=\"color:red;\">&lt;VBox&gt;<\/span><br \/>        &lt;ComboBox id=&#8221;playlistCombo&#8221; height=&#8221;25&#8243;\/&gt;<br \/>        &lt;List id=&#8221;videoList&#8221; rowHeight=&#8221;75&#8243; automaticAdvance=&#8221;true&#8221; data=&#8221;{playlistCombo.selectedItem.videoDTOs}&#8221; itemLeading=&#8221;2&#8243; selectOnClick=&#8221;true&#8221;&gt;<br \/>          &lt;ListItem boxType=&#8221;hbox&#8221;&gt;<br \/>            &lt;Spacer width=&#8221;8&#8243;\/&gt;<br \/>            &lt;VBox width=&#8221;80&#8243; height=&#8221;74&#8243; vAlign=&#8221;middle&#8221;&gt;<br \/>              &lt;ThumbnailButton height=&#8221;60&#8243; data=&#8221;{currentItem}&#8221; source=&#8221;{currentItem.thumbnailURL}&#8221;\/&gt;<br \/>            &lt;\/VBox&gt;<br \/>            &lt;Spacer width=&#8221;7&#8243;\/&gt;<br \/>            &lt;VBox&gt;<br \/>              &lt;Spacer height=&#8221;3&#8243;\/&gt;<br \/>              &lt;TitleLabel height=&#8221;18&#8243; text=&#8221;{currentItem.displayName}&#8221; truncate=&#8221;true&#8221;\/&gt;<br \/>              &lt;Label height=&#8221;52&#8243; multiline=&#8221;true&#8221; text=&#8221;{currentItem.shortDescription}&#8221; truncate=&#8221;true&#8221;\/&gt;<br \/>            &lt;\/VBox&gt;<br \/>            &lt;Spacer width=&#8221;3&#8243;\/&gt;<br \/>          &lt;\/ListItem&gt;<br \/>        &lt;\/List&gt;<br \/>      <span style=\"color:red;\">&lt;\/VBox&gt;<\/span><br \/>    <span style=\"color:red;\">&lt;\/ViewStack&gt;<\/span><br \/>    <span style=\"color:red;\">&lt;VBox width=&#8221;100%&#8221; hAlign=&#8221;right&#8221; height=&#8221;24&#8243;&gt;<\/span><br \/>      <span style=\"color:red;\">&lt;Spacer height=&#8221;3&#8243;\/&gt;<\/span><br \/>      <span style=\"color:red;\">&lt;Link id=&#8221;moreOrLessLink&#8221; text=&#8221;Show more video&#8230;&#8221;\/&gt;<\/span><br \/>    <span style=\"color:red;\">&lt;\/VBox&gt;<\/span><br \/>  &lt;\/Layout&gt;<br \/>&lt;\/Runtime&gt;\n<\/div>\n<p>I did the rest of the color customizations in the <a href=\"http:\/\/support.brightcove.com\/en\/docs\/setting-styles-players\">publishing tools in Brightcove Studio<\/a>.<\/p>\n<p>This only addresses the UI of the player. I now need to wire up events.<\/p>\n<p><strong>Brightcove Player API for Javascript<\/strong><\/p>\n<p>Now I need to enable toggling between the player and playlist when someone clicks on the link. Brightcove doesn&#8217;t enable this within BEML itself. You need to interact with the player externally using the Player API.<\/p>\n<p>The first step is to make sure your player is enabled for the Javascript\/Actionscript API. This is a checkbox on the Global Tab of the player settings. It is by default unchecked.<\/p>\n<p>Now, you need to load the Brightcove Javascript library. I loaded the combined js file <a href=\"http:\/\/support.brightcove.com\/en\/docs\/coding-solution-using-hybrid-both-player-apis\">as described in the Brightcove help page<\/a>. <\/p>\n<p>Brightcove supplies an <a href=\"http:\/\/docs.brightcove.com\/en\/player\/\">API document<\/a>.<\/p>\n<p>When a Brightcove player loads in a page, it calls an <a href=\"http:\/\/docs.brightcove.com\/en\/smart-player-api\/\">onTemplateLoaded<\/a> method that you can place in the page to gain access to Brightcove&#8217;s objects and interact with the player.  There are examples of this on a dozen sites.<\/p>\n<p><code>function onTemplateLoaded(experienceID) { \/*insert code here*\/ }<\/code><\/p>\n<p>For encapsulation, I&#8217;ll create my own Javascript object. Construct it in this method passing the experienceID.<\/p>\n<p><code>function onTemplateLoaded(experienceID) { new SnsCompactListVideoPlayer(experienceID); }<\/code><\/p>\n<p>In the constructor, I obtain a reference to the Brightcove module object, lookup the link element by its ID then add an event listener for click events. <\/p>\n<div  style=\"background-color: black; color: white; white-space: pre; width: 550px; overflow: auto; margin:0 0 12px 0;padding: 5px; font-size: 11px; font-family: courier new,monospace;\">\nfunction SnsCompactListVideoPlayer(experienceID)<br \/>{<br \/>  var playerExperience = brightcove.getExperience(experienceID);<br \/>  var experienceModule = playerExperience.getModule(APIModules.EXPERIENCE);<\/p>\n<p>  this.moreOrLessLink = experienceModule.getElementByID(&#8220;moreOrLessLink&#8221;); \/\/the link that toggles between the videoplayer and the playlist<br \/>  this.viewStack = experienceModule.getElementByID(&#8220;viewStack&#8221;);\/\/the ui element that contains the videoplayer in one stack and the playlist in another<br \/>  this.videoPlayer = experienceModule.getElementByID(&#8220;videoPlayer&#8221;);\/\/the video player ui element <br \/>  this.videoList = experienceModule.getElementByID(&#8220;videoList&#8221;);<br \/>  if (this.moreOrLessLink != null &#038;&#038; this.viewStack != null &#038;&#038; this.videoPlayer != null)<br \/>  {<br \/>    \/\/toggle between videoplayer and playlist based on clicks<br \/>    this.moreOrLessLink.addEventListener(&#8220;elementClick&#8221;, bindMethodToObject(this.togglePlayer,this));<br \/>    \/\/when a video plays make sure the videoplayer element is visible<br \/>    this.videoPlayer.addEventListener(BCMediaEvent.PLAY, bindMethodToObject(this.togglePlayerToPlay, this));<br \/>  }<br \/>}\n<\/div>\n<p>I had to bind the click event to the instance of the video player &#8212; otherwise when the event fires, the <em>this<\/em> keyword references the calling page not the player instance. <a href=\"https:\/\/developer.mozilla.org\/en\/JavaScript\/Reference\/Global_Objects\/function\/apply\">I did this using the <em>apply<\/em> method<\/a>.<\/p>\n<div  style=\"background-color: black; color: white; white-space: pre; width: 550px; overflow: auto; margin:0 0 12px 0;padding: 5px; font-size: 11px; font-family: courier new,monospace;\">\nfunction bindMethodToObject(method, object)<br \/>{<br \/>  return function() { return method.apply(object, arguments); }<br \/>}<\/p>\n<\/div>\n<p>In the event handler, I check which layer of the ViewStack is topmost (selectedIndex) and switch to the other one making sure to pause the video if it is currently playing whenever someone clicks to view the playlist.<\/p>\n<div  style=\"background-color: black; color: white; white-space: pre; width: 550px; overflow: auto; margin:0 0 12px 0;padding: 5px; font-size: 11px; font-family: courier new,monospace;\">\nSnsCompactListVideoPlayer.prototype.togglePlayer = function(e)<br \/>{<br \/>\tif (this.viewStack.getSelectedIndex() == 0)<br \/>\t{<br \/>\t\tthis.viewStack.setSelectedIndex(1);<br \/>\t\tthis.moreOrLessLink.setText(&#8220;Return to player&#8230;&#8221;);<br \/>\t\tif (this.videoPlayer.isPlaying())<br \/>\t\t{<br \/>\t\t\tthis.videoPlayer.pause();<br \/>\t\t}<br \/>\t}<br \/>\telse<br \/>\t{<br \/>\t\tthis.viewStack.setSelectedIndex(0);<br \/>\t\tthis.moreOrLessLink.setText(&#8220;Show more video&#8230;&#8221;);<br \/>\t}<br \/>}\n<\/div>\n<p>I also wired an event to the video player to make sure that whenever the player plays, it becomes the selectedIndex in the ViewStack. This handles whens someone clicks on a video in the playlist.<\/p>\n<div  style=\"background-color: black; color: white; white-space: pre; width: 550px; overflow: auto; margin:0 0 12px 0;padding: 5px; font-size: 11px; font-family: courier new,monospace;\">\n\/*<br \/>* Simon &#038; Schuster Compact List Video Player<br \/>* Script by Ken Judy<br \/>* May 1, 2011<br \/>*\/<\/p>\n<p>function SnsCompactListVideoPlayer(experienceID)<br \/>{<br \/>  var playerExperience = brightcove.getExperience(experienceID);<br \/>  var experienceModule = playerExperience.getModule(APIModules.EXPERIENCE);<\/p>\n<p>  this.moreOrLessLink = experienceModule.getElementByID(&#8220;moreOrLessLink&#8221;); \/\/the link that toggles between the videoplayer and the playlist<br \/>  this.viewStack = experienceModule.getElementByID(&#8220;viewStack&#8221;);\/\/the ui element that contains the videoplayer in one stack and the playlist in another<br \/>  this.videoPlayer = experienceModule.getElementByID(&#8220;videoPlayer&#8221;);\/\/the video player ui element <br \/>  this.videoList = experienceModule.getElementByID(&#8220;videoList&#8221;);<br \/>  if (this.moreOrLessLink != null &#038;&#038; this.viewStack != null &#038;&#038; this.videoPlayer != null)<br \/>  {<br \/>    \/\/toggle between videoplayer and playlist based on clicks<br \/>    this.moreOrLessLink.addEventListener(&#8220;elementClick&#8221;, bindMethodToObject(this.togglePlayer,this));<br \/>    \/\/when a video plays make sure the videoplayer element is visible<br \/>    this.videoPlayer.addEventListener(BCMediaEvent.PLAY, bindMethodToObject(this.togglePlayerToPlay, this));<br \/>  }<br \/>}<\/p>\n<p>function bindMethodToObject(method, object)<br \/>{<br \/>  return function() { return method.apply(object, arguments); }<br \/>}<\/p>\n<p>SnsCompactListVideoPlayer.prototype.togglePlayer = function(e)<br \/>{<br \/>\tif (this.viewStack.getSelectedIndex() == 0)<br \/>\t{<br \/>\t\tthis.viewStack.setSelectedIndex(1);<br \/>\t\tthis.moreOrLessLink.setText(&#8220;Return to player&#8230;&#8221;);<br \/>\t\tif (this.videoPlayer.isPlaying())<br \/>\t\t{<br \/>\t\t\tthis.videoPlayer.pause();<br \/>\t\t}<br \/>\t}<br \/>\telse<br \/>\t{<br \/>\t\tthis.viewStack.setSelectedIndex(0);<br \/>\t\tthis.moreOrLessLink.setText(&#8220;Show more video&#8230;&#8221;);<br \/>\t}<br \/>}<br \/>SnsCompactListVideoPlayer.prototype.togglePlayerToPlay = function(e)<br \/>{<br \/>\tif (this.viewStack.getSelectedIndex() == 1)<br \/>\t{<br \/>\t\tthis.viewStack.setSelectedIndex(0);<br \/>\t\tthis.moreOrLessLink.setText(&#8220;Show more video&#8230;&#8221;);<br \/>\t}<br \/>}<\/div>\n","protected":false},"excerpt":{"rendered":"<p>My goal was to build a Brightcove player that the layers the videoplayer and playlist in the same space with a way of toggling from the one to the other. I wanted to create minimal code external to the player &hellip; <a href=\"https:\/\/judykat.com\/ken-judy\/making-layered-brightcove-player-player-api-beml\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":2,"featured_media":2560,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[30],"tags":[820,87,83],"class_list":["post-2559","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-software-development","tag-brightcove","tag-javascript","tag-video"],"aioseo_notices":[],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/judykat.com\/ken-judy\/wp-content\/uploads\/2011\/05\/Screen-shot-2011-05-07-at-1.52.03-PM.png","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/judykat.com\/ken-judy\/wp-json\/wp\/v2\/posts\/2559","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/judykat.com\/ken-judy\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/judykat.com\/ken-judy\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/judykat.com\/ken-judy\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/judykat.com\/ken-judy\/wp-json\/wp\/v2\/comments?post=2559"}],"version-history":[{"count":0,"href":"https:\/\/judykat.com\/ken-judy\/wp-json\/wp\/v2\/posts\/2559\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/judykat.com\/ken-judy\/wp-json\/wp\/v2\/media\/2560"}],"wp:attachment":[{"href":"https:\/\/judykat.com\/ken-judy\/wp-json\/wp\/v2\/media?parent=2559"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/judykat.com\/ken-judy\/wp-json\/wp\/v2\/categories?post=2559"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/judykat.com\/ken-judy\/wp-json\/wp\/v2\/tags?post=2559"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}