Player Developer Basics: Preparing to Write Code

In this topic, you will learn how to create a standard, best practice template that prepares you to write code to control the player.

Steps

Paste an instance of Advanced implementation player code into an HTML page.

<video data-video-id="5831704295001"
  data-account="921483702001"
  data-player="Uj7Yz80yM"
  data-embed="default"
  data-application-id=""
  controls=""
  width="640"
  height="360"></video>
<script src="//players.brightcove.net/921483702001/Uj7Yz80yM_default/index.min.js"></script>

Add an id attribute to the <video> tag and assign it a value of myPlayerID.
```
<video id="myPlayerID"
```
Add a <script> block just above the </body> tag.
In the script block, use the videojs.getPlayer() method to obtain a reference to the player on the page. Use the id added earlier as the method's argument.
```
<script>
  videojs.getPlayer('myPlayerID')
</script>
```

Use the ready() method, and code an anonymous callback function as its argument.

<script>
  videojs.getPlayer('myPlayerID').ready(function() {

  )};
</script>

Declare a variable, named myPlayer in the anonymous function and assign it the keyword this, which represents the player in the context of the anonymous function.
```
var myPlayer = this;
```

Completed Code

<!doctype html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Preparing to Write Code</title>
</head>

<body>

<video id="myPlayerID"
  data-video-id="5831704295001"
  data-account="921483702001"
  data-player="Uj7Yz80yM"
  data-embed="default"
  data-application-id=""
  controls=""
  width="640"
  height="360"></video>
<script src="//players.brightcove.net/921483702001/Uj7Yz80yM_default/index.min.js"></script>

<script>
  videojs.getPlayer('myPlayerID').ready(function() {
    var myPlayer = this;
  )};
</script>

</body>

</html>