# การแสดงผลแบบ Instream ด้วย HTML/JavaScript
การแสดงผลวิดีโอด้วย HTML และ JavaScript ด้วย ByteArk Player ช่วยให้นักพัฒนาปรับแต่งการแสดงผลของแต่ละตำแหน่งได้ด้วยรูปแบบและฟีเจอร์ที่ต้องการ โดยมีขั้นตอนดังนี้
# 1. เพิ่มแท็กสำหรับแสดงผล Video Player
เพิ่มแท็ก <div> พร้อมระบุแอตทริบิวต์ id สำหรับแสดงผล Video Player
<div id="video-player"></div>
1
# 2. เพิ่ม ByteArk Player SDK
เพิ่ม ByteArk Player SDK ที่แท็ก <script> ใน HTML
<script src="https://byteark-sdk.cdn.byteark.com/player/v2/byteark-player.min.js"></script>
1
# 3. เปิดใช้งาน Video Player
เพิ่มโค้ดเพื่อเปิดใช้งาน Video Player โดยอ้างอิง id ของ <div> ในขั้นตอนที่ 1 พร้อมระบุข้อมูลสำคัญดังนี้
srcลิงก์.m3u8ของวิดีโอ ได้จาก Source Link ของแต่ละวิดีโอที่อัปโหลดใน ByteArk Streamtitleชื่อของวิดีโอ- Options ของโฆษณา ระบุใน
plugins→bytearkAds→ads→adTagUrlดูรายละเอียดได้ที่ การเล่นโฆษณาของ ByteArk Player - Options อื่น ๆ ดูได้ที่ การปรับตั้งค่า Options
# ตัวอย่างซอร์สโค้ด
<!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'
}],
plugins: {
bytearkAds: {
ads: [{
adTagUrl: 'https://pubads.g.doubleclick.net/gampad/ads?sz=640x480&iu=/124319096/external/single_ad_samples&ciu_szs=300x250&impl=s&gdfp_req=1&env=vp&output=vast&unviewed_position_start=1&cust_params=deployment%3Ddevsite%26sample_ct%3Dskippablelinear&correlator=',
time: 'pre'
}, {
adTagUrl: 'https://pubads.g.doubleclick.net/gampad/ads?sz=640x480&iu=/124319096/external/single_ad_samples&ciu_szs=300x250&impl=s&gdfp_req=1&env=vp&output=vast&unviewed_position_start=1&cust_params=deployment%3Ddevsite%26sample_ct%3Dskippablelinear&correlator=',
time: 10
}]
}
}
});
</script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32