# การใช้งาน ByteArk Player SDK for Flutter

หน้านี้แสดง Walkthrough การ Embed ByteArkPlayer ลงใน Widget tree ของแอป Flutter พร้อมควบคุมการเล่นและรับ Event ผ่าน ByteArkPlayerController สำหรับรายละเอียดของแต่ละ Option / API / Event ดูเอกสารอ้างอิงตามลิงก์ในแต่ละขั้นตอน

# 1. สร้าง Controller และ Listener

ByteArkPlayerController ใช้สำหรับควบคุม Player (play/pause/seek/setAudio/etc.) และส่ง Event ผ่าน ByteArkPlayerListener

class _MyPlayerScreenState extends State<MyPlayerScreen> {
  late ByteArkPlayerController _controller;
  @override
  void initState() {
    super.initState();
    final listener = ByteArkPlayerListener(
      onPlayerReady: () => debugPrint("Player ready"),
      onPlaybackPlay: () => debugPrint("Playback started"),
      onPlaybackPause: () => debugPrint("Playback paused"),
      onPlaybackError: (error) => debugPrint("Error: ${error.msg}"),
    );
    _controller = ByteArkPlayerController(listener: listener);
  }
  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

ดู Event Listeners Reference สำหรับ Callback ทั้งหมดของ ByteArkPlayerListener

# 2. สร้าง ByteArkPlayerItem

ByteArkPlayerItem กำหนดข้อมูลของวิดีโอที่จะเล่น

final playerItem = ByteArkPlayerItem(
  sources: [
    ByteArkPlayerSource(url: "<MEDIA_URL>"),
  ],
  title: "Big Buck Bunny",
  mediaId: "VIDEO_ID",
);

1
2
3
4
5
6
7

# 3. สร้าง ByteArkPlayerConfig

ByteArkPlayerConfig ตั้งค่าการทำงานของ Player

final config = ByteArkPlayerConfig(
  licenseKey: ByteArkPlayerLicenseKey(
    android: "<ANDROID_LICENSE_KEY>",
    iOS: "<IOS_LICENSE_KEY>",
  ),
  playerItem: playerItem,
  aspectRatio: '16:9',
  autoPlay: true,
  control: true,
  seekButtons: true,
  fullScreenButton: true,
  settingButton: true,
);

1
2
3
4
5
6
7
8
9
10
11
12
13

ดู Options สำหรับ Property ทั้งหมดของ ByteArkPlayerConfig และ ByteArkPlayerItem

ใช้ Widget ByteArkPlayer พร้อมส่ง playerConfig และ controller

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: Column(
      children: [
        AspectRatio(
          aspectRatio: 16 / 9,
          child: ByteArkPlayer(
            playerConfig: config,
            controller: _controller,
          ),
        ),
        ElevatedButton(
          onPressed: _controller.pause,
          child: const Text("Pause"),
        ),
      ],
    ),
  );
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

# 5. ควบคุม Player ผ่าน API

ตัวอย่างการเรียก API ที่ใช้บ่อย

_controller.play();
_controller.pause();
_controller.togglePlayback();
_controller.seekTo(60);                  // ไปที่นาทีที่ 1:00 (วินาที)
_controller.setPlaybackSpeed(1.5);       // ความเร็ว 1.5x
_controller.toggleFullScreen();

1
2
3
4
5
6

ดู API Reference สำหรับ Method ทั้งหมดของ ByteArkPlayerController

# การแสดง Player หลายตัว

หากต้องการแสดง Player มากกว่าหนึ่งตัวบนหน้าจอเดียวกัน ให้สร้าง ByteArkPlayerController แยก สำหรับแต่ละ Widget ByteArkPlayer โดย Controller แต่ละตัวจะผูกกับ Player ตัวเดียวผ่าน playerId ภายใน ทำให้ Event และการเรียก API ถูกส่งไปยัง Player ของตัวเองเท่านั้น ไม่ปะปนข้ามกัน

final firstController = ByteArkPlayerController(listener: firstListener);
final secondController = ByteArkPlayerController(listener: secondListener);
// ...
ByteArkPlayer(playerConfig: firstConfig, controller: firstController);
ByteArkPlayer(playerConfig: secondConfig, controller: secondController);

1
2
3
4
5
6
7

อย่าลืมเรียก dispose() ของ Controller ทุกตัวใน State.dispose()

# หัวข้อที่เกี่ยวข้อง

การเล่นโฆษณา (Advertisement) — Google IMA SDK / VAST / VMAP
การป้องกันเนื้อหา — Widevine, FairPlay, HLS ClearKey
ByteArk Lighthouse — เก็บสถิติการรับชม

← การติดตั้ง ByteArk Player SDK for Flutter การปรับตั้งค่า Options →