# Installation and Quick Start
To use ByteArk Player on your website, modify the HTML as follows:
- Add a
<div>tag where the video should appear. The tag must have anidattribute that you will reference later.
<div id="video-player"></div>
1
- Add a
<script>tag at the bottom of<body>to load the player script.
<script src="https://byteark-sdk.cdn.byteark.com/player/v2/byteark-player.min.js"></script>
1
- Add the following script after the
<script>tag in step 2 to initialize the video player on the<div>created in step 1, and to specify which video to play:
<script>
var player = bytearkPlayer('video-player', {
fluid: true,
poster: '/assets/samples/player/images/poster-big-buck-bunny.jpg',
sources: [{
title: 'Big Buck Bunny',
src: 'https://byteark-playertzxedwv.stream-playlist.byteark.com/streams/TZyZheqEJUwC/playlist.m3u8',
type: 'application/x-mpegURL'
}],
});
</script>
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
- Call the
bytearkPlayerfunction. The first parameter is theidof the<div>created earlier (in this examplevideo-player), and the second is an object specifying the video source and properties.
# Example
A full HTML example of a page using the video player as described above:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div id="video-player"></div>
<script src="https://byteark-sdk.cdn.byteark.com/player/v2/byteark-player.min.js"></script>
<script>
var player = bytearkPlayer('video-player', {
fluid: true,
poster: '/assets/samples/player/images/poster-big-buck-bunny.jpg',
sources: [{
title: 'Big Buck Bunny',
src: 'https://byteark-playertzxedwv.stream-playlist.byteark.com/streams/TZyZheqEJUwC/playlist.m3u8',
type: 'application/x-mpegURL'
}]
});
</script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
For additional player configuration, see the reference documentation.