# 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('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'
  }],
  html5: {
    hlsjs: {
      // add hls.js options here
    }
  }
});

1
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

ผ่านการเรียก player.hlsjs ในขณะ runtime

var hlsjs = player.hlsjs

# การตั้งค่า Request Media/Encryption with credentials

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'
  }],
  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

← การใช้งานกับ Angular การติดตั้งและใช้งานเบื้องต้น →