플레이어 개발자 기본 사항: 코드 작성 준비
이 항목에서는 플레이어를 제어하는 코드를 작성할 수 있도록 준비하는 표준 모범 사례 템플릿을 만드는 방법을 배웁니다.
단계
- 고급 구현 플레이어 코드의 인스턴스를 HTML 페이지에 붙여 넣습니다.
<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>
- 추가
id
속성<video>
태그를 지정하고 값을myPlayerID
.
<video id="myPlayerID"
- 추가하다
<script>
바로 위에 블록</body>
꼬리표.
- 에서
script
블록, 사용videojs.getPlayer()
페이지에서 플레이어에 대한 참조를 가져 오는 메소드입니다. 사용id
이전에 메서드의 인수로 추가되었습니다.
<script>
videojs.getPlayer('myPlayerID')
</script>
- 사용
ready()
메서드를 사용하고 익명 콜백 함수를 인수로 코딩합니다.
<script>
videojs.getPlayer('myPlayerID').ready(function() {
)};
</script>
- 이름이 지정된 변수 선언
myPlayer
익명 함수에서 키워드를 할당하십시오. this
, 익명 함수의 컨텍스트에서 플레이어를 나타냅니다.
var myPlayer = this;
완성 된 코드
<!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>