# hls.js
ByteArk Player รองรับการเล่นวิดีโอในรูปแบบ HLS จากการใช้งาน library hls.js (opens new window) และได้ทำการปรับแต่งค่าต่างๆ เพื่อให้เหมาะสมกับการเล่นวิดีโอในปัจจุบัน
# การตั้งค่า hls.js
แต่ในบางกรณีนักพัฒนาอาจจะต้องการปรับแต่งการตั้งค่าของ hls.js เอง ก็สามารถทำได้ผ่านทาง options เมื่อเริ่มใช้งาน video player ซึ่งสามารถดู options ต่างๆสำหรับการตั้งค่าได้จากเอกสารของ hls.js (opens new window)
var player = bytearkPlayer('the-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/TZyG96KZ1Wgx/playlist.m3u8',
type: 'application/x-mpegURL'
}],
html5: {
hlsjs: {
// add hls.js options here
}
}
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
# การเข้าถึง instance ของ hls.js
การเข้าถึง instance ของ hls.js สามารถทำได้ 2 วิธี คือ
- ผ่าน callback function
onInitผ่านการตั้งค่า hls.js
...
html5: {
hlsjs: {
onInit: function(hlsjs) {
// do something
}
// add other hls.js options here
}
}
...
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
- ผ่านการเรียก
player.hlsjsในขณะ runtime
var hlsjs = player.hlsjs
1
# การตั้งค่า Request Media/Encryption with credentials
var player = bytearkPlayer('the-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/TZyG96KZ1Wgx/playlist.m3u8',
type: 'application/x-mpegURL'
}],
html5: {
hlsjs: {
xhrSetup: function(xhr, url) {
xhr.withCredentials = true
}
// add other hls.js options here
}
}
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17