Print
Details: Category: บทความ Flutter | Published: 01 March 2020 | Hits: 358

ตามหัวข้อ เลยครับ การทำ Video Player บน Flutter

Screen Shot 2563 02 16 at 101234

พระเอกของเราเลยครับ Plugin ตัวนี่ ไปที่ https://pub.dev/packages/video_player

Screen Shot 2563 02 16 at 101244

ให้ Copy ส่วนนี่ไว้

Screen Shot 2563 02 16 at 101318

ไปที่ dependencies ของ ไฟร์ pubspec.yaml เพิ่ม เข้าไป

Screen Shot 2563 02 16 at 101401

ต่อไป Plugin ตัวที่สองที่ต้องมีไว้ทำ พวก Controller (ปุ่ม Play, Stop) ครับ chewie ครับ ไปที่ https://pub.dev/packages/chewie

Screen Shot 2563 02 16 at 101430

 ทำเหมือนเดิม ไปที่ pubspace.yaml เพิ่ม chewie เข้าไปแบบนี้ครับ

Screen Shot 2563 02 16 at 102956

มาสเตอร์ ประกาศ ตัวแปร urlVideo สำหรับเก็บ url ที่ Video เก็บอยู่ videoPlayerController, chewieController แบบนี้

Screen Shot 2563 02 16 at 103006

สร้างออฟเจ็ค videoController แบบนี ก่อน และ chewieController. กำหนดให้จอ มีอัตราส่วน 3:2 เล่นเองเมื่อเปิด ไม่มี เล่นซ้ำเมื่อจบ

Screen Shot 2563 02 16 at 103012

return Widget Chewie ที่ body แบบนี้

Screen Shot 2563 02 16 at 103756

อ้อ เรื่องสำคัญอีกเรื่องกำหนด dispose (ถ้าเปลี่ยน state จะปิด Service อย่างไร ?) ด้วยไม่งั้นเปลี่ยนหน้า วีดีโอ ก็ยังเล่นไปเหมือนเดิมนะ

Screen Shot 2563 02 16 at 103851

มาสเตอร์ เขียน Tread ดึงโค้ด จาก API แบบนี่ ทวนความจำไปดูที่ https://www.androidthai.in.th/android-flutter/263-read-data-json-on-flutter.html

Screen Shot 2563 02 16 at 104148

มาละ

Screen Shot 2563 02 16 at 104159

หมุนจอได้ด้วย

Screen Shot 2563 02 16 at 104203

น่าจะโอนะครับ ลองทำตามดูครับ สำหรับใครที่ทำไม่ได้ อย่างไร ?

ดูเพิ่มเติมที่

https://www.androidthai.in.th/private-project-android-flutter-course.html มีอะไร ? ที่ มาสเตอร์ ทำได้ ยินดีครับ