# การติดตั้งและใช้งานเบื้องต้น
การนำ ByteArk Player ไปใช้บนเว็บไซต์นั้น สามารถทำได้โดยแก้ไข HTML ของเว็บไซต์ ดังนี้
- เพิ่มแท็ก
<div>ในจุดที่ต้องการจะแสดงผลวิดีโอ โดยต้องระบุแอททริบิวต์idซึ่งจะใช้อ้างอิงในขั้นตอนถัดๆ ไป ดังตัวอย่าง
<div id="video-player"></div>
1
- เพิ่มแท็ก
<script>ภายในแท็ก<body>ในส่วนท้ายของหน้า เพื่อนำสคริปท์ของตัวเล่นวิดีโอมาใช้
<script src="https://byteark-sdk.cdn.byteark.com/player/v2/byteark-player.min.js"></script>
1
- เพิ่มสคริปท์ต่อไปนี้หลังจากแท็ก
<script>ในข้อ 3. เพื่อเปิดใช้งานตัวเล่นวิดีโอ กับแท็ก<div>ที่ได้สร้างไว้ในข้อ 1. และระบุวิดีโอที่ต้องการจะใช้เล่น ดังนี้
<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
- ในการเรียกสคริปท์นี้ ให้เรียกฟังก์ชัน
bytearkPlayerโดยพารามิเตอร์แรก ให้ระบุidของแท็ก<div>ที่ได้สร้างไว้ในตอนต้น (ในที่นี้คือvideo-player) ส่วนพารามิเตอร์ที่สองเป็น object ระบุที่อยู่วิดีโอ และคุณสมบัติของวิดีโอนั้นๆ ดังนี้
# ตัวอย่างซอร์สโค้ด
ตัวอย่าง HTML ของหน้าเว็บที่ใช้ video player ตามขั้นตอนที่อธิบายมาข้างต้นทั้งหมด
<!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
สำหรับการตั้งค่า video player อื่นๆ โปรดดูเพิ่มเติมจากเอกสารอ้างอิง